Dostępność

Navigation, disclosures and menus

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

fe-a11y-menuskażdego projektu webowego5 regułładowane zawsze: 89 tokenów; przy użyciu: 872 tokeny; w referencjach na żądanie: 1271 tokenów.

Instalacja

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

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

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)

Agent	Rozpoznawany po
Claude Code	`CLAUDE.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 CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.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-menus dla: Claude Code

.claude/skills/fe-a11y-menus/SKILL.mdskill
.claude/skills/fe-a11y-menus/references/menus.mdskill
.claude/rules/fe-a11y-menus.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-menus.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: OpenAI Codex

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: Cursor

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.cursor/rules/fe-a11y-menus.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-menus.mdc

---
description: Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: GitHub Copilot

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.github/instructions/fe-a11y-menus.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-menus.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Gemini CLI

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: Antigravity CLI

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.agents/rules/fe-a11y-menus.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-menus.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

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

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.devin/rules/fe-a11y-menus.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-menus.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: OpenCode

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: Cline

.claude/skills/fe-a11y-menus/SKILL.mdskill
.claude/skills/fe-a11y-menus/references/menus.mdskill
.clinerules/fe-a11y-menus.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-menus.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Zed

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: JetBrains Junie

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: Kiro

.kiro/skills/fe-a11y-menus/SKILL.mdskill
.kiro/skills/fe-a11y-menus/references/menus.mdskill
.kiro/steering/fe-a11y-menus.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-menus.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Augment

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus dla: Trae

.trae/skills/fe-a11y-menus/SKILL.mdskill
.trae/skills/fe-a11y-menus/references/menus.mdskill
.trae/rules/fe-a11y-menus.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-menus.md

---
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Continue

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.mdskill
.continue/rules/fe-a11y-menus.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-menus.md

---
name: "Navigation, disclosures and menus"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Amazon Q Developer

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.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-menus` (Navigation, disclosures and menus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-menus/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-a11y-menus dla: Aider

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.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-menus` (Navigation, disclosures and menus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-menus/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):

menu
make this menu accessible

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-a11y-menus na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij a11y/menu-not-for-site-nav i popraw to tutaj.

Reguły, których uczy

a11y/menu-not-for-site-nav
Site navigation is a nav with a list of links and disclosure buttons, not role="menu" or role="menubar".
umiarkowanastatyczneWCAG 4.1.2
a11y/popup-button-expanded
A control that opens a popup (aria-haspopup or role="combobox") has aria-expanded that follows the open state.
poważnastatyczneWCAG 4.1.2
a11y/menu-keyboard
Menus implement their keys - arrows move between items, Enter activates, Escape closes and returns focus to the button.
poważnaręczneWCAG 2.1.1
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
poważnaręczneWCAG 4.1.2
a11y/link-is-link
An <a> is a real link with an href; an action is a <button>, never <a> without href, href="#" or javascript:.
poważnastatyczneWCAG 2.1.1, 4.1.2

Skrót reguł

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

Site navigation is <nav aria-label> with a list of <a href>, not role="menu" or menubar (a11y/menu-not-for-site-nav).
A control with aria-haspopup, and every combobox, has aria-expanded that follows the open state (a11y/popup-button-expanded).
A show/hide trigger is a <button> with aria-expanded, and aria-controls for the panel (a11y/state-exposed).
Navigation items are real links; a sub-list opens from a button, never from a link with href="#" (a11y/link-is-link).
Mark the current page with aria-current="page", not only with a colour.
A role="menu" implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

Kroki, które wykonuje agent

Decide the pattern: links to pages → disclosure navigation; commands in an app (rename, delete, export) → menu button with role="menu"; one choice from a list → <select> or a listbox (fe-a11y-combobox).
For a hamburger on small screens, toggle the same <nav> with a <button aria-expanded aria-controls>; when it covers the page, render it in a <dialog> (fe-a11y-dialog).
For a menu button, use the project's UI library primitive (Radix DropdownMenu, React Aria Menu, Reka UI DropdownMenu, Angular CDK Menu) or follow the APG example closely.
Keep the open state in one variable and bind aria-expanded, the hidden attribute and the CSS class to it.
Use popover for the dropdown panel when it should close on outside click and Escape without extra code.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds role="menu" inside <nav>, popup triggers without aria-expanded, and fake links.
By hand: with the keyboard only, open and close every menu, reach every link, press Escape; with a screen reader, hear "expanded" and "collapsed" and "current page".

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

references/menus.md1271 tokenów

SKILL.md na GitHubie