Component scaffold

Skill zakelfassi/skills-driven-development/examples/webapp-starter/skills/component-scaffold

Create a new React component with co-located test, story, and styles. Use when creating new UI components, when asked to scaffold/generate a component, or when building new pages.From its SKILL.md

Install

npx -y skills add zakelfassi/skills-driven-development --skill component-scaffold

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

17 stars17 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.9 KB, 375 tokens by cl100k_base, as published. Nobody here has run it

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/)

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.