void-accessibility-check

What problem does it solve? React components often ship with accessibility defects—missing labels, broken keyboard navigation, low contrast, or tiny touch targets—that block users relying on assistive technology. This Skill applies a concrete 7-point gate to every component you create or edit so violations are caught before they ship. ## Core Features & Use Cases - 7-Point Accessibility Gate: Checks semantic HTML, programmatic labels, keyboard navigation, focus management, WCAG AA contrast, 44x44px touch targets, and reduced-motion support. - Radix-First Guidance: Steers you toward Radix primitives that handle roles, keyboard behavior, and focus trapping correctly by default. - Verification Workflow: Directs Lighthouse audits (target score 100), manual keyboard walkthroughs, and screen reader testing with VoiceOver, NVDA, or TalkBack. - Use Case: When you ask an agent to add a dialog or icon button to a React app, this Skill auto-applies and ensures the result has an accessible name, focus trap, Escape handling, and sufficient contrast. ## Quick Start Ask the agent to add a new button or card component to your React app and it will apply the accessibility checklist automatically.