What problem does it solve? React interfaces often ship with broken keyboard navigation, missing accessible names, incorrect ARIA usage, and overlays that trap or lose focus. This Skill provides concrete rules for building and reviewing UI that is semantic, keyboard usable, screen-reader understandable, and touch reachable. ## Core Features & Use Cases - Primitive Selection Guidance: Choose the correct Base UI React primitive for each task, such as Dialog versus Popover versus Tooltip, or Select versus Combobox versus Autocomplete. - Form and Field Rules: Enforce real form semantics with labels, descriptions, error relationships, invalid state, and correct controlled or uncontrolled contracts. - Accessibility Testing Standards: Write Testing Library tests that query by role, name, and label instead of test IDs, and verify overlay focus and dismissal behavior. - Use Case: When implementing a new settings panel with a drawer, form fields, and a destructive confirmation, use this Skill to pick the right primitives, wire accessible names, and validate keyboard and screen-reader behavior. ## Quick Start Review this React component for accessibility issues and rewrite it using proper Base UI primitives with correct labels, focus handling, and keyboard support.
