---
paths:
  - "ui/**"
---

## Design System Rules

**Stack:** React + Tailwind CSS + shadcn/ui. No exceptions.

**Use the `/frontend-design` skill** for all component design and layout decisions.

### Mandatory
- All styling via Tailwind utility classes
- Use shadcn/ui components from `@/components/ui/` — run `npx shadcn@latest add <component>` to install new ones
- Use semantic color tokens: `bg-background`, `text-foreground`, `bg-card`, `text-muted-foreground`, `border-border`, etc.
- Use theme spacing: Tailwind's default scale (p-2, p-3, p-4, gap-2, etc.)
- Mobile-first: base classes for mobile, `md:` for desktop overrides
- Touch targets: min 44px on mobile (`min-h-[44px] min-w-[44px]`)
- Use `cn()` from `@/lib/utils` for conditional classes

### Forbidden
- No `style={}` JSX props
- No `<style>` tags
- No `.css` files (except index.css theme config)
- No arbitrary color values like `bg-[#xxx]` or `bg-[oklch(...)]` — use semantic tokens or CSS variables via `bg-[var(--color-name)]`
- No raw HTML elements when a shadcn component exists (use `<Button>` not `<button>`, `<Input>` not `<input>`)

### Color Palette
| Token | Use for |
|-------|---------|
| `bg-background` / `text-foreground` | Main content |
| `bg-card` / `text-card-foreground` | Elevated surfaces |
| `bg-muted` / `text-muted-foreground` | Subdued content |
| `bg-primary` / `text-primary-foreground` | Primary actions |
| `border-border` | All borders |
| `text-emerald-500` | Result/success |
| `text-red-500` / `text-red-400` | Errors |
| `text-blue-500` / `text-blue-400` | Plans, agent accent |
| `text-amber-500` | Code |

### Adding shadcn components
```bash
cd ui/colony && npx shadcn@latest add <component-name>
```