scaffolding-react-components

Generate React/Next.js component scaffolds with TypeScript, CSS modules, tests, and Storybook.

6|2|Updated Jan 18, 2026

Search Tags:#typescript #react #scaffold #storybook #css-modules #frontend-tooling #component-boilerplate

Ready to run

npx skills add https://github.com/WesleySmits/agent-skills --skill scaffolding-react-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: scaffolding-react-components
Source: https://github.com/WesleySmits/agent-skills/tree/main/.agent/skills/react-component-architect
Command: npx skills add https://github.com/WesleySmits/agent-skills --skill scaffolding-react-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds React/Next.js components with TypeScript, CSS modules, tests, and Storybook.

Core Features & Use Cases

Automatically generate a TypeScript React component scaffold with TS props typing, CSS module file, test placeholder, and Storybook story.
Aligns with project conventions (src/components, app/components) and export patterns for barrel files.
Use case: When starting a new component named Button, generate directory with Button.tsx, Button.module.css, Button.test.tsx, Button.stories.tsx, and index.ts.

Quick Start

Ask for a component name and project path to generate a complete React component scaffold.

Frequently Asked Questions about scaffolding-react-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a React component with TypeScript, CSS modules, tests, and Storybook?▼

To scaffold a React component with TypeScript and CSS modules, you provide a component name and project path. The tool then generates a complete directory containing the TSX component, CSS module, test placeholder, and Storybook story.

What files are included when scaffolding a new React component?▼

Scaffolding a React component creates a directory with five files: the main TypeScript component file, a CSS module for scoped styles, a test file placeholder, a Storybook story, and an index.ts file for barrel exports.

Does this component scaffolding tool work with Next.js project structures?▼

Yes, this component scaffolding supports Next.js projects by respecting common project layouts. It automatically detects and aligns with your directory conventions, such as placing files in src/components or app/components.

What is the best way to automate React component boilerplate creation?▼

Automating React component boilerplate creation is best handled by a scaffolding tool that generates consistent file structures. This approach ensures every component includes TypeScript typing, CSS modules, tests, and Storybook stories automatically.

Can I use this scaffolder to generate barrel exports for my React components?▼

Yes, you can use this scaffolder to generate barrel exports for React components. It creates an index.ts file within the component directory, conforming to standard barrel-export patterns for cleaner project imports.

Why should I use a scaffolding tool instead of manually creating React component files?▼

Using a scaffolding tool instead of manually creating React component files ensures project-wide consistency and saves time. It automatically applies your TypeScript, CSS modules, testing, and Storybook conventions without missing boilerplate files.