What problem does it solve? Building consistent React components in this repo requires knowing many conventions at once: where hand-authored code lives, which Tailwind tokens to use, how Radix aria attributes are wired, and how screens compose primitives. This Skill encodes all of those rules so every component matches existing patterns without re-deriving them. ## Core Features & Use Cases - Component taxonomy and patterns: Classifies each request as a primitive, form field, data display, feature form, screen, route shell, or app shell change, then applies the matching build pattern with positive references from the codebase. - Accessibility built in: Enforces a WCAG-oriented checklist (roles, aria attributes, focus-first-error, live regions) and documents shadcn/Radix gotchas such as aria placement on SelectTrigger and autoFocus on Calendar. - Use Case: Ask to add a new audit filter field or a detail screen, and the Skill produces a TypeScript component using cn(), theme tokens, typed API helpers like auditUserMessage, and the correct state machine, then reminds you to run npm test from client/. ## Quick Start Ask the agent to build a new React component, form, screen, or route shell in client/src/components following the component-builder conventions.
