mcpField
U
ui-refactor

ui-refactor

github.com/lovropodobnikDesign & UI63501 installsUpdated 42w ago
Repository

About ui-refactor

A skill for UI design and refactoring that uses explicit rules to guide layout, hierarchy, and visual systems. It recommends starting with a low-fidelity design for a specific feature, then defining spacing, typography, and color systems before refinement.

Key features

  1. 01Start with a specific feature
  2. 02Use grayscale wireframes to plan layout
  3. 03Define spacing, type, and color systems
  4. 04Refine hierarchy, typography, and whitespace

Use cases

  1. 01Refactor an existing interface layout
  2. 02Draft a low-fidelity wireframe for a feature
  3. 03Standardize spacing and type scales
  4. 04Adjust information hierarchy and color contrast

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lovropodobnik/refactoring-ui-skill --skill ui-refactor

After installing, type/ui-refactorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
color.md
depth-and-polish.md
hierarchy.md
layout-spacing.md
typography.md

Details

From the project README

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 (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.

Comments

Markdown supported