What problem does it solve? Manually scaffolding React or Next.js components means repeatedly writing the same boilerplate: props interfaces, test files, style modules, and barrel exports. This Skill automates that scaffolding so every component follows consistent naming, typing, testing, and styling conventions from the start. ## Core Features & Use Cases - Component Generation: Creates TypeScript component files from templates for simple, hooks-based, and container components, plus Next.js App Router variants (page, layout, server, and client components) with Next.js 15+ conventions baked in. - Test and Style Scaffolding: Generates React Testing Library test files and CSS Modules, styled-components, or Tailwind styling, plus a barrel export (index.ts) for clean imports. - Validation and Knowledge Reuse: Validates PascalCase naming against reserved words, queries a project knowledge graph for existing patterns and decisions, and emits an execution summary so future runs reuse what was learned. - Use Case: Ask for a new UserProfile component and receive a complete src/components/UserProfile/ directory containing the component, tests, styles, and exports, ready to import and customize. ## Quick Start Ask the AI to create a new React component named UserProfile with a userId string prop and an optional onUpdate callback, including tests and CSS module styles.
