Refactoring UI

Refactoring UI

Use this skill when a screen looks "almost right" but feels visually weak.

What this skill does

This skill audits and improves:

• Visual hierarchy (what gets attention first)
• Spacing rhythm (consistent layout and grouping)
• Typography clarity and contrast
• Color and contrast consistency
• Shadows, borders, and depth usage

Best triggers

Activate for requests like:

• "my UI looks off"
• "fix the design"
• "visual hierarchy"
• "color palette"
• "polish this screen"

Workflow

1. Identify the product goal and primary action on the screen.
2. Run a hierarchy pass:
   • Check headline prominence, CTA emphasis, and scan order.
   • Reduce visual noise competing with the primary action.
3. Run a spacing pass:
   • Normalize spacing scale (tight, base, section gaps).
   • Group related elements and separate unrelated ones.
4. Run typography pass:
   • Limit type styles and weights.
   • Improve line length and readability.
5. Run color pass:
   • Reserve accent colors for important actions and status.
   • Ensure sufficient contrast for text and controls.
6. Run depth pass:
   • Use shadows and borders intentionally, not everywhere.
   • Remove decorative effects that do not convey structure.
7. Return a prioritized fix list:
   • Critical (must fix before ship)
   • High impact polish
   • Optional refinements

Output format

Return:

1. A short diagnosis of why the screen feels off
2. Top 5 changes by impact
3. A concrete style recipe (spacing, type, color, depth rules)
4. If asked, updated code or design-ready spec

Guardrails

• Prioritize clarity over decoration.
• Keep one clear primary action per view.
• Apply consistent systems (scale, tokens, reusable patterns).
• Explain changes in plain language tied to user outcomes.