Updated 5mo ago
by gnurio
refactoring-ui-plugin
10 applied skills for Claude Code and Cursor that turn the principles of Refactoring UI into structured AI-assisted design reviews | not affiliated, big fan, get their book here:
445 GitHub stars (445)
+12 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | +3 |
| Oct 4 | +1 |
| Oct 5 | 0 |
| Oct 6 | +2 |
| Oct 7 | +1 |
| Oct 8 | +2 |
| Oct 9 | +2 |
| Oct 10 | −1 |
| Oct 11 | +1 |
| Oct 12 | +1 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 12 skills (12 skills found in its SKILL.md files)
- 16 forks (16 forks)
- 5mo ago last update (Last updated 5mo ago)
Install
Skills CLI
npx skills add gnurio/refactoring-ui-plugin
Asks which skills and agents to install. Just one: npx skills add gnurio/refactoring-ui-plugin --skill refactoring-ui-plugin — add -g for every project.
Claude Code
git clone https://github.com/gnurio/refactoring-ui-plugincp -r "refactoring-ui-plugin" ~/.claude/skills/refactoring-ui-plugin
Copies the refactoring-ui-plugin skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add gnurio/refactoring-ui-plugin
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
refactoring-ui-plugin
No description in the SKILL.md.
SKILL.md on GitHub (opens in a new tab) -
establish-visual-hierarchy
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
skills/01-establish-visual-hierarchy/SKILL.md on GitHub (opens in a new tab) -
apply-typography-scale
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
skills/02-apply-typography-scale/SKILL.md on GitHub (opens in a new tab) -
build-color-palette
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
skills/03-build-color-palette/SKILL.md on GitHub (opens in a new tab) -
apply-consistent-spacing
Use systematic spacing with 25% minimum jumps, start with excess whitespace
skills/04-apply-consistent-spacing/SKILL.md on GitHub (opens in a new tab) -
design-button-hierarchy
Create clear primary/secondary/tertiary action distinctions
skills/05-design-button-hierarchy/SKILL.md on GitHub (opens in a new tab) -
eliminate-visual-clutter
Remove unnecessary borders, backgrounds, shadows, decorations
skills/06-eliminate-visual-clutter/SKILL.md on GitHub (opens in a new tab) -
design-empty-states
Create helpful, actionable zero-content states
skills/07-design-empty-states/SKILL.md on GitHub (opens in a new tab) -
use-shadows-appropriately
Add depth only when functionally necessary (elevation, not decoration)
skills/08-use-shadows-appropriately/SKILL.md on GitHub (opens in a new tab) -
manage-color-contrast
Ensure WCAG AA accessibility and readability
skills/09-manage-color-contrast/SKILL.md on GitHub (opens in a new tab) -
group-related-elements
Use proximity and spacing to show relationships
skills/10-group-related-elements/SKILL.md on GitHub (opens in a new tab) -
refactor-ui
Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes
skills/meta-refactor-ui/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.