Accessibility

Tabs and accordions

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

fe-a11y-tabs-accordionevery web project5 rules79 tokens always loaded, 821 tokens when used, 1218 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.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

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

Agent	Found by
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`

Where fe-a11y-tabs-accordion lands for Claude Code

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for OpenAI Codex

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for Cursor

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

---
description: Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Gemini CLI

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for Antigravity CLI

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Devin / Windsurf

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for OpenCode

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for Cline

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Zed

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for JetBrains Junie

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for Kiro

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Augment

.agents/skills/fe-a11y-tabs-accordion/SKILL.mdskill
.agents/skills/fe-a11y-tabs-accordion/references/tabs-accordion.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-tabs-accordion lands for Trae

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

---
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Continue

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

---
name: "Tabs and accordions"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

The real file

Where fe-a11y-tabs-accordion lands for Amazon Q Developer

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

The real file

Where fe-a11y-tabs-accordion lands for Aider

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

should this be tabs or an accordion

And to check and fix the work:

Use the fe-a11y-tabs-accordion skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/tabs-selected and fix it here.

Rules it teaches

a11y/tabs-selected
Every role="tab" carries aria-selected, true on the active tab and false on the others.
seriousstaticWCAG 4.1.2
a11y/tabs-keyboard
A tab list is one Tab stop; Left and Right Arrow (Up and Down when vertical), Home and End move between tabs.
seriousmanualWCAG 2.1.1
a11y/accordion-header
Each accordion header is a button with aria-expanded inside a heading of the right level; or use details and summary.
moderatemanualWCAG 1.3.1, 4.1.2
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
seriousmanualWCAG 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

The rule digest

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

Tabs use tablist > tab, each tab with aria-selected and aria-controls, each panel tabpanel with aria-labelledby (a11y/tabs-selected).
A tab list is one Tab stop: roving tabindex, arrow keys, Home and End (a11y/tabs-keyboard).
Accordion headers are <button aria-expanded> inside a heading, or <summary> in <details> (a11y/accordion-header).
Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
Headers and tabs are buttons, never clickable divs (a11y/no-click-on-static).
Give a tabpanel tabindex="0" when its first content is not focusable.
Use <details name="group"> for a one-open-at-a-time accordion before writing script.
Tabs that change the URL or load a page are links in a <nav>, not tabs.

Steps the agent follows

Choose: few short panels on wide screens → tabs; many or long sections, or small screens → accordion; navigation between pages → links with aria-current="page".
Use the UI library's primitive if the project has one (Radix Tabs, React Aria Tabs, Reka UI Tabs, Angular CDK or @angular/aria once stable); check that it renders the roles below.
Otherwise build tabs from buttons with role="tab"; keep the selected index in one state and derive aria-selected, tabindex and the visible panel from it.
Hide inactive panels with hidden (not only opacity), so they leave the Tab order and the accessibility tree.
For an FAQ, start with <details>/<summary>; style the marker with summary::marker or list-style: none.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds tabs without aria-selected and clickable div headers.
audit --url <page> adds axe-core's required parent and child role checks (a tab outside a tablist).
By hand: Tab reaches the tab list once, arrows move, Tab enters the panel; accordion headers toggle with Enter and Space and announce expanded or collapsed.

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

references/tabs-accordion.md1218 tokens

SKILL.md on GitHub