refactoring-ui-skill README

The project's README from github.com/s0xDk/refactoring-ui-skill. As one markdown file: README.md.

Refactoring UI (Claude Code skill)

A Claude Code skill that teaches Claude the concrete, mechanical rules from the book Refactoring UI by Adam Wathan and Steve Schoger — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light.

Every rule and CSS value in this skill was cross-checked page-by-page against the book. It's not a summary — it's the book's decisions, made once, ready to apply.

What it does

Load this skill and Claude will, when styling or reviewing UI:

It does not include the book itself — see Credits.

Repo structure

SKILL.md                 the skill: systems, procedure, hierarchy, hard rules
references/
  systems.md              building a color palette from scratch (HSL, saturation, hue rotation)
  diagnose.md              symptom -> fix table, for improving existing UI
  techniques.md            depth/light simulation, typefaces, grids, images
assets/
  tokens.css               a complete, contrast-verified starter token set

Installation

Claude Code loads skills from a folder containing a SKILL.md. Clone this repo into one of the skill directories below — use the folder name refactoring-ui so it matches the skill's declared name.

Personal skill (available in every project)

git clone https://github.com/<you>/refactoring-ui-skill.git ~/.claude/skills/refactoring-ui

Project skill (checked into a specific repo, shared with your team)

git clone https://github.com/<you>/refactoring-ui-skill.git .claude/skills/refactoring-ui

(Or add it as a git submodule at that path if you want to track updates.)

Restart Claude Code (or start a new session) after installing so it picks up the new skill.

Usage

The skill activates automatically whenever Claude is building or styling UI, picking font sizes/spacing/colors/shadows, designing a palette or design tokens, or when you say a UI "looks off", "looks amateur", or "feels cluttered/plain/unfinished." You can also invoke it explicitly:

/refactoring-ui make this dashboard look less amateur

Credits

All design rules and reasoning are drawn from Refactoring UI by Adam Wathan and Steve Schoger. This repo does not include the book's text or images — only original notes and CSS derived from its concepts. If you find this useful, buy the book: https://www.refactoringui.com/

License

MIT for the contents of this repo (see LICENSE). Does not extend to the book itself.

refactoring-ui-skill (s0xDk/refactoring-ui-skill)

Searching Database…

642 ·GitHub
Refactoring-ui-skill
这是什么？一个 Claude Code 技能，把 Adam Wathan 和 Steve Schoger 所著《Refactoring UI》一书中具体、可机械执行的设计规则教给 Claude——固定的间距/字体/颜色/阴影刻度、靠字重和颜色建立层级、用模拟光照表现深度——让 Claude 在搭建或修复界面时应用这些规则。
它是一套设计系统，还是 Claude Code 技能文件？它是一个 Claude Code 技能：一个包含 SKILL.md 的文件夹，由 Claude 加载，而不是你导入应用的 CSS 库或组件套件。
除了 Claude Code 还需要别的吗？只需要 Claude Code 本身——没有提到任何 API 密钥、构建工具或额外依赖；它纯粹是一个 markdown 技能文件。
它包含书的实际内容吗？不包含——它只包含从书中概念提炼的原创笔记和 CSS 数值，不含书中的文字或图片，所以你仍需要原书才能获得完整背景。
会话中这个技能什么时候生效？只要 Claude 在搭建或美化 UI——挑选字号、间距、颜色、阴影，设计配色或令牌——或者你说某个 UI“看起来不对”“很业余”“杂乱/朴素/没做完”，它就会自动激活。也可以显式调用。
它能诊断哪类问题？它把“看起来不对”“显得廉价”这类模糊反馈转化为具体、可机械执行的修复，涵盖间距刻度、字体层级、颜色、阴影、深度和通用组件形态。
为什么不我自己去读那本书？作者把每条规则和 CSS 数值都与原书逐页核对过，这样 Claude 能直接、一致地应用书中的决策，而不是你每次手动把文字建议翻译成代码。
随着仓库更新，我能让技能保持最新吗？可以。你可以不做普通克隆，而是把仓库作为 git submodule 加到技能路径上，以跟踪后续更新。
What are similar projects?interface-design, taste-skill, skills, skills, evondevKit, hallmark, awesome-claude-design, open-claude-ui
Which topics is it in?ui-design, design-system, design, skill, customization, css, anthropic, documentation, ui, claude, agent-skills, web-development
Creator
s0xDk
Size
<0.1 MB
Stars
642
Updated
CommitAug 26
Age
1mo
Commits · 90 Days