What is this?
A Claude Code skill that teaches Claude the concrete, mechanical design rules from the book 'Refactoring UI' by Adam Wathan and Steve Schoger — fixed spacing/type/color/shadow scales, hierarchy via weight and color, and depth via emulated light — so Claude applies them when building or fixing interfaces.
A Claude Code skill that teaches Claude the concrete, mechanical design rules from the book 'Refactoring UI' by Adam Wathan and Steve Schoger — fixed spacing/type/color/shadow scales, hierarchy via weight and color, and depth via emulated light — so Claude applies them when building or fixing interfaces.Is this a design system or a Claude Code skill file?It is a Claude Code skill: a folder containing a SKILL.md that Claude loads, not a CSS library or component kit you import into an app.
It is a Claude Code skill: a folder containing a SKILL.md that Claude loads, not a CSS library or component kit you import into an app.Do I need anything else besides Claude Code?Just Claude Code itself — no API keys, build tools, or extra dependencies are mentioned; it's purely a markdown skill file.
Just Claude Code itself — no API keys, build tools, or extra dependencies are mentioned; it's purely a markdown skill file.Does this include the actual book content?No — it only contains original notes and CSS values derived from the book's concepts, not the book's text or images, so you still need the actual book for full context.
No — it only contains original notes and CSS values derived from the book's concepts, not the book's text or images, so you still need the actual book for full context.When does the skill kick in during a session?It activates automatically whenever Claude is building or styling UI — picking font sizes, spacing, colors, shadows, designing a palette or tokens — or when you say a UI 'looks off', 'amateur', or 'cluttered/plain/unfinished'. It can also be invoked explicitly.
It activates automatically whenever Claude is building or styling UI — picking font sizes, spacing, colors, shadows, designing a palette or tokens — or when you say a UI 'looks off', 'amateur', or 'cluttered/plain/unfinished'. It can also be invoked explicitly.What kind of problems can it diagnose?It turns vague feedback like 'looks off' or 'feels cheap' into specific, mechanical fixes covering spacing scales, type hierarchy, color, shadows, depth, and generic component shapes.
It turns vague feedback like 'looks off' or 'feels cheap' into specific, mechanical fixes covering spacing scales, type hierarchy, color, shadows, depth, and generic component shapes.Why not just read the book myself?The author cross-checked every rule and CSS value page-by-page against the book so Claude applies the book's decisions directly and consistently, rather than you manually translating prose advice into code each time.
The author cross-checked every rule and CSS value page-by-page against the book so Claude applies the book's decisions directly and consistently, rather than you manually translating prose advice into code each time.Can I keep the skill updated as the repo changes?Yes, instead of a plain clone you can add the repo as a git submodule at the skill path to track future updates.
Yes, instead of a plain clone you can add the repo as a git submodule at the skill path to track future updates.What are similar projects?interface-design, taste-skill, skills, skills, evondevKit, hallmark, awesome-claude-design, open-claude-ui
interface-design, taste-skill, skills, skills, evondevKit, hallmark, awesome-claude-design, open-claude-uiWhich topics is it in?ui-design, design-system, design, skill, customization, css, anthropic, documentation, ui, claude, agent-skills, web-development
ui-design, design-system, design, skill, customization, css, anthropic, documentation, ui, claude, agent-skills, web-development