Frontend Skills
English

Dostępność

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-corekażdego projektu webowego12 regułładowane zawsze: 92 tokeny; przy użyciu: 1097 tokenów; w referencjach na żądanie: 2711 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

Agent
npx github:dawidolko/frontend-skills init

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)
AgentRozpoznawany po
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

Gdzie trafia fe-a11y-core dla: Claude Code

  • .claude/skills/fe-a11y-core/SKILL.mdskill
  • .claude/skills/fe-a11y-core/references/wcag-map.mdskill
  • .claude/rules/fe-a11y-core.mdplik reguł
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: OpenAI Codex

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Cursor

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .cursor/rules/fe-a11y-core.mdcplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: GitHub Copilot

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .github/instructions/fe-a11y-core.instructions.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Gemini CLI

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Antigravity CLI

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .agents/rules/fe-a11y-core.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Devin / Windsurf

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • .devin/rules/fe-a11y-core.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: OpenCode

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Cline

  • .claude/skills/fe-a11y-core/SKILL.mdskill
  • .claude/skills/fe-a11y-core/references/wcag-map.mdskill
  • .clinerules/fe-a11y-core.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Zed

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: JetBrains Junie

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Kiro

  • .kiro/skills/fe-a11y-core/SKILL.mdskill
  • .kiro/skills/fe-a11y-core/references/wcag-map.mdskill
  • .kiro/steering/fe-a11y-core.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Augment

  • .agents/skills/fe-a11y-core/SKILL.mdskill
  • .agents/skills/fe-a11y-core/references/wcag-map.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Trae

  • .trae/skills/fe-a11y-core/SKILL.mdskill
  • .trae/skills/fe-a11y-core/references/wcag-map.mdskill
  • .trae/rules/fe-a11y-core.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Continue

  • .frontend-skills/skills/fe-a11y-core/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-core/references/wcag-map.mdskill
  • .continue/rules/fe-a11y-core.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: 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.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.
Prawdziwy plik

Gdzie trafia fe-a11y-core dla: Aider

  • .frontend-skills/skills/fe-a11y-core/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-core/references/wcag-map.mdskill
  • CONVENTIONS.mdblok instrukcji
  • .aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.
Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

  • is this accessible
  • WCAG

A żeby sprawdzić i poprawić pracę:

  • Użyj skilla fe-a11y-core na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij a11y/lang-valid i popraw to tutaj.

Reguły, których uczy

  • a11y/lang-valid

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

    poważnastatyczneWCAG 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.

    poważnastatyczneWCAG 2.2.1

  • a11y/iframe-title

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

    poważnastatyczneWCAG 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.

    umiarkowanaw przeglądarceWCAG 1.3.1, 2.4.1

  • a11y/html-lang

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

    poważnastatyczneWCAG 3.1.1

  • a11y/page-title

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

    poważnastatyczneWCAG 2.4.2

  • a11y/img-alt

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

    krytycznastatyczneWCAG 1.1.1

  • a11y/control-name

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

    krytycznastatyczneWCAG 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.

    krytycznastatyczneWCAG 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.

    poważnastatyczneWCAG 2.1.1, 4.1.2

  • a11y/focus-visible

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

    poważnastatyczneWCAG 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.

    poważnaw przeglądarceWCAG 1.4.3

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

  • 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.

Kroki, które wykonuje agent

  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.

Jak agent sprawdza swoją pracę

  • 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%.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious.
audit: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

SKILL.md na GitHubie