claudeskills.page

16 skills · 7 categories

Claude Code skills for Accessibility

Accessibility skills across web, mobile and design: WCAG 2.2 audits, accessible forms and components, color contrast, motion preferences and the manual checks automated scanners cannot judge.

Install all 16 Browse the list

Start with these

  1. 1

    Accessibility Audit

    WCAG 2.2 AA findings you can hand to engineers

    Claude runs the audit a specialist would: axe-core and Lighthouse first, then the manual passes automation cannot judge — keyboard order and traps, focus visibility and obscuring, contrast in both themes via a bundled script, ARIA widget behavior, reflow, target size and a screen reader walk through critical flows. Every finding cites its success criterion, location, impact and fix.

  2. 2

    Mobile Accessibility

    Apps that work with VoiceOver, TalkBack and huge text

    Claude audits and fixes native and cross-platform apps so critical flows can be completed eyes-free with VoiceOver and TalkBack. It writes concise labels, exposes roles, values and states, groups cards with custom actions, manages focus after navigation, and makes layouts reflow at the largest text sizes, using a concept-to-API map for SwiftUI, UIKit, Compose, Views, React Native and Flutter.

  3. 3

    Forms and Validation

    One schema, server-checked, errors a screen reader hears

    Claude starts each form from a field spec with input types, autocomplete tokens and actionable error copy, then writes one Zod schema used by both browser and server. Forms submit without JavaScript, keep values on error, map API failures such as a taken email onto the right field, and follow WCAG 2.2 rules on labels, focus after submit, paste and password managers.

All 16 Accessibility skills

Grouped by category. Each card opens the full playbook, example prompts and install commands.

Frontend 7

★ No. 047

Accessibility Audit

WCAG 2.2 AA findings you can hand to engineers

Claude runs the audit a specialist would: axe-core and Lighthouse first, then the manual passes automation cannot judge — keyboard order and traps, focus visibility and obscuring, contrast in both themes via a bundled script, ARIA widget behavior, reflow, target size and a screen reader walk through critical flows. Every finding cites its success criterion, location, impact and fix.

accessibility-audit 208 lines · 3 files
No. 053

Forms and Validation

One schema, server-checked, errors a screen reader hears

Claude starts each form from a field spec with input types, autocomplete tokens and actionable error copy, then writes one Zod schema used by both browser and server. Forms submit without JavaScript, keep values on error, map API failures such as a taken email onto the right field, and follow WCAG 2.2 rules on labels, focus after submit, paste and password managers.

forms-validation 198 lines
No. 051

Data Tables

Fast, accessible tables at 100k rows

Claude sizes the data before choosing an architecture, then keeps sorting, filtering and paging on the same side so users never sort one page and think it is the whole set. It stores table state in the URL, uses cursor pagination with a unique tiebreaker, virtualizes long lists, and keeps a real table with aria-sort and labeled selection that screen readers can follow.

data-tables 223 lines
No. 052

Drag and Drop

Drag as a shortcut, with a click path behind it

Claude builds sortable lists and boards where dragging is optional: every move also works from a Move menu and the keyboard, and each one is announced to screen readers. It picks dnd-kit, Pragmatic drag and drop or native events with reasons, persists order as fractional keys in a byte-collated column, and rolls back optimistic moves when the save fails.

drag-and-drop 254 lines · 2 files
No. 066

Storybook Components

Stories as tested fixtures, not a demo gallery

Claude writes one story per meaningful component state, types meta with satisfies so bad args fail to compile, mocks every network and module dependency so stories render offline, and turns play functions into CI tests through the Vitest addon with accessibility checks. It checks the Storybook major first, because imports and test tooling changed between 8, 9 and 10.

storybook-components 188 lines
No. 070

Virtualized Lists

Thousands of rows, a few dozen DOM nodes

Claude measures before it virtualizes. It tries cheaper rows, pagination and CSS content-visibility first, then builds TanStack Virtual, react-window 2 or react-virtuoso lists with stable keys, measured heights, infinite loading and sticky headers. It keeps focus and screen reader positions intact, adds search where find-in-page breaks, and restores scroll position on back navigation.

virtualized-lists 284 lines
No. 073

Web Components

Custom elements that behave like native ones

Claude designs a custom element's public API first — attributes, properties, events, slots, parts and CSS variables — then implements it with idempotent lifecycle hooks, composed events and ElementInternals for roles, states and form participation. It handles the traps that waste days: properties set before upgrade, ARIA references that cannot cross shadow roots, and Lit fields that shadow reactive accessors.

web-components 237 lines

Testing 1

No. 142

Testing Library

Component tests that query like a screen reader

Claude writes component tests that find elements by role and accessible name, drive them with awaited user-event calls, and assert on what a user would see. It builds one render helper with fresh providers per test, stubs the network rather than hooks, and fixes act() warnings by waiting for the visible result instead of wrapping calls in act.

testing-library 188 lines

Data Engineering 1

No. 222

