# Refactoring UI

> Audit interface quality using Refactoring UI principles for hierarchy, spacing, color, and depth. Use when the UI feels off, when the user asks to fix visual hierarchy, refine spacing, improve color palette, or polish visual design before ship.

- Skill: `talgacapri/refactoring-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add talgacapri/refactoring-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/talgacapri/refactoring-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: talgacapri (https://skillmd.com/u/talgacapri)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/talgacapri/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.