# Design Frontend

> 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".

- Skill: `kensaurus/design-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kensaurus/design-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kensaurus/design-frontend/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: kensaurus (https://skillmd.com/u/kensaurus)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/kensaurus/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, 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.