ui-refactor — Claude Code skill: what it does, how to install
Applies systematic design guidelines to help coding agents clean up messy layouts, define spacing scales, and pick accessible color schemes.
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-codeWhat ui-refactor does
The skill grounds user interface decisions in structured rules rather than guesswork. When prompted to make an interface look better, the agent avoids jumping straight to navigation bars or decorative accents. It isolates the target component and drafts it in grayscale, fixing spacing and alignment before touching colors.
The instructions reference guides covering typography, HSL palettes, layout grids, and visual depth. Arbitrary values break layouts fast. Because of that risk, the skill forces strict scales for margins, font sizes, and color steps.
Quick heuristics help guide the interface tone, contrasting formal layouts featuring serif fonts with rounded, relaxed styles. The workflow also forces the agent to polish the standard happy path before handling complex edge cases.
What it helps with
- clean up cluttered layouts using structured spacing scales
- build accessible HSL color palettes with high contrast
- establish typography hierarchies for forms and dashboards
- simplify component styling by focusing on happy path flows
Example prompts for the agent
- Make this dashboard card look cleaner and fix the messy spacing
- Create an accessible color palette and typography scale for my settings page
- This form is overcrowded, refactor the layout using ui-refactor rules
How to install ui-refactor
1Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-code2Manually: put the files in place
~/.claude/skills/ui-refactor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ui-refactor/
1Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a codex2Manually: put the files in place
.agents/skills/ui-refactor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a cursor2Manually: put the files in place
.cursor/skills/ui-refactor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install LovroPodobnik/refactoring-ui-skill ui-refactor2Manually: put the files in place
.github/skills/ui-refactor/SKILL.md1Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a gemini-cli2Platform CLI
gemini skills install https://github.com/LovroPodobnik/refactoring-ui-skill --path .claude/skills/ui-refactorManually: put the files in place
.devin/skills/ui-refactor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about ui-refactor
How to install ui-refactor in Claude Code?
Run npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-code in your terminal.
What does ui-refactor do?
It provides structured design rules for AI coding assistants. Instead of making random CSS tweaks, the agent applies strict spacing scales, typography hierarchies, and contrast guidelines.
What workflow does the ui-refactor skill enforce?
The agent tackles specific features first in grayscale wireframes. Colors, shadows, and font pairings are added only after the layout and alignment are resolved.
