design-frontend

# 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, ...