components-build

@jal-co

The canonical standard for building React components. Covers composition, accessibility, typing, styling, state, polymorphism, asChild, data attributes, design tokens, and artifact taxonomy from the components.build specification by Hayden Bleasel and shadcn. Use for building any React component, reviewing component architecture, auditing accessibility and keyboard navigation, choosing between as/asChild, designing variant APIs with CVA, applying data-attribute-driven styling, classifying artifacts (primitive/component/block/pattern/template/utility), extending HTML types, and managing controlled/uncontrolled state. Use proactively when creating or reviewing React components, designing component APIs, building design systems, implementing keyboard navigation, adding ARIA support, structuring compound components, choosing element flexibility patterns, or applying Tailwind styling systems. Examples: - user: "Build an accessible dialog" → semantic HTML, focus trap, keyboard map, ARIA, asChild trigger - user: "Review this component" → audit composition, a11y, typing, styling, data attributes - user: "Is this a component or a block?" → classify using taxonomy heuristics - user: "Add variants to this button" → CVA + cn + data-slot + exported types - user: "Should I use as or asChild?" → compare tradeoffs, recommend based on context - user: "Build a dropdown menu" → compound component, keyboard map, ARIA roles/states, focus management - user: "Make this component support both controlled and uncontrolled" → useControllableState