scaffold

name	scaffold
description	Generate component boilerplate following project conventions. Supports React and Vue with TypeScript, tests, and stories.

Scaffold Component

Generate a new component with all supporting files, following project conventions from the style guide.

When to Use

Use this skill when:

• Creating a new UI component (React or Vue)
• Adding a new page or layout
• Bootstrapping a new feature module

Instructions

1. Read the style guide at ../../_references/style-guide.md to understand naming conventions, file structure, and TypeScript patterns.

2. Ask for inputs (if not provided):

   • name: Component name in PascalCase (e.g., UserProfileCard)
   • framework: react or vue (default: detect from project)
   • type: component | page | layout (default: component)
   • withTests: boolean (default: true)
   • withStories: boolean (default: true)

3. Detect the framework if not specified:

   • Check for react or vue in package.json dependencies
   • Check for existing .tsx (React) or .vue (Vue) files

4. Generate files based on framework:

React Output

src/components/{name}/
├── {name}.tsx           # Component implementation
├── {name}.test.tsx      # Unit tests with Testing Library
├── {name}.stories.tsx   # Storybook stories
├── {name}.module.css    # CSS module (if using CSS modules)
└── index.ts             # Barrel export

Vue Output

src/components/{name}/
├── {name}.vue           # SFC with <script setup lang="ts">
├── {name}.test.ts       # Unit tests with Vitest
├── {name}.stories.ts    # Storybook stories
└── index.ts             # Barrel export

5. Follow these rules:

   • All components must be typed with TypeScript — no any types
   • Props interface must be exported and named {name}Props
   • Use forwardRef for React components that render DOM elements
   • Use defineProps with type-only syntax for Vue components
   • Tests must include: render test, props test, and interaction test
   • Stories must include: Default, WithProps variants, and Interactive
   • Barrel export must use named exports, never default exports

6. After generation, run:

   • npx tsc --noEmit to verify types
   • npx vitest run {name} or npx jest {name} to verify tests pass

Example Usage

Scaffold a React component called DataTable with tests and stories

Create a Vue page component called DashboardView without stories