frontend-design skill

---
name: frontend-design
description: Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations
version: 2.0.0
architecture: modular-composable
tools: [Read, Write, Edit, Grep, Glob, Bash]
---

# Frontend Design Skill

## Overview

This orchestrator skill composes five design dimensions with tech-specific implementations to create distinctive, production-grade frontends that avoid generic AI design patterns.

**The 5 Dimensions**:

1. **Typography** – Typeface selection, font pairings, weights, sizing, and hierarchy
2. **Color & Theme** – Emotional intent, color systems, and unexpected accents
3. **Motion** – Orchestrated animations, easing, and interaction choreography
4. **Spatial Composition** – Layout, spacing systems, and asymmetrical design
5. **Backgrounds & Details** – Subtle textures, gradients, and visual rewards

**Tech Implementations** (choose one):

- React with Vite and Framer Motion
- Vue (Options API or Composition API)
- Svelte with custom animations
- HTML/CSS/SCSS fundamentals
- Design system integrations (Tailwind, shadcn/ui, Radix, Material)

---

## Quick Navigation

### "I need to create..." - "I want to focus on..."

**Typography dimension**
→ See `./sub-skills/typography.md`

**Color & theme system**
→ See `./sub-skills/color-theme.md`

**Motion & animations**
→ See `./sub-skills/motion.md`

**Spatial layout & composition**
→ See `./sub-skills/spatial.md`

**Backgrounds & visual details**
→ See `./sub-skills/backgrounds.md`

**Design thinking checklist**
→ See `./sub-skills/design-thinking.md`

---

## 8-Phase Workflow

1. **Design Thinking** – Answer purpose, tone, constraints, differentiation
2. **Typography** – Select typefaces, weights, sizes, hierarchy
3. **Color & Theme** – Define emotional intent, color system, accents
4. **Motion** – Plan animations, easing, interaction sequences
5. **Spatial Composition** – Design layouts, spacing scales, asymmetry
6. **Backgrounds & Details** – Add subtle textures, gradients, micro-details
7. **Implementation** – Follow your tech-specific sub-skill
8. **Validation** – Design review, accessibility, performance, mobile

---

## Anti-Patterns (Reject These)

**Typography**

- ❌ Inter, Roboto, Open Sans, Lato, system fonts
- ❌ Mid-range weights only (400, 500, 600)
- ❌ Incremental size scaling (48px → 40px → 32px)

**Color**

- ❌ Material Design trinity (Blue, Red, Green)
- ❌ Pure grays without personality (#999, #CCC)
- ❌ Oversaturated neon accents

**Layout**

- ❌ Everything centered (predictable, boring)
- ❌ Uniform padding everywhere
- ❌ "Default SaaS dashboard" aesthetic

**Motion**

- ❌ Linear timing on everything
- ❌ No animation at all
- ❌ Slow, sluggish transitions (2s+)

---

## Sub-Skills Reference

| Sub-Skill | Purpose |
|-----------|---------|
| `typography` | Font selection, pairings, hierarchy, sizing |
| `color-theme` | Color systems, emotional intent, accents |
| `motion` | Animations, easing, orchestration, scroll triggers |
| `spatial` | Layout systems, asymmetry, spacing scales |
| `backgrounds` | Gradients, textures, micro-details, patterns |
| `design-thinking` | Pre-design checklist and strategic thinking |

---

## Framework Sub-Skills Reference

| Framework | Create New | Fix Existing |
|-----------|-----------|--------------|
| React + Vite | `frontend-design-react` | `frontend-design-fix-react` |
| Vue | `frontend-design-vue` | `frontend-design-fix-vue` |
| Svelte | `frontend-design-svelte` | `frontend-design-fix-svelte` |
| HTML/CSS | `frontend-design-html` | `frontend-design-fix-html` |

---

## When to Use This Skill

✅ Building a distinctive frontend that doesn't look AI-generated
✅ Need guidance on typography, color, motion, and layout composition
✅ Want to avoid generic design patterns and clichés
✅ Implementing a design system with intentional principles
✅ Creating multi-page apps with consistent design language

---

## Getting Started

1. **Pick your framework** (React, Vue, Svelte, or HTML)
2. **Complete the design thinking checklist** (`./sub-skills/design-thinking.md`)
3. **Follow the 8-phase workflow** (this document)
4. **Apply each dimension** using the corresponding sub-skill
5. **Validate** against the anti-patterns checklist