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:
- Typography – Typeface selection, font pairings, weights, sizing, and hierarchy
- Color & Theme – Emotional intent, color systems, and unexpected accents
- Motion – Orchestrated animations, easing, and interaction choreography
- Spatial Composition – Layout, spacing systems, and asymmetrical design
- 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
- Design Thinking – Answer purpose, tone, constraints, differentiation
- Typography – Select typefaces, weights, sizes, hierarchy
- Color & Theme – Define emotional intent, color system, accents
- Motion – Plan animations, easing, interaction sequences
- Spatial Composition – Design layouts, spacing scales, asymmetry
- Backgrounds & Details – Add subtle textures, gradients, micro-details
- Implementation – Follow your tech-specific sub-skill
- 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
- Pick your framework (React, Vue, Svelte, or HTML)
- Complete the design thinking checklist (
./sub-skills/design-thinking.md)
- Follow the 8-phase workflow (this document)
- Apply each dimension using the corresponding sub-skill
- Validate against the anti-patterns checklist
1---2name: frontend-design-273description: Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations4---5
6# Frontend Design Skill
7
8## Overview
9
10This orchestrator skill composes five design dimensions with tech-specific implementations to create distinctive, production-grade frontends that avoid generic AI design patterns.
11
12**The 5 Dimensions**:
13
141. **Typography** – Typeface selection, font pairings, weights, sizing, and hierarchy
152. **Color & Theme** – Emotional intent, color systems, and unexpected accents
163. **Motion** – Orchestrated animations, easing, and interaction choreography
174. **Spatial Composition** – Layout, spacing systems, and asymmetrical design
185. **Backgrounds & Details** – Subtle textures, gradients, and visual rewards
19
20**Tech Implementations** (choose one):
21
22- React with Vite and Framer Motion
23- Vue (Options API or Composition API)
24- Svelte with custom animations
25- HTML/CSS/SCSS fundamentals
26- Design system integrations (Tailwind, shadcn/ui, Radix, Material)
27
28---
29
30## Quick Navigation
31
32### "I need to create..." - "I want to focus on..."
33
34**Typography dimension**
35→ See `./sub-skills/typography.md`
36
37**Color & theme system**
38→ See `./sub-skills/color-theme.md`
39
40**Motion & animations**
41→ See `./sub-skills/motion.md`
42
43**Spatial layout & composition**
44→ See `./sub-skills/spatial.md`
45
46**Backgrounds & visual details**
47→ See `./sub-skills/backgrounds.md`
48
49**Design thinking checklist**
50→ See `./sub-skills/design-thinking.md`
51
52---
53
54## 8-Phase Workflow
55
561. **Design Thinking** – Answer purpose, tone, constraints, differentiation
572. **Typography** – Select typefaces, weights, sizes, hierarchy
583. **Color & Theme** – Define emotional intent, color system, accents
594. **Motion** – Plan animations, easing, interaction sequences
605. **Spatial Composition** – Design layouts, spacing scales, asymmetry
616. **Backgrounds & Details** – Add subtle textures, gradients, micro-details
627. **Implementation** – Follow your tech-specific sub-skill
638. **Validation** – Design review, accessibility, performance, mobile
64
65---
66
67## Anti-Patterns (Reject These)
68
69**Typography**
70
71- ❌ Inter, Roboto, Open Sans, Lato, system fonts
72- ❌ Mid-range weights only (400, 500, 600)
73- ❌ Incremental size scaling (48px → 40px → 32px)
74
75**Color**
76
77- ❌ Material Design trinity (Blue, Red, Green)
78- ❌ Pure grays without personality (#999, #CCC)
79- ❌ Oversaturated neon accents
80
81**Layout**
82
83- ❌ Everything centered (predictable, boring)
84- ❌ Uniform padding everywhere
85- ❌ "Default SaaS dashboard" aesthetic
86
87**Motion**
88
89- ❌ Linear timing on everything
90- ❌ No animation at all
91- ❌ Slow, sluggish transitions (2s+)
92
93---
94
95## Sub-Skills Reference
96
97| Sub-Skill | Purpose |
98|-----------|---------|
99| `typography` | Font selection, pairings, hierarchy, sizing |
100| `color-theme` | Color systems, emotional intent, accents |
101| `motion` | Animations, easing, orchestration, scroll triggers |
102| `spatial` | Layout systems, asymmetry, spacing scales |
103| `backgrounds` | Gradients, textures, micro-details, patterns |
104| `design-thinking` | Pre-design checklist and strategic thinking |
105
106---
107
108## Framework Sub-Skills Reference
109
110| Framework | Create New | Fix Existing |
111|-----------|-----------|--------------|
112| React + Vite | `frontend-design-react` | `frontend-design-fix-react` |
113| Vue | `frontend-design-vue` | `frontend-design-fix-vue` |
114| Svelte | `frontend-design-svelte` | `frontend-design-fix-svelte` |
115| HTML/CSS | `frontend-design-html` | `frontend-design-fix-html` |
116
117---
118
119## When to Use This Skill
120
121✅ Building a distinctive frontend that doesn't look AI-generated
122✅ Need guidance on typography, color, motion, and layout composition
123✅ Want to avoid generic design patterns and clichés
124✅ Implementing a design system with intentional principles
125✅ Creating multi-page apps with consistent design language
126
127---
128
129## Getting Started
130
1311. **Pick your framework** (React, Vue, Svelte, or HTML)
1322. **Complete the design thinking checklist** (`./sub-skills/design-thinking.md`)
1333. **Follow the 8-phase workflow** (this document)
1344. **Apply each dimension** using the corresponding sub-skill
1355. **Validate** against the anti-patterns checklist
diegosouzapw