🧩Skill only
Component generator
Scaffolds React components matching the project's style guide, stored in references/.
- Surfaces
- skill
- Complexity
- intermediate
- Trigger
- natural
- Est. tokens
- 4,200
What It Does
Scaffolds a new React component that matches your project's design system. The skill reads a style guide stored in references/style-guide.md, uses an existing component as a structural template, and produces typed props plus Tailwind classes from your token palette.
When It Triggers
- ▸"Create a Button component"
- ▸"Scaffold a Card with an icon slot"
- ▸"Build a new form input component"
SKILL.md
markdown
---
name: component-generator
description: Creates React components that match the project's style guide. Use when user asks to "create a component", "scaffold a UI element", or "build a new [Button/Card/Form]".
---
# Component Generator
## Steps
1. Consult `references/style-guide.md` for tokens (colors, spacing, typography)
2. Read one existing component as a structural template
3. Generate the new component with:
- Matching import order and file layout
- Typed props (no `any`)
- Tailwind classes from the token palette
4. Add matching test file if the project has them
references/style-guide.md
markdown
# Style Guide
## Tokens
- Colors: use CSS variables from globals.css, never hex
- Spacing: Tailwind 4-point scale (`p-4`, `gap-6`)
- Typography: Space Grotesk for UI, JetBrains Mono for code
## Rules
- No inline styles
- No class-name concatenation outside `clsx`/`cn`
- All components forward `className` for composition
Adapting It
- ▸Swap the style guide for your own design tokens.
- ▸Add an `examples/` folder with reference components to strengthen in-context learning.
- ▸If you use CSS Modules or styled-components, edit step 3 of the SKILL.md accordingly.