Frontend Skills
Polski

Accessibility

Data tables

Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".

fe-a11y-tablesevery web project5 rules92 tokens always loaded, 864 tokens when used, 1043 tokens in references on demand.

Install

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

Agent
npx github:dawidolko/frontend-skills init

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

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

Where fe-a11y-tables lands for Claude Code

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

# Data tables (frontend-skills)

Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for OpenAI Codex

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

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .cursor/rules/fe-a11y-tables.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-tables.mdc
---
description: Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Data tables (frontend-skills)

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for GitHub Copilot

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .github/instructions/fe-a11y-tables.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-tables.instructions.md
---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked \"make this table accessible\"."
---

# Data tables (frontend-skills)

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Gemini CLI

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

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .agents/rules/fe-a11y-tables.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-tables.md
---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked \"make this table accessible\"."
---

# Data tables (frontend-skills)

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Devin / Windsurf

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

# Data tables (frontend-skills)

Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for OpenCode

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

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

# Data tables (frontend-skills)

Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Zed

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

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

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

# Data tables (frontend-skills)

Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked "make this table accessible".

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Augment

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

  • .trae/skills/fe-a11y-tables/SKILL.mdskill
  • .trae/skills/fe-a11y-tables/references/tables.mdskill
  • .trae/rules/fe-a11y-tables.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-tables.md
---
description: "Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked \"make this table accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Data tables (frontend-skills)

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Continue

  • .frontend-skills/skills/fe-a11y-tables/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-tables/references/tables.mdskill
  • .continue/rules/fe-a11y-tables.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-tables.md
---
name: "Data tables"
description: "Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid. Use when rendering tabular data, a pricing or comparison table, a data grid or an admin list in any stack, or when asked \"make this table accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Data tables (frontend-skills)

- Header cells are `<th>`, with `scope="col"` or `scope="row"`; never bold `<td>` (a11y/table-headers).
- Every data table has a name: `<caption>` or `aria-labelledby` (a11y/table-caption).
- Sortable headers hold a `<button>`; `aria-sort` is on the sorted column only (a11y/table-sort).
- A wide table scrolls inside a container with `tabindex="0"`, `role="region"` and a label (a11y/scrollable-region-focusable).
- The page around it reflows at 320px; only the table scrolls (a11y/reflow).
- Use a table for data with rows and columns, never for layout; layout tables get `role="presentation"`.
- Keep the native table semantics: do not set `display: block` or `grid` on `table`, `tr` or `td` without restoring roles.
- Use `role="grid"` only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

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

Where fe-a11y-tables lands for Amazon Q Developer

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

Where fe-a11y-tables lands for Aider

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

  • make this table accessible

And to check and fix the work:

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

Rules it teaches

  • a11y/table-headers

    Data tables mark their header cells with th (with scope when needed); layout tables carry role="presentation".

    seriousstaticWCAG 1.3.1

  • a11y/table-caption

    A data table has a name, from a caption element or aria-labelledby pointing at the heading above it.

    minormanualWCAG 1.3.1

  • a11y/table-sort

    Sortable columns use a button inside the th, and aria-sort only on the header of the column that is sorted.

    moderatemanualWCAG 2.1.1, 4.1.2

  • a11y/scrollable-region-focusable

    A scrolling region with no focusable content inside can itself take focus (tabindex="0") and has a name.

    seriousbrowserWCAG 2.1.1

  • a11y/reflow

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

    seriousmanualWCAG 1.4.10

The rule digest

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

  • Header cells are <th>, with scope="col" or scope="row"; never bold <td> (a11y/table-headers).
  • Every data table has a name: <caption> or aria-labelledby (a11y/table-caption).
  • Sortable headers hold a <button>; aria-sort is on the sorted column only (a11y/table-sort).
  • A wide table scrolls inside a container with tabindex="0", role="region" and a label (a11y/scrollable-region-focusable).
  • The page around it reflows at 320px; only the table scrolls (a11y/reflow).
  • Use a table for data with rows and columns, never for layout; layout tables get role="presentation".
  • Keep the native table semantics: do not set display: block or grid on table, tr or td without restoring roles.
  • Use role="grid" only for spreadsheet-like editing with arrow-key navigation; a list of records is a table.

Steps the agent follows

  1. Check the table component or library first (TanStack Table renders your markup; AG Grid and MUI Data Grid have their own ARIA): fix headers and names at the component level.
  2. Write the skeleton: table > caption > thead with th scope="col" > tbody with a th scope="row" per row where a cell names the row.
  3. For complex headers (two header rows, merged cells), use id on each th and headers="…" on the tds, or split the table.
  4. For small screens, prefer a scroll container over turning rows into cards; if you do turn rows into cards, render a list or a dl, not a restyled table.
  5. Row actions: one named button per row ("Edit invoice 1042"), not an unnamed icon.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed finds tables with data cells and no header cells, and unnamed icon buttons in rows.
  • audit --url <page> adds axe-core's header checks and the scrollable region check on the rendered table.
  • By hand: with a screen reader, move through cells with the table keys (Ctrl+Alt+arrows in NVDA and VoiceOver) and hear the headers; zoom to 400% and scroll the table alone.

Checked by the audit

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

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

Reference files

SKILL.md on GitHub