react-component-architect_skill

Overview

This skill scaffolds production-ready React and Next.js components with TypeScript, CSS modules, tests, and Storybook stories. It produces a consistent folder and file layout, exports types and components, and includes common patterns like forwardRef and barrel exports. Use it to quickly generate dependable component boilerplate that fits your project's conventions.

How this skill works

The skill asks for the component name, target location, and type (presentational, container, layout, or page). It detects project conventions for styling, test framework, Storybook, and barrel exports, then generates a TypeScript component file, CSS module, test file, Storybook CSF3 story, and index export. It applies design-token friendly CSS, exports prop interfaces with JSDoc, and offers patterns such as forwardRef, polymorphic props, and compound components.

When to use it

• You need a new React or Next.js component scaffolded with TypeScript and tests.
• You want a component created following existing project conventions (CSS Modules, styled components, Tailwind).
• You need Storybook stories and visual documentation for a component.
• You want fully typed prop interfaces and optional forwardRef or polymorphic patterns.
• You want barrel exports updated and consistent project structure.

Best practices

• Provide the component name in PascalCase and the desired folder (e.g., src/components/MyComponent).
• Confirm the styling approach (CSS Modules, styled components, or Tailwind) so generated styles match the project.
• Export the props interface and keep JSDoc comments for editor hints and docs.
• Include both unit tests (Testing Library + Vitest/Jest) and a Storybook story for visual QA.
• Validate TypeScript, tests, and Storybook render before committing the scaffolded files.

Example use cases

• Create a reusable Button component with variant props, CSS module, tests, and a Storybook story.
• Scaffold a Card compound component with Header and Body subcomponents and a barrel export.
• Generate a Next.js client component with TypeScript props and a matching .module.css file.
• Add a polymorphic Box component that accepts an as prop and exported types for library consumers.
• Produce a form Field component with accessible defaults, tests for interactions, and Storybook examples.