--- name: frontend-design-fix description: Fix generic frontend designs by applying aesthetic upgrades across the 5 design dimensions version: 2.0.0 architecture: modular-composable tools: [Read, Write, Edit, Grep, Glob, Bash] --- # 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 --- Source attribution: matteocervelli Original project: https://github.com/matteocervelli/llms/blob/1e1f2089eb06a7934b0fb75ae2e39f481a19ce73/.archive/frontend-design-system/skills/frontend-design-fix/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2025 Matteo Cervelli Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: matteocervelli Original project: https://github.com/matteocervelli/llms/blob/1e1f2089eb06a7934b0fb75ae2e39f481a19ce73/.archive/frontend-design-system/skills/frontend-design-fix/SKILL.md Attribution basis: Recovered original package and original project license at a pinned revision Fields of work: Design, Development & Engineering Roles: Frontend Developer, Graphic Designer, Product Designer, UI Designer, UX Designer Specialties: Design, Frontend Tools: Bash Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 6550996d41a4a40afd56b5771bf846f55d4386c96f9d4b549ca41d9764eac52b Metadata reviewed: 2026-10-27 This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.