refactoring-ui

refactoring ui

wondelai 1.7k ↓ 5.3k MIT updated 26d ago

Claude Code

View source ↗

What it does

Combine levers, don't multiply — primary text = large OR bold OR dark, not all three; save "all three" for the single most important element
Labels are secondary — form labels, table headers, and metadata support the data, not compete with it; make them smaller, lighter, or uppercase-small
Semantic color ≠ visual weight — a muted secondary button often beats screaming red for routine destructive actions
Three-level hierarchy: Size (large/base/small), Weight (bold/medium/normal), Color (dark/medium/light gray)
Button hierarchy: primary (filled), secondary (outlined or muted), tertiary (text only)
Use the scale: 4, 8, 16, 24, 32, 48, 64px
Start with too much white space, then remove — you'll almost never remove enough

Requirements & configuration

Headings: tight line height (1.0-1.25); body: relaxed (1.5-1.75); wider text needs more line height
Each color needs 5-9 shades from near-white to near-black (50-900); darkest is not pure black — use #111827, not #000000
Text over images needs an overlay (semi-transparent gradient)
Cards don't need to contain everything — let images bleed to edges or overlap containers

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

refactoring ui

Source

Repository: https://github.com/wondelai/skills

refactoring-ui FAQ

What does the refactoring-ui skill do?

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics. Combine levers, don't multiply — primary text = large OR bold OR dark, not all three; save "all three" for the single most important element Labels are secondary — form labels, table headers, and metadata support the data, not compete with it; make them smaller, lighter, or uppercase-small

What does refactoring-ui require?

Headings: tight line height (1.0-1.25); body: relaxed (1.5-1.75); wider text needs more line height Each color needs 5-9 shades from near-white to near-black (50-900); darkest is not pure black — use #111827, not #000000 Text over images needs an overlay (semi-transparent gradient) Cards don't need to contain everything — let images bleed to edges or overlap containers

How do I install refactoring-ui?

Run: npx -y skills add https://github.com/wondelai/skills --skill refactoring-ui --agent claude-code — the source lives at github.com/wondelai/skills.

Maintain refactoring-ui?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![refactoring-ui on getagentictools](https://getagentictools.com/badge/skills/wondelai-skills-refactoring-ui.svg)](https://getagentictools.com/skills/wondelai-skills-refactoring-ui?ref=badge)

npx agentictools info skills/wondelai-skills-refactoring-ui

The second line is the CLI lookup for this page — handy in READMEs and docs.