Refactoring UI Design System

Refactoring-UI design principles: personality, muted color, hierarchy, spacing, type

Tested · Works

Test report

Verdict
Tested · Works
Score
8.8/10
Tested
Jul 20, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Jul 30, 2026 · f36bb4e

This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 20, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.

Styling a fintech dashboard's primary CTA, my no-skill baseline reached for a full-saturation indigo gradient with a 10px radius — exactly the generic AI look this skill lists as mistake #11. Following the body I instead landed on a muted hsl(215,45%,48%) primary, a 6px radius for a formal/reserved domain, one warm accent to advance the CTA against a cool surface, and a subtle diffused shadow. The domain-to-personality-to-saturation chain produced specific, defensible values rather than decoration, and the delta was obvious side by side.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 7/10
  • Docs & honesty 5/5

What Refactoring UI Design System does

A 1100-line design playbook that maps a UI to a personality quadrant and domain, then drives concrete choices for color saturation, harmony, layout density, typography, spacing, and shadows. Triggers when you build or review interfaces or ask about colors, fonts, spacing, layout, responsiveness, or interface copy.

How to install Refactoring UI Design System

Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.

Commands — how to trigger Refactoring UI Design System

  • /refactoring-ui Refactoring-UI design principles: personality, muted color, hierarchy, spacing, type

It also activates on plain-language prompts like these:

  • This interface looks too flat, help me fix the color and spacing
  • What personality quadrant fits this dashboard and how should I style it
  • My UI has no visual hierarchy, help me fix typography and shadows

Frequently asked questions

Is the Refactoring UI Design System skill free?
Yes. The skill itself is free from jaywilburn/refactoring-ui-skill. SkillProof publishes the install command and an independent test verdict at no cost.
Does Refactoring UI Design System work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 20, 2026. Verdict: Tested · Works. Styling a fintech dashboard's primary CTA, my no-skill baseline reached for a full-saturation indigo gradient with a 10px radius — exactly the generic AI look this skill lists as mistake #11. Following the body I instead landed on a muted hsl(215,45%,48%) primary, a 6px radius for a formal/reserved domain, one warm accent to advance the CTA against a cool surface, and a subtle diffused shadow. The domain-to-personality-to-saturation chain produced specific, defensible values rather than decoration, and the delta was obvious side by side.
What is the Refactoring UI Design System SkillProof Score?
8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.
How do I install Refactoring UI Design System?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Refactoring UI Design System with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.