What happens if the component already exists?

Do not overwrite; prompt for update or rename.

How are props and styling defined?

Props interface is named {ComponentName}Props and styling uses Tailwind (no CSS modules).

Where are the test and story files located?

In the same directory as the component, co-located with the component and its styles.

component-scaffold

npx machina-cli add skill zakelfassi/skills-driven-development/component-scaffold --openclaw

Files (1)

SKILL.md

1.9 KB

Component Scaffold

Create a new React component following project conventions.

Inputs

Component name (PascalCase, e.g., UserCard)
Component type: page | feature | ui
Props (optional: list of prop names + types)

Steps

Determine the directory
- page → src/pages/{ComponentName}/
- feature → src/features/{feature-area}/components/{ComponentName}/
- ui → src/components/ui/{ComponentName}/
Create the component file
```
{dir}/{ComponentName}.tsx
```
- Functional component with TypeScript props interface
- Export as named export (not default)
Create the test file
```
{dir}/{ComponentName}.test.tsx
```
- Import from Vitest + Testing Library
- At minimum: renders without crashing + snapshot
Create the story file
```
{dir}/{ComponentName}.stories.tsx
```
- Default story + one variant per significant prop
Create the barrel export
```
{dir}/index.ts
```
- Re-export the component

Conventions

All components are functional (no class components)
Props interfaces are named {ComponentName}Props
Co-locate everything: component, test, story, styles in one directory
Use Tailwind for styling (no CSS modules — see archived skill css-module-setup)

Edge Cases

Component already exists: Do not overwrite. Ask the user if they want to update or rename.
Nested feature components: Use the feature area as a parent directory (e.g., features/auth/components/LoginForm/)

Source

git clone https://github.com/zakelfassi/skills-driven-development/blob/main/examples/webapp-starter/skills/component-scaffold/SKILL.md

View on GitHub

Overview

Creates a new React component following project conventions, placing the component, tests, stories, and styles in a single directory. It enforces PascalCase naming, a Props interface named {ComponentName}Props, and Tailwind styling per conventions.

How This Skill Works

Based on the component type (page, feature, or ui), it determines the target directory and creates the main component file with a named export. It also generates the test file, story file, and a barrel export in the same directory, using a {ComponentName}Props interface and Tailwind for styling, with all artifacts co-located.

When to Use It

Creating a new UI component with tests, story, and styles co-located
Asked to scaffold or generate a component for reuse across pages or features
Building a new page that follows the standard {ComponentName} directory structure
Standardizing component scaffolding to maintain project conventions
Setting up a reusable component with accompanying test and story for design reviews

Quick Start

Step 1: Determine the directory based on Component type (page -> src/pages/{ComponentName}, feature -> src/features/{feature-area}/components/{ComponentName}, ui -> src/components/ui/{ComponentName}).
Step 2: Create the component file {dir}/{ComponentName}.tsx with a functional TS component and a named export.
Step 3: Add {dir}/{ComponentName}.test.tsx, {dir}/{ComponentName}.stories.tsx, and {dir}/index.ts to co-locate tests, stories, and barrel export

Best Practices

Use PascalCase for the ComponentName and name the props interface {ComponentName}Props
Co-locate component, test, story, and styles in a single directory
Export the component as a named export (not default)
Use Tailwind for styling; avoid CSS modules
If the component already exists, do not overwrite—prompt for update or rename

Example Use Cases

src/components/ui/UserCard/UserCard.tsx (UI component with test, story, and styles in one folder)
src/features/auth/components/LoginForm/LoginForm.tsx (feature component with co-located artifacts)
src/pages/Home/Home.tsx (page component with tests and stories colocated)
src/features/catalog/components/ProductCard/ProductCard.tsx (co-located test, story, and styles)
src/features/dashboard/components/DashboardHeader/DashboardHeader.tsx (consistent scaffolding within a feature)

Frequently Asked Questions

Add this skill to your agents