design-frontend git:20260817.5b93a21A

Immutable. This exact content never changes and is served at /api/v1/blob/eb0a08e19298d504.

---
name: design-frontend
description: >
  Create distinctive, production-grade frontend interfaces that avoid generic AI
  aesthetics. Use when the user says "build this UI", "design this page", "make it look
  good", "dashboard layout", "beautify this", or "make the UI feel premium".
license: MIT
---

# Frontend Design Skill

> Discover design systems, respect existing patterns, create beautiful interfaces.

---

## Phase 1: Design System Discovery (MANDATORY)

**Before writing ANY frontend code:**

### 1.1 Find Design System Files
```
Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*
```

### 1.2 Extract & Document Tokens
| Category | Find | Examples |
|----------|------|----------|
| Typography | Sizes, weights | `text-xs`, `font-medium` |
| Spacing | Padding, gaps | `p-4`, `gap-2` |
| Colors | Palette, semantic | `bg-emerald-50` |
| Borders | Radius, styles | `rounded-sm` |
| Animations | Durations | `duration-200` |

### 1.3 Find Forbidden Patterns
```bash
grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*
```

### 1.4 Verification Statement (REQUIRED)
```
"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"
```

---

## Phase 2: Implementation Standards

### Typography Minimums
| Context | Minimum | Usage |
|---------|---------|-------|
| Body | `text-sm` (14px) | Primary content |
| Captions | `text-xs` (12px) | Labels, hints |
| Compact | `text-[10px]` | Dense dashboards only |

**Never use** `text-[8px]` or `text-[9px]` for readable content.

### Accessibility Requirements
| Check | Requirement |
|-------|-------------|
| Touch targets | ≥44×44px |
| Contrast | 4.5:1 text, 3:1 UI |
| Keyboard | `tabIndex`, focus styles |
| Motion | `prefers-reduced-motion` |

### Quick Reference
```
Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px
```

---

## Phase 3: Quality Checklist

```
[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected
```

### Common Fixes
| Issue | Fix |
|-------|-----|
| Tiny text | `text-[9px]` → `text-xs` |
| Bold weights | `font-bold` → `font-medium` |
| Large radius | `rounded-lg` → `rounded-sm` |
| Spin animation | `animate-spin` → `animate-pulse` |

---

## Anti-Generic Checklist

Avoid these AI clichés:
- [ ] Inter/Roboto/Arial fonts
- [ ] Purple gradients on white
- [ ] Cookie-cutter card layouts
- [ ] Same choices every generation

---

> **Remember:** The codebase's design system is the source of truth. Search before creating. Reuse before reinventing.