React Component Scaffold
Generates a complete React component with TypeScript types, tests, and a Storybook story file.
SKILL.md
---
description: Scaffold a new React component with types, tests, and story
allowed-tools: Write, Bash(ls), Bash(cat *), Read
---
# Create React Component
Scaffold a new React component following the project's established conventions.
## Arguments
- `$ARGUMENTS` — the component name in PascalCase (e.g. `UserAvatar`)
## Steps
1. Inspect the existing component structure by listing `src/components/` to understand the naming and file organization conventions.
2. Read one existing component to identify patterns (barrel exports, style approach, prop interface naming).
3. Create the following files:
### `src/components/$ARGUMENTS/$ARGUMENTS.tsx`
- Define a `${ARGUMENTS}Props` interface with sensible default props.
- Export a named function component (not default export).
- Use `className` prop with `cn()` utility if the project uses it.
- Include JSDoc comment on the component.
### `src/components/$ARGUMENTS/$ARGUMENTS.test.tsx`
- Import from `@testing-library/react`.
- Include tests for: default render, prop variations, accessibility (role/aria).
- Use `describe`/`it` pattern.
### `src/components/$ARGUMENTS/$ARGUMENTS.stories.tsx`
- Use Component Story Format 3 (CSF3).
- Export a `Default` story and at least two variant stories.
- Include `argTypes` for interactive controls.
### `src/components/$ARGUMENTS/index.ts`
- Barrel export: `export { $ARGUMENTS } from './$ARGUMENTS';`
- Re-export props: `export type { ${ARGUMENTS}Props } from './$ARGUMENTS';`
## Rules
- Match the project's existing code style exactly — check for semicolons, quotes, trailing commas.
- Do not install new dependencies.
- If the project uses CSS Modules, create a `.module.css` file. If it uses Tailwind, use utility classes.
- Use semantic HTML elements where appropriate (`<button>`, `<nav>`, not just `<div>`).How It Works
This skill demonstrates the power of reading existing code before generating new code. By instructing the agent to first inspect the component directory and read an existing component, the generated code will match the project's actual conventions rather than following generic best practices.
The multi-file output pattern is common in scaffold skills. Each file has clear specifications but leaves room for the agent to adapt based on what it discovers about the project. For example, the style approach (CSS Modules vs. Tailwind) is determined dynamically rather than hardcoded.
The barrel export pattern ensures the new component integrates cleanly with the rest of the codebase. The skill also avoids a common pitfall of AI-generated code — installing new dependencies — by explicitly forbidding it.