How do I install the UI Refactor skill?

Run npx skillmds@latest add lovropodobnik/ui-refactor in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Refactor safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Refactor?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Refactor free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Refactor?

lovropodobnik (@lovropodobnik) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Refactor by lovropodobnik — Agent Skill

Name: UI Refactor
Rating: 4.2 (5 reviews)
Author: lovropodobnik

UI Refactor

Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.

lovropodobnik Updated Sep 9, 2026

File contents

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.

Domain-Specific Tactics

Consult these references for specific implementation rules:

Making elements stand out/fit in: See hierarchy.md (Size, weight, contrast, semantics).
Whitespace and alignment: See layout-spacing.md (Grids, spacing scales, density).
Text and fonts: See typography.md (Type scales, line-height, fonts).
Colors and palettes: See color.md (HSL, saturation, accessible contrast).
Images, shadows, and polish: See depth-and-polish.md (Light sources, assets, finishing touches).

Quick Heuristics

Limit Choices: If you can't decide between two options, you have too many choices. constrain your inputs (colors, font sizes, spacing) to a pre-defined scale.
Personality:
- Serious/Elegant: Serif fonts, sharp corners, gold/blue colors, formal language.
- Playful/Friendly: Rounded sans-serifs, large border-radius, pink/orange, casual language.
Complexity: Do not design for edge cases first. Design the "happy path" (simple version), then iterate for complexity.

---name: ui-refactordescription: Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.--- # 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 1. **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). 2. **Low Fidelity**: Ignore color, shadows, and fonts initially. Design in grayscale using a thick marker or basic wireframes to solve layout and spacing first. 3. **Define Systems**: Do not use arbitrary values. establishing restrictive systems for spacing, type, and color immediately. 4. **Refine**: Apply specific tactics for hierarchy, depth, and polish. ## Domain-Specific Tactics Consult these references for specific implementation rules: - **Making elements stand out/fit in**: See [hierarchy.md](references/hierarchy.md) (Size, weight, contrast, semantics). - **Whitespace and alignment**: See [layout-spacing.md](references/layout-spacing.md) (Grids, spacing scales, density). - **Text and fonts**: See [typography.md](references/typography.md) (Type scales, line-height, fonts). - **Colors and palettes**: See [color.md](references/color.md) (HSL, saturation, accessible contrast). - **Images, shadows, and polish**: See [depth-and-polish.md](references/depth-and-polish.md) (Light sources, assets, finishing touches). ## Quick Heuristics - **Limit Choices**: If you can't decide between two options, you have too many choices. constrain your inputs (colors, font sizes, spacing) to a pre-defined scale. - **Personality**: - *Serious/Elegant*: Serif fonts, sharp corners, gold/blue colors, formal language. - *Playful/Friendly*: Rounded sans-serifs, large border-radius, pink/orange, casual language. - **Complexity**: Do not design for edge cases first. Design the "happy path" (simple version), then iterate for complexity.

Frequently asked questions