🎨

Component Library Kickstarter

Generate a starter component library with consistent design tokens

prompt template
Create a starter component library for my project.

**Design vibe:** [DESCRIBE — e.g., "clean and minimal like Linear", "bold and playful like Vercel", "dark hacker aesthetic"]
**Colors:** [PRIMARY_COLOR or "you pick based on the vibe"]

Generate these foundational components (React + TypeScript + Tailwind):

1. **Button** — primary, secondary, ghost, destructive variants + sizes (sm, md, lg) + loading state
2. **Input** — text, email, password + label, placeholder, error state, helper text
3. **Card** — basic container with header, body, footer slots
4. **Badge** — for tags/status indicators, 6 color variants
5. **Modal/Dialog** — with overlay, close button, accessibility (focus trap, escape key)
6. **Toast/Notification** — success, error, warning, info + auto-dismiss

For each component:
- Fully typed props with JSDoc descriptions
- Keyboard accessible
- Composable (slots/children, not rigid templates)
- Demo usage example

Also generate:
- **Design tokens** file — colors, spacing, radii, shadows as CSS variables
- **Index file** — barrel export for clean imports
- **Usage guide** — markdown showing every variant

Keep the total under 500 lines. Lean > bloated.

How to Use This Prompt

  1. 1Copy the prompt template above
  2. 2Paste into claude
  3. 3Replace [bracketed placeholders] with your specific project details
  4. 4Iterate on the AI output to refine and customize the results