Run a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust principles. Use this skill whenever the user wants to audit accessibility, review WCAG compliance, fix accessibility issues, prepare for accessibility certification, address an accessibility lawsuit risk, or systematically improve a site's accessibility. Triggers on accessibility audit, WCAG audit, a11y audit, accessibility compliance, ADA compliance, screen reader test, keyboard navigation, accessibility report, fix accessibility, axe scan. Also triggers when accessibility issues have been reported and need systematic remediation.
npx skills add https://github.com/rampstackco/claude-skills --skill accessibility-audit
Run a thorough accessibility audit and produce a remediation plan. Stack-agnostic. Anchored to WCAG 2.1 AA, with notes on AAA where relevant.
This skill goes deeper than the accessibility checks in qa-testing and design-standards. Use this when accessibility itself is the goal.
qa-testing)frontend-component-build)design-standards or brand-identity)WCAG organizes accessibility around four principles. The audit covers each in depth.
Information and UI must be presentable in ways users can perceive.
Audit checks:
alt text. Decorative images use alt="". Complex images (charts, infographics) have long descriptions.UI components and navigation must be operable.
Audit checks:
Information and operation must be understandable.
Audit checks:
<html lang="...">). Unusual words and abbreviations have definitions or expansions. Reading level appropriate to audience.Content must be robust enough to work with current and future user agents.
Audit checks:
Run automated scanners across the priority pages. These catch 30 to 50 percent of issues but miss the rest.
Tools:
Output: A list of automated findings, by page.
Unplug the mouse. Navigate the priority user flows using only keyboard.
Test:
Document: Any flow where keyboard navigation breaks down.
Test with at least one real screen reader. Each combination has quirks.
Common combinations:
Test:
Verify the visual aspects of accessibility.
Test:
prefers-reduced-motion honored)Often overlooked. Critical for inclusive products.
Test:
references/audit-report-template.md.10. Build a remediation plan. Sequenced fixes with effort and impact estimates.
For prioritization:
Critical (P0):
Important (P1):
Minor (P2):
Polish (P3):
Default output is a comprehensive audit report at accessibility-audit.md.
Structure:
Plus a remediation tracking spreadsheet with one row per finding.
references/audit-report-template.md - Full audit report template.references/wcag-quick-reference.md - Condensed WCAG 2.1 AA criteria with audit checks.references/aria-patterns.md - Decision-grade ARIA patterns. Semantic-HTML-first principle, common interactive widgets (accordion, tabs, modal, toggle, disclosure, navigation), live regions, hiding patterns, labeling, state indicators, anti-patterns.Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Take rampstackco/accessibility-audit from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.