components-build

The components-build skill provides a comprehensive toolkit for developers and UI engineers to create high-quality, professional React components. Based on the industry-standard specification co-authored by Hayden Bleasel and shadcn, this skill enforces rigorous architectural patterns that ensure your UI code is scalable, accessible, and maintainable. It is intended for software engineers working on design systems, component libraries, or complex frontend applications where composition and accessibility are critical.

• Implements 16 core rule categories including Composition, Accessibility, State Management, and Polymorphism.
• Enforces best practices such as composition over configuration, single-element wrapping, and native HTML attribute extension.
• Provides guidance on implementing accessible interactive elements using ARIA, focus management, and screen reader announcements.
• Streamlines styling workflows by integrating Tailwind CSS, CVA (Class Variance Authority), and the cn utility for intelligent class merging.
• Facilitates robust type safety for complex component interfaces using TypeScript, including proper prop exports and definition structures.
• Supports the Radix UI-inspired 'as-child' composition pattern for seamless component interaction and prop merging.
• Offers detailed guidance on publishing workflows, including registry structure, metadata schema, and npm package exports.

Usage and Practical Tips:

• Use this skill when initiating new component files or refactoring legacy UI patterns into a modern, headless architecture.
• It is highly effective for code reviews where you need to check for compliance with accessibility standards (WCAG) or state-delegation patterns (controlled vs. uncontrolled).
• The skill tracks common pitfalls in React component design, such as prop drilling or inefficient styling, providing specific examples of incorrect vs. correct code patterns.
• Expected inputs include component requirements, feature specifications, or existing codebase snippets. The agent will output refactored code, architectural advice, or validation reports based on the components.build ruleset.
• Always ensure your project environment supports Tailwind CSS and Radix UI primitives for full compatibility with these guidelines.