accessibility-review

WCAG compliance auditing checks your design tokens and UI components against accessibility standards (AA/AAA). This Skill automatically validates contrast ratios, state differentiation, focus indicators, and keyboard navigation across your design system, then reports prioritized findings with actionable remediation steps.

Contrast ratio validation ensures text and UI components meet WCAG AA/AAA standards and APCA calculations for readability. The Skill flags insufficient contrast between foreground and background colors, helping you identify which tokens and components need adjustment for inclusive design.

Yes. Dark mode contrast rules ensure hover states are darker in dark mode and text adapts correctly for readability. The Skill evaluates contrast requirements independently for light and dark theme tokens, validating state differentiation in each context.

Focus management review checks focus indicator visibility, focus trap implementation in overlays, and keyboard navigation paths. The Skill audits your components' focus states and validates that interactive elements are reachable and distinguishable via keyboard alone.

The Skill analyzes YAML token files (packages/theme/docs/design-tokens.yml) and component source code (packages/ui/src/components). It evaluates color token architecture and UI code for accessibility issues, producing a structured report with token/state mappings and executive summary.

The Skill requires pnpm as a dependency for package management. Beyond that, it operates on your existing design token files and component code without additional tool setup, making it accessible to teams already using standard design system workflows.