Frontend Design Fix Skill

Overview

This orchestrator skill diagnoses generic design patterns and applies targeted aesthetic upgrades across five design dimensions. Fixes are tech-agnostic (principles) but reference framework-specific implementation skills.

The 5 Dimensions:

Typography – Replace generic fonts, fix weight hierarchies, aggressive size jumps
Color & Theme – Remove predictable palettes, introduce CSS variables, add dominant + accent strategy
Motion – Add orchestrated page loads, staggered reveals, hover surprises
Spatial Composition – Break centered layouts, introduce asymmetry, adjust spacing strategy
Backgrounds & Details – Layer gradients, add geometric patterns, create atmospheric depth

Quick Diagnosis

"What's wrong with my design?"

It looks like a template → See

./sub-skills/audit.md

Font choices feel default → See

./sub-skills/typography-fixes.md

Color palette is predictable → See

./sub-skills/color-fixes.md

Everything's static and boring → See

./sub-skills/motion-fixes.md

Layout is centered and uniform → See

./sub-skills/spatial-fixes.md

Backgrounds are flat/plain → See

./sub-skills/background-fixes.md

5-Phase Fix Process

Phase 1: Audit

Identify generic elements, score anti-patterns, assess brand context → See

./sub-skills/audit.md

Phase 2: Assess Brand & Context

Understand emotional intent, target audience, competitive differentiation

Phase 3: Apply Dimension-Based Fixes

Typography fixes (typeface, weights, size jumps)
Color fixes (palette strategy, CSS variables, accents)
Motion fixes (orchestration, scroll triggers, hover)
Spatial fixes (asymmetry, overlap, diagonal flow)
Background fixes (gradients, patterns, depth)

→ See specific sub-skills below

Phase 4: Validate Improvements

Visual hierarchy strengthened?
Brand personality evident?
Accessibility maintained (WCAG AA+)?
Performance acceptable?

Phase 5: Generate Before/After Report

Document improvements, measure impact, establish design guidelines

Anti-Pattern Detection Checklist

Typography

Using Inter, Roboto, Open Sans, Lato, or system fonts
Font weights in safe middle range (400, 500, 600 only)
Size progression is linear/minimal (1.25–1.5x scale)

Color

Material Design trinity (Blue, Red, Green)
Oversaturated neon accents
No color strategy document or CSS variable structure

Layout

Everything is centered (hero, cards, sections)
Uniform padding/margins everywhere
Symmetric, grid-based composition only

Motion

No animations at all
Linear timing on all transitions
Slow, sluggish animations (2s+)

Background

Flat solid colors throughout
No visual depth or layering
No contextual details or micro-patterns

Sub-Skills Reference

Sub-Skill	Purpose	Lines
`audit.md`	Design audit checklist and scoring	~100
`typography-fixes.md`	Font replacement, weight hierarchy, size jumps	~100
`color-fixes.md`	Palette overhaul, CSS variables, accent strategy	~100
`motion-fixes.md`	Orchestrated animations, scroll triggers, hover	~100
`spatial-fixes.md`	Break centered layout, asymmetry, spacing	~100
`background-fixes.md`	Gradients, patterns, textures, depth	~100

When to Use This Skill

✅ Design audit reveals generic patterns or lack of differentiation ✅ Existing design feels "AI-generated" or template-like ✅ Need to upgrade without complete redesign ✅ Applying brand personality to standardized UI ✅ Want to improve motion, hierarchy, or visual depth ✅ Building stronger design system foundations

Getting Started

Run the audit →
```
./sub-skills/audit.md
```
Identify weakest dimensions → Anti-pattern checklist above
Apply targeted fixes → Follow relevant sub-skill(s)
Validate improvements → Phase 4 checklist
Document changes → Generate before/after report

Related Skills

frontend-design – Create new designs (principles-first approach)
frontend-design-react – React + Vite implementation
frontend-design-vue – Vue 3 implementation
frontend-design-svelte – Svelte implementation
frontend-design-html – Static HTML/CSS implementation

Claude-skill-registry frontend-design-fix