This skill implements the concrete design rules from Refactoring UI to help frontend engineers and product designers move away from arbitrary values. It replaces guesswork with structured scales for spacing, typography, color, and shadows.
By prioritizing visual hierarchy through weight and color rather than size, the skill provides a framework for building interfaces that feel intentional and polished across dashboards, landing pages, and component libraries.
Follow the documented setup, then try a first task.
Installs: Personal skill available in every project · Claude Code
In a terminal, replace `<you>` with the GitHub account or organization hosting the repository fork, then clone it into Claude Code's personal skills directory using the required folder name `refactoring-ui`.
git clone https://github.com/<you>/refactoring-ui-skill.git ~/.claude/skills/refactoring-ui
Restart Claude Code or start a new Claude Code session so it discovers the installed skill.
Installs: Project skill checked into a specific repository and shared with the team · Claude Code
Run from: The root of the specific repository where the skill should be installed
From the specific repository's root in a terminal, replace `<you>` with the GitHub account or organization hosting the repository fork, then clone it into the project's Claude Code skills directory using the required folder name `refactoring-ui`.
git clone https://github.com/<you>/refactoring-ui-skill.git .claude/skills/refactoring-ui
Restart Claude Code or start a new Claude Code session so it discovers the installed skill.
Uses refactoring-ui
/refactoring-ui make this dashboard look less amateur
Claude