Accessibility

Accessible Data Tables

Designs semantic, accessible, responsive data tables: sortable, filterable, paginated, with real captions and headers.

What it does

Designs semantic, accessible, responsive data tables: sortable, filterable, paginated, with real captions and headers.

When to use it

Use for sortable, dense or admin tables, and choosing between a table, list, or interactive data grid.

Problems it prevents

Stops tables that fall apart on mobile or are unreadable to a screen reader because headers were never associated with cells.

Typical workflow

  1. Choose the right pattern for the data
  2. Structure real table semantics
  3. Design responsive collapse behaviour
  4. Verify sort and filter accessibility

Example output

A data table a screen reader can navigate cell-by-cell with correct header association, that still works on a phone.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/accessible-data-tables/ to use it on every project, or in .claude/skills/accessible-data-tables/ to scope it to one repository. Then invoke it directly:

/accessible-data-tables

Read the official Claude Code skills guide

Works well with