Frontend Skills
English

Dostępność

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-tableskażdego projektu webowego5 regułładowane zawsze: 92 tokeny; przy użyciu: 864 tokeny; w referencjach na żądanie: 1043 tokeny.

Instalacja

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

Agent
npx github:dawidolko/frontend-skills init

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

Po czym init rozpoznaje każdego z agentów (17)
AgentRozpoznawany po
Claude CodeCLAUDE.md .claude CLAUDE.local.md
OpenAI Codex.codex AGENTS.override.md
Cursor.cursor .cursorrules
GitHub Copilot.github/copilot-instructions.md .github/instructions .github/skills .github/prompts
Gemini CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.json opencode.jsonc .opencode
Cline.clinerules .cline
Zed.rules .zed
JetBrains Junie.junie
Kiro.kiro
Augment.augment .augment-guidelines
Trae.trae
Continue.continue
Amazon Q Developer.amazonq
Aider.aider.conf.yml CONVENTIONS.md

Gdzie trafia fe-a11y-tables dla: Claude Code

  • .claude/skills/fe-a11y-tables/SKILL.mdskill
  • .claude/skills/fe-a11y-tables/references/tables.mdskill
  • .claude/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: OpenAI Codex

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

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .cursor/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: GitHub Copilot

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .github/instructions/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: Gemini CLI

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

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .agents/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

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

  • .agents/skills/fe-a11y-tables/SKILL.mdskill
  • .agents/skills/fe-a11y-tables/references/tables.mdskill
  • .devin/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: OpenCode

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

  • .claude/skills/fe-a11y-tables/SKILL.mdskill
  • .claude/skills/fe-a11y-tables/references/tables.mdskill
  • .clinerules/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: Zed

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

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

  • .kiro/skills/fe-a11y-tables/SKILL.mdskill
  • .kiro/skills/fe-a11y-tables/references/tables.mdskill
  • .kiro/steering/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: Augment

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

  • .trae/skills/fe-a11y-tables/SKILL.mdskill
  • .trae/skills/fe-a11y-tables/references/tables.mdskill
  • .trae/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

Gdzie trafia fe-a11y-tables dla: Continue

  • .frontend-skills/skills/fe-a11y-tables/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-tables/references/tables.mdskill
  • .continue/rules/fe-a11y-tables.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-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>`.
Prawdziwy plik

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

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

Gdzie trafia fe-a11y-tables dla: Aider

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

  • make this table accessible

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

  • a11y/table-headers

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

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

    drobnaręczneWCAG 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.

    umiarkowanaręczneWCAG 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.

    poważnaw przeglądarceWCAG 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.

    poważnaręczneWCAG 1.4.10

Skrót reguł

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

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

Kroki, które wykonuje agent

  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.

Jak agent sprawdza swoją pracę

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

Sprawdzane audytem

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

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

Pliki referencyjne

SKILL.md na GitHubie