Frontend Skills
Polski

Accessibility

Accessibility, WCAG 2.2 map

The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".

fe-a11y-coreevery web project12 rules92 tokens always loaded, 1097 tokens when used, 2711 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-core lands for Claude Code

  • .claude/skills/fe-a11y-core/SKILL.mdskill
  • .claude/skills/fe-a11y-core/references/wcag-map.mdskill
  • .claude/rules/fe-a11y-core.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-core.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Accessibility, WCAG 2.2 map (frontend-skills)

The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for OpenAI Codex

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for Cursor

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .cursor/rules/fe-a11y-core.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-core.mdc
---
description: The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Accessibility, WCAG 2.2 map (frontend-skills)

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for GitHub Copilot

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .github/instructions/fe-a11y-core.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-core.instructions.md
---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked \"is this accessible\" or \"WCAG\"."
---

# Accessibility, WCAG 2.2 map (frontend-skills)

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Gemini CLI

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for Antigravity CLI

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .agents/rules/fe-a11y-core.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-core.md
---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked \"is this accessible\" or \"WCAG\"."
---

# Accessibility, WCAG 2.2 map (frontend-skills)

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Devin / Windsurf

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .devin/rules/fe-a11y-core.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-core.md
---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Accessibility, WCAG 2.2 map (frontend-skills)

The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for OpenCode

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for Cline

  • .claude/skills/fe-a11y-core/SKILL.mdskill
  • .claude/skills/fe-a11y-core/references/wcag-map.mdskill
  • .clinerules/fe-a11y-core.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-core.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Accessibility, WCAG 2.2 map (frontend-skills)

The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Zed

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for JetBrains Junie

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for Kiro

  • .kiro/skills/fe-a11y-core/SKILL.mdskill
  • .kiro/skills/fe-a11y-core/references/wcag-map.mdskill
  • .kiro/steering/fe-a11y-core.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-core.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Accessibility, WCAG 2.2 map (frontend-skills)

The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked "is this accessible" or "WCAG".

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Augment

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.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-core lands for Trae

  • .trae/skills/fe-a11y-core/SKILL.mdskill
  • .trae/skills/fe-a11y-core/references/wcag-map.mdskill
  • .trae/rules/fe-a11y-core.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-core.md
---
description: "The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked \"is this accessible\" or \"WCAG\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Accessibility, WCAG 2.2 map (frontend-skills)

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Continue

  • .frontend-skills/skills/fe-a11y-core/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-core/references/wcag-map.mdskill
  • .continue/rules/fe-a11y-core.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-core.md
---
name: "Accessibility, WCAG 2.2 map"
description: "The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next. Use when starting accessibility work, auditing a page or a component library, or when asked \"is this accessible\" or \"WCAG\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Accessibility, WCAG 2.2 map (frontend-skills)

- Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
- Use native HTML first; add ARIA only where no element does the job.
- `<html lang>` is set and every `lang` value is a valid tag (a11y/html-lang, a11y/lang-valid).
- Every page and route has a unique `<title>`; the layout has one `<main>` and labelled landmarks (a11y/page-title, a11y/landmarks).
- Images have `alt`, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
- Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
- Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
- Every iframe has a `title` (a11y/iframe-title).
- No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
- Report results as "N problems found, M items need a person", never as a pass.

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

Where fe-a11y-core lands for Amazon Q Developer

  • .frontend-skills/skills/fe-a11y-core/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-core/references/wcag-map.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-core` (Accessibility, WCAG 2.2 map): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-core/SKILL.md`.
The real file

Where fe-a11y-core lands for Aider

  • .frontend-skills/skills/fe-a11y-core/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-core/references/wcag-map.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-core` (Accessibility, WCAG 2.2 map): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-core/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 accessible
  • WCAG

And to check and fix the work:

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

Rules it teaches

  • a11y/lang-valid

    Every lang value is a valid BCP 47 language tag ("en", "en-GB", "pl"), never "en_US" or a language name.

    seriousstaticWCAG 3.1.1, 3.1.2

  • a11y/no-meta-refresh

    No meta refresh reloads or redirects the page after a delay; redirect on the server or let people choose.

    seriousstaticWCAG 2.2.1

  • a11y/iframe-title

    Every visible iframe has a title that says what it contains (map, video, payment form).

    seriousstaticWCAG 4.1.2

  • a11y/landmarks

    Each page has one main landmark, all content sits inside landmarks, and repeated landmarks of a kind have distinct labels.

    moderatebrowserWCAG 1.3.1, 2.4.1

  • a11y/html-lang

    The html element names the language of the page in a non-empty lang attribute.

    seriousstaticWCAG 3.1.1

  • a11y/page-title

    Every HTML document has a title element that says what the page is about.

    seriousstaticWCAG 2.4.2

  • a11y/img-alt

    Every img and area element has an alt attribute; a decorative image has alt="".

    criticalstaticWCAG 1.1.1

  • a11y/control-name

    Every button and link has an accessible name; icon-only controls get visually hidden text or aria-label.

    criticalstaticWCAG 4.1.2, 2.4.4

  • a11y/input-label

    Every form field has a programmatic label (label element, aria-label or aria-labelledby); a placeholder is not a label.

    criticalstaticWCAG 1.3.1, 3.3.2, 4.1.2

  • a11y/no-click-on-static

    A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.

    seriousstaticWCAG 2.1.1, 4.1.2

  • a11y/focus-visible

    Never remove the focus outline without drawing a visible replacement for keyboard focus.

    seriousstaticWCAG 2.4.7

  • 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

The rule digest

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

  • Work to WCAG 2.2 level AA as the target; say "helps you work to WCAG 2.2 AA", never "compliant" or "accessible".
  • Use native HTML first; add ARIA only where no element does the job.
  • <html lang> is set and every lang value is a valid tag (a11y/html-lang, a11y/lang-valid).
  • Every page and route has a unique <title>; the layout has one <main> and labelled landmarks (a11y/page-title, a11y/landmarks).
  • Images have alt, buttons and links have names, fields have labels (a11y/img-alt, a11y/control-name, a11y/input-label).
  • Everything works with the keyboard and shows where focus is (a11y/no-click-on-static, a11y/focus-visible).
  • Text contrast is at least 4.5:1, large text 3:1 (a11y/color-contrast).
  • Every iframe has a title (a11y/iframe-title).
  • No timed refresh or redirect; time limits can be turned off or extended (a11y/no-meta-refresh).
  • Report results as "N problems found, M items need a person", never as a pass.

Steps the agent follows

  1. Load the skill for the work at hand: forms fe-a11y-forms, keyboard and focus fe-a11y-keyboard, names and live regions fe-a11y-aria, colour and layout fe-a11y-visual, media fe-a11y-media, widgets fe-a11y-dialog, fe-a11y-menus, fe-a11y-tabs-accordion, fe-a11y-combobox, fe-a11y-carousel-toast, fe-a11y-tables.
  2. Fix the shared layout first (document shell, skip link, landmarks, focus style, live region): one change fixes every page.
  3. Fix shared components next (button, link, field, dialog, icon): find them through the profile and lessons.
  4. Run the static audit on the changed files, then the page audit on a running page, then the manual checks for the criteria that tools do not cover.
  5. Record decisions that the next person needs (for example "icons come from <Icon>, which sets aria-hidden") with learn --lesson.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed runs the static rules; audit --url <page> adds axe-core and Lighthouse on the rendered page.
  • Automated checks find only part of the problems: about half of the A and AA criteria have no automated rule at all. The manual list in the reference covers the rest.
  • By hand on every change: keyboard only, screen reader on the changed part, zoom to 400%.

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