Tailwind + Design System Skill

````instructions
# Tailwind + Design System Skill

## When to Use
Use when styling components, adding new UI elements, or working with the Agentic Library design system.

## Rules

1. **Utility-first** — compose styles with Tailwind classes, avoid custom CSS
2. **Use design tokens** — `treasury-*` for primary (indigo), `accent-*` for accent (emerald)
3. **CSS variables for theme** — `var(--primary)`, `var(--background)`, `var(--foreground)`, etc.
4. **Mobile-first responsive** — base styles then `sm:`, `md:`, `lg:`, `xl:` breakpoints
5. **Dark mode via `dark:` prefix** — always add dark mode variants
6. **Card pattern** — use `.treasury-card` class for consistent card styling

## Color Reference

| Token | Light | Dark | Usage |
|-------|-------|------|-------|
| `treasury-500` | #6366F1 | — | Primary actions, links, accents |
| `accent-500` | #10B981 | — | Secondary accents, success states |
| `var(--background)` | #fafafa | #020617 | Page background |
| `var(--card)` | white | #0f172a | Card backgrounds |
| `var(--border)` | slate-200 | slate-800 | Borders |
| `var(--muted-foreground)` | slate-500 | slate-400 | Secondary text |

## Patterns

### Card Component
```tsx
<div className="treasury-card p-6 hover:border-treasury-300 dark:hover:border-treasury-700 transition-all">
  <h3 className="font-semibold text-lg group-hover:text-treasury-500 transition-colors">
    Title
  </h3>
  <p className="text-sm text-[var(--muted-foreground)] mt-1">Description</p>
</div>
```

### Badge
```tsx
<span className="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium text-indigo-600 bg-indigo-50 border-indigo-200 dark:text-indigo-400 dark:bg-indigo-950 dark:border-indigo-800">
  <Icon className="h-3 w-3" />
  Label
</span>
```

### Solid Background Section
```tsx
<div className="treasury-solid-bg px-6 py-12 text-center rounded-2xl">
  <h2 className="text-2xl font-bold text-white">Heading</h2>
  <p className="text-white/80">Subtitle</p>
</div>
```

### Stack Chip (for tech stack filters)
```tsx
<button className="stack-chip stack-chip--active">
  <SiTypescript className="h-3.5 w-3.5" /> TypeScript
</button>
```

## Anti-Patterns

### Don't hardcode colors
```tsx
// BAD
<div className="text-[#6366F1]">Text</div>

// GOOD
<div className="text-treasury-500">Text</div>
```

### Don't skip dark mode
```tsx
// BAD — only light mode
<div className="bg-white border-slate-200">

// GOOD — both modes
<div className="bg-[var(--card)] border-[var(--border)]">
```

## Checklist
- [ ] Uses treasury-* / accent-* color tokens
- [ ] Dark mode variants included
- [ ] Responsive breakpoints (mobile-first)
- [ ] Consistent spacing (p-4, p-5, p-6 for cards)
- [ ] Transitions on interactive elements

````