Frontend Skills
Polski

Accessibility

Contrast, colour, size and reflow

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

fe-a11y-visualevery web project8 rules94 tokens always loaded, 998 tokens when used, 1747 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

Agent
npx github:dawidolko/frontend-skills init

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents
AgentFound by
Claude CodeCLAUDE.md .claude CLAUDE.local.md
OpenAI Codex.codex AGENTS.override.md
Cursor.cursor .cursorrules
GitHub Copilot.github/copilot-instructions.md .github/instructions .github/skills .github/prompts
Gemini CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.json opencode.jsonc .opencode
Cline.clinerules .cline
Zed.rules .zed
JetBrains Junie.junie
Kiro.kiro
Augment.augment .augment-guidelines
Trae.trae
Continue.continue
Amazon Q Developer.amazonq
Aider.aider.conf.yml CONVENTIONS.md

Where fe-a11y-visual lands for Claude Code

  • .claude/skills/fe-a11y-visual/SKILL.mdskill
  • .claude/skills/fe-a11y-visual/references/visual.mdskill
  • .claude/rules/fe-a11y-visual.mdrule file
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-a11y-visual.md
---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for OpenAI Codex

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for Cursor

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .cursor/rules/fe-a11y-visual.mdcrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-a11y-visual.mdc
---
description: Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".
globs: **/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for GitHub Copilot

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .github/instructions/fe-a11y-visual.instructions.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-a11y-visual.instructions.md
---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Gemini CLI

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for Antigravity CLI

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .agents/rules/fe-a11y-visual.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-a11y-visual.md
---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Devin / Windsurf

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .devin/rules/fe-a11y-visual.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-a11y-visual.md
---
trigger: glob
globs: "**/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for OpenCode

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for Cline

  • .claude/skills/fe-a11y-visual/SKILL.mdskill
  • .claude/skills/fe-a11y-visual/references/visual.mdskill
  • .clinerules/fe-a11y-visual.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-a11y-visual.md
---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Zed

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for JetBrains Junie

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for Kiro

  • .kiro/skills/fe-a11y-visual/SKILL.mdskill
  • .kiro/skills/fe-a11y-visual/references/visual.mdskill
  • .kiro/steering/fe-a11y-visual.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-a11y-visual.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.kiro/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Augment

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-visual lands for Trae

  • .trae/skills/fe-a11y-visual/SKILL.mdskill
  • .trae/skills/fe-a11y-visual/references/visual.mdskill
  • .trae/rules/fe-a11y-visual.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-a11y-visual.md
---
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
globs: **/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.trae/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Continue

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.mdskill
  • .continue/rules/fe-a11y-visual.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-a11y-visual.md
---
name: "Contrast, colour, size and reflow"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-a11y-visual/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.
The real file

Where fe-a11y-visual lands for Amazon Q Developer

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.mdskill
  • .amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-visual` (Contrast, colour, size and reflow): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-a11y-visual/SKILL.md`.
The real file

Where fe-a11y-visual lands for Aider

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.mdskill
  • CONVENTIONS.mdinstruction block
  • .aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-visual` (Contrast, colour, size and reflow): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-a11y-visual/SKILL.md`.
The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

  • is this contrast OK

And to check and fix the work:

  • Use the fe-a11y-visual skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain a11y/color-contrast and fix it here.

Rules it teaches

  • a11y/color-contrast

    Text has a contrast ratio of at least 4.5:1 with its background; large text (24px, or 18.5px bold) at least 3:1.

    seriousbrowserWCAG 1.4.3

  • a11y/non-text-contrast

    Borders of fields, checkboxes, toggles, focus rings and meaningful icons have at least 3:1 contrast with their neighbours.

    seriousmanualWCAG 1.4.11

  • a11y/no-color-only

    Colour is never the only cue; errors, states, links in text and chart series also differ by text, icon, shape or underline.

    seriousbrowserWCAG 1.4.1

  • a11y/target-size

    Pointer targets are at least 24 by 24 CSS pixels, or spaced so a 24px circle on each does not touch another target.

    seriousbrowserWCAG 2.5.8

  • a11y/reflow

    At 320 CSS pixels wide (400% zoom) content reflows into one column with no horizontal scrolling, except tables, maps and similar.

    seriousmanualWCAG 1.4.10

  • a11y/text-spacing

    Text survives line height 1.5, paragraph spacing 2em, letter spacing 0.12em and word spacing 0.16em without being cut off.

    seriousbrowserWCAG 1.4.12

  • a11y/font-size-relative

    The root font size is not set in pixels, so text follows the reader's default size; use rem for type.

    minorstaticWCAG 1.4.4

  • a11y/hover-content-dismissible

    Tooltips and popups shown on hover or focus close with Escape, stay while the pointer moves onto them, and do not vanish on a timer.

    moderatemanualWCAG 1.4.13

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

  • Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
  • Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
  • Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
  • Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
  • Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
  • Text survives the WCAG spacing overrides: no fixed heights with overflow: hidden on text (a11y/text-spacing).
  • Do not set the root font size in px; size type in rem (a11y/font-size-relative).
  • Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
  • Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
  • Respect prefers-reduced-motion and prefers-color-scheme; test both themes for every rule above.

Steps the agent follows

  1. Find the colour tokens (CSS custom properties, Tailwind @theme, a tokens file) and fix contrast there, as tested pairs of foreground and background, for light and dark themes.
  2. Style states visibly beyond colour: :hover and :focus-visible change shape or underline; selected items get a check mark; errors get an icon and text.
  3. Size controls with min-width/min-height and padding, not with a fixed width/height on the icon.
  4. Lay out with flex-wrap, grid with minmax(min(…, 100%), 1fr), max-width, and overflow-wrap: anywhere for long strings.
  5. Let text boxes grow: min-height, no clipping; truncation (line-clamp) only where the full text is reachable.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed finds a root font size in px and a zoom block; the rest needs a rendered page.
  • audit --url <page> runs axe-core for text contrast, links that rely on colour and target size.
  • By hand: zoom to 400% (or a 320px window), apply a text spacing bookmarklet, view in greyscale, and check field borders and focus rings with a contrast checker.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious.
audit: counts by severity, each rule with its first location, the exit code.

Reference files

SKILL.md on GitHub