| name | ui-refactor |
| description | A design review and UI improvement skill for frontend interfaces. This skill should be used when the user asks to "review a design", "review a screenshot", "improve the UI", "make this look better", "fix the design", "check spacing", "improve visual hierarchy", "choose colors", "pick fonts", "review my CSS", "review my Tailwind", "make this more professional", "design feedback", "fix the layout", "improve typography", "check contrast", "add depth", "polish the UI", or is working on frontend code (HTML, CSS, JSX, TSX, Svelte, Vue) where design quality matters. |
UI Refactor — Design Review Skill
Core Philosophy
Design quality comes from specific, learnable decisions — not innate talent. Three principles underpin everything:
- Hierarchy is the #1 factor. An interface where every element competes equally for attention feels chaotic. Deliberately de-emphasize secondary elements before amplifying primary ones.
- Constrained choices beat infinite options. Pre-define systems for spacing, type sizes, colors, and shadows. Pick from the system, never from the infinite continuum. Decision fatigue kills quality.
- Start functional, add polish last. Design features not layouts, work in grayscale before adding color, ship the smallest useful version. Details like shadows and icons are finishing touches, not starting points.
Review Workflow
When reviewing a design (screenshot, code, or description), evaluate across six dimensions in priority order:
- Hierarchy & Emphasis — Can you identify primary, secondary, and tertiary content instantly? Is there a clear visual path?
- Spacing & Layout — Is spacing systematic? Do groups feel cohesive? Is there ambiguous spacing?
- Typography — Is the type scale constrained? Are line-heights proportional? Are line lengths readable?
- Color — Are colors from a defined system? Do greys have temperature? Is contrast accessible?
- Depth & Images — Are shadows from a defined elevation system? Is text readable on images?
- Polish & Finishing — Are defaults supercharged? Are borders overused? Are empty states designed?
Output format:
## Design Review
### What Works Well
- [Specific praise with why it works]
### Issues Found
1. **[Issue Name]** — [Dimension]
- What: [Observable problem]
- Why: [Principle being violated]
- Fix: [Concrete CSS/code change]
### Quick Wins
- [Highest-impact, lowest-effort changes]
Advisory Workflow
When answering design questions during development (not reviewing existing work):
- Identify which dimension the question falls under
- Load the relevant reference file
- Provide the specific principle, concrete values, and reasoning
- If the question spans multiple dimensions, address the highest-priority one first
Decision Tree — Which Reference to Load
Route to the right reference based on the symptom:
| Symptom | Load |
|---|
| "Everything looks the same weight/importance" | references/hierarchy-and-emphasis.md |
| "It looks cramped" or "spacing feels off" | references/spacing-and-layout.md |
| "The fonts don't feel right" or "text is hard to read" | references/typography.md |
| "Colors feel random" or "it looks washed out" | references/color.md |
| "It feels flat" or "text on images is unreadable" | references/depth-and-images.md |
| "It looks amateur" or "needs more polish" | references/polish-and-finishing.md |
| "Where do I even start?" or general design process | references/design-process.md |
| Reviewing a full screenshot or page | Load references/hierarchy-and-emphasis.md first, then others as issues emerge |
Quick Anti-Pattern Checklist
Before loading any reference files, check for these 8 high-signal problems:
- Wall of Content — Everything at the same size/weight/color. No primary-secondary-tertiary distinction.
- Ambiguous Spacing — Equal gaps between a label and its input vs. between form groups. Proximity doesn't signal relationship.
- Font Size Soup — More than 8 distinct font sizes visible. No constrained type scale.
- Color Without System — Ad-hoc hex values. No visible shade palette. Grey text on colored backgrounds using literal grey.
- One Shadow Fits All — Same box-shadow on buttons, cards, and modals. No elevation hierarchy.
- Border Everything — Borders used as the default separator when spacing, background color, or box-shadow would be cleaner.
- Full-Width Everything — Content stretched to fill viewport when a max-width constraint would improve readability.
- Ignored Empty States — Blank screens with just "No items found" — no illustration, no guidance, no call-to-action.
If any are detected, load the relevant reference for detailed fixes.
Reference Files
| File | Contents | Load When |
|---|
references/design-process.md | Start with features, work low-fidelity, constrain choices, define personality | Starting a new design or asking "where do I begin?" |
references/hierarchy-and-emphasis.md | Emphasize by de-emphasizing, weight + color + size for hierarchy, labels as last resort, semantic vs visual hierarchy | Hierarchy issues detected or reviewing any full interface |
references/spacing-and-layout.md | Non-linear spacing scale, start with too much whitespace, fixed sidebars, avoid ambiguous spacing | Spacing/layout issues or reviewing component/page structure |
references/typography.md | Hand-crafted type scale, proportional line-height, line length, letter-spacing, baseline alignment | Typography issues or text-heavy interfaces |
references/color.md | HSL workflow, 8-10 shades per color, hue rotation, warm/cool greys, accessible contrast | Color issues, palette creation, or contrast problems |
references/depth-and-images.md | 5-level shadow system, two-part shadows, flat depth, text on images, icon sizing | Depth/shadow issues or image-related problems |
references/polish-and-finishing.md | Supercharged defaults, accent borders, fewer borders, empty states, thinking outside the box | "It needs more polish" or finishing a nearly-complete design |
