# ui-refactor

Applies systematic design guidelines to help coding agents clean up messy layouts, define spacing scales, and pick accessible color schemes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 494 installs · ★ 62
- Author: LovroPodobnik
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/LovroPodobnik/refactoring-ui-skill/tree/HEAD/.claude/skills/ui-refactor/SKILL.md
- Updated: 2026-01-08
- HTML: https://affpapa.org/en/nevibecode/skills/ui-refactor

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-refactor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-refactor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-refactor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-refactor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install LovroPodobnik/refactoring-ui-skill ui-refactor
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-refactor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/LovroPodobnik/refactoring-ui-skill --path .claude/skills/ui-refactor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-refactor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/LovroPodobnik/refactoring-ui-skill/tree/HEAD/.claude/skills/ui-refactor/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/ilm-alan-frontend-design.md) — skill · 580 installs
- [tailwind-ui-refactor](https://affpapa.org/en/nevibecode/skills/tailwind-ui-refactor.md) — skill · 458 installs
- [editorial](https://affpapa.org/en/nevibecode/skills/editorial.md) — skill · 2700 installs
- [typography-scale](https://affpapa.org/en/nevibecode/skills/typography-scale.md) — skill · 2600 installs
- [brutalism](https://affpapa.org/en/nevibecode/skills/brutalism.md) — skill · 2400 installs
- [industrial-brutalist-ui](https://affpapa.org/en/nevibecode/skills/industrial-brutalist-ui.md) — skill · 1700 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md