GitHub radar
Refactoring UI Skill for Claude Code
A Claude Code skill that teaches Claude the mechanical design rules from Refactoring UI — spacing scales, color hierarchy, and depth through light.
A Claude Code skill that encodes the concrete design rules from Refactoring UI by Adam Wathan and Steve Schoger — the designers behind Tailwind CSS. It gives Claude fixed scales for spacing, typography, colors, and shadows instead of arbitrary values. Claude learns to build hierarchy through font weight and color rather than size alone, and can diagnose vague UI complaints like 'looks cheap' or 'feels off' into specific mechanical fixes. Every rule was cross-checked page by page against the book. Includes a symptom-to-fix reference table, color palette building guides, depth and light simulation techniques, and a complete contrast-verified CSS token starter set.
Why a vibe-coder should care
After installing this skill, Claude follows a consistent design system instead of guessing. Interfaces that used to look generic or amateurish come out looking polished — without you needing to know design theory yourself.
How to install
Copy this and send it to your agent — Claude Code, Codex, any of them:
Install the Refactoring UI skill from this repo: https://github.com/s0xDk/refactoring-ui-skill — follow the README (global install via npx skills add), then apply the skill's design rules to my current page so it looks polished.
▌ More finds