building-ui-components
Installation
SKILL.md
Building UI Components
1. Component Library: shadcn/ui
- Copy-paste model: components live in
src/components/ui/, you own the code - Built on Radix UI primitives (accessible, composable)
- Styled with Tailwind CSS + CVA (class-variance-authority) for variants
- Add components:
npx shadcn@latest add button - Customize freely — these are YOUR components, not a dependency
2. Component Organization
| Location | Purpose | Examples |
|---|---|---|
src/components/ui/ |
shadcn/ui primitives | Button, Card, Dialog, Input |
src/components/layout/ |
App shell, navigation | Header, Sidebar, PageContainer |
src/mfes/{domain}/components/ |
Feature-specific | ProductCard, OrderTable |
src/app/ |
Route components | page.tsx, layout.tsx |