component-generator

Scaffolding generates a new React component with pre-built file structure, styled variants, and design system patterns already in place. This Skill creates the foundational files under a standardized directory structure so you can immediately begin implementing component logic instead of setting up boilerplate manually.

Base-joy components require a specific directory structure under libs/ui/styled/src/ComponentName, CVA-based variant patterns with color and size contexts, proper exports, TypeScript definitions, tests, and documentation. This Skill enforces those patterns automatically, ensuring every new component adheres to design system conventions from creation.

Yes. This Skill generates components following established base-joy design patterns, including ColorContext integration and JSDoc defaults for props. It ensures new components align with your design system's theming and color conventions immediately, with no manual pattern recall required.

Manual component creation requires recalling intricate pattern details and setting up multiple files with correct structure. Automation eliminates repetitive setup work, reducing errors and freeing development time for component logic and features rather than boilerplate.

Manual creation risks inconsistency with design system patterns, incorrect file structure, and missing required exports or documentation. Scaffolding prevents these errors by generating standards-compliant components automatically, ensuring consistency across your component library.