component-scaffold

Name: component-scaffold
Author: zakelfassi

17stars0forks

How to install component-scaffold?

zakelfassi/skills-driven-development/component-scaffold

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Component Scaffold
2
3	Create a new React component following project conventions.
4
5	## Inputs
6	- Component name (PascalCase, e.g., `UserCard`)
7	- Component type: `page` \| `feature` \| `ui`
8	- Props (optional: list of prop names + types)
9
10	## Steps
11
12	1. Determine the directory
13	- `page` → `src/pages/{ComponentName}/`
14	- `feature` → `src/features/{feature-area}/components/{ComponentName}/`
15	- `ui` → `src/components/ui/{ComponentName}/`
16
17	2. Create the component file
18	```
19	{dir}/{ComponentName}.tsx
20	```
21	- Functional component with TypeScript props interface
22	- Export as named export (not default)
23
24	3. Create the test file
25	```
26	{dir}/{ComponentName}.test.tsx
27	```
28	- Import from Vitest + Testing Library
29	- At minimum: renders without crashing + snapshot
30
31	4. Create the story file
32	```
33	{dir}/{ComponentName}.stories.tsx
34	```
35	- Default story + one variant per significant prop
36
37	5. Create the barrel export
38	```
39	{dir}/index.ts
40	```
41	- Re-export the component
42
43	## Conventions
44	- All components are functional (no class components)
45	- Props interfaces are named `{ComponentName}Props`
46	- Co-locate everything: component, test, story, styles in one directory
47	- Use Tailwind for styling (no CSS modules — see archived skill `css-module-setup`)
48
49	## Edge Cases
50	- Component already exists: Do not overwrite. Ask the user if they want to update or rename.
51	- Nested feature components: Use the feature area as a parent directory (e.g., `features/auth/components/LoginForm/`)

People who liked this also viewed

6 picks

Type

component-scaffold

17stars0forks

View on GitHub

How to install component-scaffold?

zakelfassi/skills-driven-development/component-scaffold

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Component Scaffold
2
3	Create a new React component following project conventions.
4
5	## Inputs
6	- Component name (PascalCase, e.g., `UserCard`)
7	- Component type: `page` \| `feature` \| `ui`
8	- Props (optional: list of prop names + types)
9
10	## Steps
11
12	1. Determine the directory
13	- `page` → `src/pages/{ComponentName}/`
14	- `feature` → `src/features/{feature-area}/components/{ComponentName}/`
15	- `ui` → `src/components/ui/{ComponentName}/`
16
17	2. Create the component file
18	```
19	{dir}/{ComponentName}.tsx
20	```
21	- Functional component with TypeScript props interface
22	- Export as named export (not default)
23
24	3. Create the test file
25	```
26	{dir}/{ComponentName}.test.tsx
27	```
28	- Import from Vitest + Testing Library
29	- At minimum: renders without crashing + snapshot
30
31	4. Create the story file
32	```
33	{dir}/{ComponentName}.stories.tsx
34	```
35	- Default story + one variant per significant prop
36
37	5. Create the barrel export
38	```
39	{dir}/index.ts
40	```
41	- Re-export the component
42
43	## Conventions
44	- All components are functional (no class components)
45	- Props interfaces are named `{ComponentName}Props`
46	- Co-locate everything: component, test, story, styles in one directory
47	- Use Tailwind for styling (no CSS modules — see archived skill `css-module-setup`)
48
49	## Edge Cases
50	- Component already exists: Do not overwrite. Ask the user if they want to update or rename.
51	- Nested feature components: Use the feature area as a parent directory (e.g., `features/auth/components/LoginForm/`)

People who liked this also viewed

6 picks

Type