React Component Scaffolder

Version: 1.0 Added: Jan 21, 2026

Description

Generates React components with proper structure including TypeScript types, props interface, hooks, styles, and tests. Follows best practices and project conventions.

Code

Skill Code

Component includes:
1. TypeScript interface "keyword">for props
2. Functional component with hooks
3. CSS module or styled-components
4. Unit test file
5. Storybook story (optional)
6. Index export file

Usage Examples

Examples

User: create a Button component

Claude: *creates files*
- components/Button/Button.tsx
- components/Button/Button.module.css
- components/Button/Button.test.tsx
- components/Button/index.ts

```tsx
interface ButtonProps {
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";
  onClick?: () => void;
  children: React.ReactNode;
}
```

Installation

Add the following to your CLAUDE.md file (project root or ~/.claude/CLAUDE.md for global):

CLAUDE.md

# React Component Scaffolder

Component includes:
1. TypeScript interface for props
2. Functional component with hooks
3. CSS module or styled-components
4. Unit test file
5. Storybook story (optional)
6. Index export file

Comments (0)

No comments yet. Be the first to share your thoughts!