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