Ui Refactor

This is the guide you want when someone asks you to "make it look better" and you're staring at a mess of divs. It's brutally practical: start with the feature itself, not the navbar. Work in grayscale first. Define spacing and type scales immediately instead of eyeballing every margin. The references cover hierarchy, layout, typography, color systems, and polish with specific tactical rules rather than vague design advice. The core insight is that good UI is about systems and constraints, not artistic talent. If you find yourself bikeshedding between twelve shades of blue or adding random padding values, this will snap you back to a disciplined workflow.

skills.sh installs: 519
GitHub stars: 63
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add lovropodobnik/refactoring-ui-skill --skill ui-refactor --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Refactoring and Design

This skill applies tactical, logical rules to user interface design. It prioritizes clarity, hierarchy, and systems over "artistic talent."

Core Workflow

Feature First: Do not start by designing a "shell" (nav bars, sidebars). Start with the specific functionality (e.g., the search form, the contact card).
Low Fidelity: Ignore color, shadows, and fonts initially. Design in grayscale using a thick marker or basic wireframes to solve layout and spacing first.
Define Systems: Do not use arbitrary values. establishing restrictive systems for spacing, type, and color immediately.
Refine: Apply specific tactics for hierarchy, depth, and polish.