Component Scaffold Generator

Generate production-ready component skeletons with types, variants, tests, and documentation.

Core Workflow

1. Gather requirements: Component name, framework (React/Vue), props needed
2. Choose pattern: Determine if functional, compound, or polymorphic component
3. Generate component: Create main component file with TypeScript types
4. Add variants: Include common variants (size, color, state)
5. Setup styling: Add styling approach (Tailwind, CSS Modules, styled-components)
6. Create tests: Generate test file with basic coverage
7. Add story: Create Storybook story with examples
8. Document usage: Include JSDoc and usage examples

Component Patterns

Basic Functional Component (React)