What problem does it solve? UI code frequently ships with accessibility defects: clickable divs, missing form labels, undersized touch targets, and color-only status indicators. This Skill makes WCAG 2.2 AA the enforced floor for every interactive surface, catching violations at authoring time rather than at audit time. ## Core Features & Use Cases - Radix-only interactive primitives: Bans hand-rolled <div onClick> patterns and requires Radix-based components (via @repo/ui) for dialogs, dropdowns, tooltips, tabs, and other composite widgets. - Concrete a11y invariants: Enforces 44x44px touch targets, AA contrast ratios, keyboard navigation parity, visible focus rings, semantic HTML over ARIA, associated form labels, and aria-live error announcements. - Mobile-first dual-quality: Requires both mobile and desktop viewports to reach first-class quality, verified by the viewport-screenshot-gate hook and axe-precommit static analysis. - Use Case: When adding a new settings form in a Next.js app, the Skill ensures every input has an associated label, errors are announced via role="alert", all buttons meet the 44px touch minimum, and axe-core runs on the staged changes before commit. ## Quick Start Ask the agent to build or modify any UI component, such as "add a dropdown menu to the settings page", and the accessibility rules apply automatically.
