Create and enforce reusable React component APIs with state coverage.
npx skills add https://github.com/olzn/system-craft --skill component-craft
Please help me install this Agent Skill. Skill: component-craft Source: https://github.com/olzn/system-craft/tree/main/component-craft Command: npx skills add https://github.com/olzn/system-craft --skill component-craft
Enables teams to build and maintain reusable UI components with consistent APIs and complete state coverage, reducing API drift and improving cross-project maintainability.
Define a new component's API and variants following the component-craft guidelines, ensuring forwardRef, render delegation, and solid state coverage.
High-intent search queries and answers about installing and using this skill.
To build reusable React UI components, establish consistent prop conventions, CVA-based variant systems, and render delegation patterns. This approach ensures complete state coverage and improves cross-project maintainability by enforcing configuration versus composition decisions.
Implementing a CVA variant system requires defining variant properties and their valid states within your component props. This ensures scalable component APIs by standardizing visual states and enforcing consistent styling configurations across your design system.
forwardRef and render delegation enable accessible component APIs by allowing DOM ref forwarding and custom render logic via patterns like asChild. This ensures composability and proper focus management when integrating with libraries like Radix and shadcn/ui.
Yes, compound component patterns help decide between configuration and composition by structuring related UI elements as nested sub-components. This enforces complete state coverage and prevents API drift while maintaining flexible layout composition.
You need an API consistency review when creating new components or evaluating existing ones to prevent API drift. This review verifies prop naming conventions, forwardRef usage, and icon-system guidelines to ensure cross-project maintainability.
Yes, this approach explicitly aligns with Base UI and shadcn/ui component guidelines. It enforces icon-system conventions, forwardRef, and render delegation patterns to satisfy the accessibility and composability standards set by these libraries.
JosiahSiegelProvide TypeScript patterns for React component props, events, hooks, and generics.
froide-kkProvide UI component design guidelines for accessible, responsive interfaces.
locnbk2002Style React interfaces with shadcn/ui components and Tailwind CSS.
kangmominGenerate React component boilerplates from .hyeondong-config.json with tests and Storybook.