Data Visualization

Charts that make one point, honestly

Claude starts from the takeaway sentence and picks the chart form for that question, then builds it with zero-based bar axes, small multiples instead of dual axes, a highlighted series against gray, direct labels and a title that states the finding. Before export it checks values against the data, grayscale and colorblind readability, and writes alt text.

data-visualization 179 lines

Mobile 1

No. 340

Mobile Accessibility

Apps that work with VoiceOver, TalkBack and huge text

Claude audits and fixes native and cross-platform apps so critical flows can be completed eyes-free with VoiceOver and TalkBack. It writes concise labels, exposes roles, values and states, groups cards with custom actions, manages focus after navigation, and makes layouts reflow at the largest text sizes, using a concept-to-API map for SwiftUI, UIKit, Compose, Views, React Native and Flutter.

mobile-accessibility 196 lines · 2 files

Design & UX 4

No. 348

Color Systems

OKLCH palettes where every pair passes contrast

Instead of picking hex codes by eye or defaulting to an indigo gradient, Claude generates perceptually even OKLCH scales, assigns them to semantic roles like muted text and input borders, and runs a bundled Python script that checks every pair against WCAG 2.2 thresholds. Dark mode gets its own mapping with lighter accents and stepped surfaces rather than an inversion.

color-systems 192 lines · 2 files
No. 355

Form UX Design

Fewer fields, clearer errors, more finished forms

Claude designs the form before anyone codes it. Every field must justify itself or get cut, deferred or inferred. It then sets layout, controls, input types and autocomplete tokens, validation timing, error placement and wording, and decides between one page and steps with a check-answers page. A bundled auditor flags missing labels, autofill gaps, number-type misuse and blocked paste in rendered HTML.

form-ux-design 240 lines · 2 files
No. 362

SVG Icons

One grid, currentColor, and names screen readers say

Claude replaces emoji, icon fonts and mixed icon sets with one consistent family on a defined grid, runs SVGO with settings that keep viewBox and convert colors to currentColor, and ships icons as tree-shaken components or a sprite. A bundled audit script flags hard-coded fills, missing viewBox, ID collisions and mixed stroke widths, and every icon gets the right ARIA treatment.

svg-icons 180 lines · 2 files
No. 364

UI Motion

Fast, purposeful motion with real numbers

Claude gives each animation a job and a budget: 100 to 150 milliseconds for feedback, up to 350 for modals, exits faster than entrances, ease-out on the way in and ease-in on the way out. It animates only transform and opacity, prefers interruptible transitions, @starting-style and View Transitions over heavy libraries, and adds a reduced-motion version that keeps feedback but drops travel.

ui-motion 188 lines

Documents & Files 1

No. 369

EPUB Ebooks

Ebooks that pass epubcheck and read well anywhere

Claude structures a manuscript into chapters with semantic markup and alt text, writes metadata and reader-friendly CSS, and builds the EPUB with one pandoc command. A bundled linter checks mimetype, OPF manifest, spine, nav and broken links in seconds before epubcheck and Ace by DAISY run, and the book is opened in real readers before it goes to KDP, Apple Books or Kobo.

epub-ebooks 205 lines · 2 files

Technical Writing 1

No. 398

Style Guides

One voice and one term list, enforced in CI

Claude builds style guides people use. It audits existing docs for conflicting terms, inherits a published base guide and records only your overrides, defines voice traits with do and don't examples from your product, writes the terminology table that fixes most inconsistency, and encodes the enforceable rules as Vale styles and vocabularies rolled out gradually in CI.

style-guides 188 lines · 2 files

Install

Every Accessibility skill in one command

Installs into ~/.claude/skills/. Add --project after -- to install into the current repository.

curl -fsSL https://claudeskills.page/install.sh | sh -s -- accessibility-audit mobile-accessibility forms-validation color-systems data-tables drag-and-drop form-ux-design svg-icons ui-motion epub-ebooks testing-library storybook-components virtualized-lists web-components data-visualization style-guides

Accessibility skills FAQ

What is the best Claude Code skill for Accessibility?

Start with Accessibility Audit: WCAG 2.2 AA findings you can hand to engineers. Then add Mobile Accessibility and Forms and Validation, which cover the next most common Accessibility requests.

How do I install all 16 Accessibility skills at once?

Pass every name to the installer in one command: curl -fsSL https://claudeskills.page/install.sh | sh -s -- accessibility-audit mobile-accessibility forms-validation color-systems data-tables drag-and-drop form-ux-design svg-icons ui-motion epub-ebooks testing-library storybook-components virtualized-lists web-components data-visualization style-guides. Add --project to install them into the current repository's .claude/skills/ folder so your team gets them too.

Do these Accessibility skills work outside Claude Code?

Yes. Each skill uses only the portable Agent Skills frontmatter, so the same folder works on claude.ai, through the Claude API and in the Agent SDK. Skills that run bundled scripts need an environment with code execution.

Related technologies

esc