Refactoring UI Skill

What it does

• Encodes the book's mechanical decisions: spacing, type sizes, weights, colors, shadows, and radii picked from fixed scales instead of ad hoc values
• Hierarchy through weight and color rather than piling on font-size; depth through emulated light
• references/diagnose.md is a symptom-to-fix table that turns vague complaints ("looks off", "feels cheap") into concrete fixes
• Ships assets/tokens.css — a complete, contrast-verified starter token set — plus palette-building and light-simulation references

When to use it

Give Claude taste guardrails when building or restyling UI, or point it at a screen that "looks amateur" and get rule-based fixes instead of generic advice. Team-friendly: check the skill into .claude/skills/ so everyone's Claude applies the same rules.

Getting started

# Personal skill (available in every project) — folder name must match the skill's declared name
git clone https://github.com/s0xDk/refactoring-ui-skill.git ~/.claude/skills/refactoring-ui

# Or project skill, checked in and shared with the team
git clone https://github.com/s0xDk/refactoring-ui-skill.git .claude/skills/refactoring-ui

# Restart Claude Code (or start a new session) after installing. Explicit invoke: /refactoring-ui make this dashboard look less amateur

Things to know

Does not include the book itself — the rules are original notes and CSS derived from the book's concepts, so buy the book for the full reasoning. MIT covers the repo contents only, not the book.