Agent Skills: Frontend Design Fix Skill

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:

1. Typography – Replace generic fonts, fix weight hierarchies, aggressive size jumps
2. Color & Theme – Remove predictable palettes, introduce CSS variables, add dominant + accent strategy
3. Motion – Add orchestrated page loads, staggered reveals, hover surprises
4. Spatial Composition – Break centered layouts, introduce asymmetry, adjust spacing strategy
5. 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

1. Run the audit → ./sub-skills/audit.md
2. Identify weakest dimensions → Anti-pattern checklist above
3. Apply targeted fixes → Follow relevant sub-skill(s)
4. Validate improvements → Phase 4 checklist
5. 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