# Refactoring UI

> Use when a UI looks amateurish or cluttered but doesn't need a redesign — spacing, hierarchy, color or type feel off and the fix should be a handful of targeted CSS/Tailwind changes, not starting over.

- Skill: `presidenteog/refactoring-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add presidenteog/refactoring-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/presidenteog/refactoring-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: PresidenteOG (https://skillmd.com/u/presidenteog)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/presidenteog/refactoring-ui

---


# refactoring-ui

Refactoring UI (Adam Wathan & Steve Schoger) is a set of tactical visual improvements that have outsized impact per minute of effort — the insight being that most "ugly" UI is ugly for 3-4 fixable reasons, not because it needs a redesign.

## Qué hace esta skill

- Runs the 8 high-leverage fixes against your current design in priority order
- For each fix: names the exact problem, explains why it matters visually, gives the specific CSS or Tailwind change
- Produces a before/after description for every finding
- Outputs a "quick wins" list: 3 changes under 5 minutes each that produce the most visible improvement
- Includes specific values — not "add more padding" but "change padding from 12px to 32px"

## Cuándo usarla

- The design is functional but looks amateurish or generic
- You don't have time or budget for a redesign — you need visible improvement fast
- You're building in Tailwind and want specific class substitutions
- After an initial build where you copy-pasted components and the spacing is inconsistent

## Proceso

1. **Share the design:** Screenshots or describe the current state of the component/screen
2. **Run the 8 fixes in order** (ordered by visual impact):

   **Fix 1 — Remove excess borders**
   Look for: borders used to separate sections. Replace with: background color difference or box shadow. Borders add visual noise; contrast does the same job silently.

   **Fix 2 — Use fewer font weights**
   Look for: more than 2 weights in any single component. Keep: bold (700) + regular (400). Cut: medium (500), semibold (600) everywhere they appear as filler. Exception: mono code blocks.

   **Fix 3 — Add whitespace aggressively**
   Look for: any padding under 24px in a content area. Rule: double the current padding, then consider doubling again. Breathing room signals quality. Cramped spacing signals rush.

   **Fix 4 — Use real content**
   Look for: lorem ipsum, "User Name", placeholder numbers. Replace with realistic content length and values. Lorem ipsum hides hierarchy problems that will surprise you in production.

   **Fix 5 — Fix low-contrast gray on white**
   Look for: any text lighter than #595959 on a white (#ffffff) background. Minimum: 4.5:1 contrast ratio for body text. "Subtle" gray text is often actually illegible on calibrated screens and projectors.

   **Fix 6 — Limit to 2 font sizes per component**
   Look for: 3+ distinct font sizes within a single card, row, or panel. Keep: title size + body size. Any third size is competing for attention instead of creating hierarchy.

   **Fix 7 — Use color to communicate, not decorate**
   Look for: color used for "style" without a semantic job. Rule: every color should have a specific job (danger, success, primary action, secondary action). Remove colors that don't have a job description.

   **Fix 8 — Align to a spacing system**
   Look for: spacing values that aren't multiples of 4px (or 8px). If a margin is 13px, a padding is 7px, or a gap is 11px — that's a rounding error masquerading as design. Snap everything to the 4px grid.

3. **For each finding:** output in this format:
   ```
   FIX: <fix name>
   Found: <specific element + current value>
   Change: <specific new value or class>
   Tailwind: <old class> → <new class>
   Impact: <why this makes it look better>
   ```
4. **Quick wins summary:** Top 3 changes by impact-per-minute
5. **CSS/Tailwind patch block:** Ready-to-apply changes grouped by component

## Ejemplo de prompt

> Mi dashboard de analytics se ve genérico y poco profesional. Aquí está el screenshot. Quiero fixes específicos con las clases de Tailwind para aplicar.

## Relación con otras skills

| Situación | Skill |
|---|---|
| El problema es flujo/UX, no solo visual | `ui-ux-pro-max` |
| Quieres audit de nivel senior que cubra trust signals y business alignment | `ui-ux-pro-max` |
| La estructura es correcta pero la copy no convierte | `jobs-to-be-done` |