skills.rest
klarbau
klarbauCOMMUNITY
Explore all skills by this author →
GitHub

ui-refactor

Refine cluttered UI layouts with hierarchy, spacing, typography, color, and depth polish.

7|1|Updated May 14, 2026
Search Tags:#typography#layout#ui design#color#spacing#hierarchy
One-click install
npx skills add https://github.com/klarbau/govtech-de --skill ui-refactor-klarbau
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-refactor
Source: https://github.com/klarbau/govtech-de/tree/main/.claude/skills/ui-refactor
Command: npx skills add https://github.com/klarbau/govtech-de --skill ui-refactor-klarbau

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you transform cluttered or inconsistent interfaces into clear, usable, professional UI by applying practical rules for hierarchy, spacing, typography, color, and depth.

Core Features & Use Cases

  • Hierarchy and emphasis: Decide what should stand out, what should recede, and how to balance text, icons, borders, and containers.
  • Layout and spacing systems: Replace arbitrary spacing with a disciplined scale, better alignment, and stronger grouping.
  • Typography and color choices: Pick readable type scales and accessible palettes that support the product's tone.
  • Use Case: Refactor a crowded dashboard, improve a dense settings page, or make a prototype look production-ready without guessing at visual styling.

Quick Start

Ask this skill to review your current interface and recommend specific changes to spacing, typography, color, hierarchy, and polish.

Frequently Asked Questions about ui-refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix a cluttered dashboard layout with too many competing elements?▼

To fix a cluttered dashboard layout, apply a layout-first evaluation to establish stronger hierarchy, group related elements, and replace arbitrary spacing with a disciplined scale for a clear, professional interface.

What is the best way to choose typography and color for a professional UI refactor?▼

Choosing typography and color for a UI refactor involves selecting readable type scales and accessible palettes that support the product's tone while maintaining strict accessible color contrast.

How do I make a dense settings page look production-ready without guessing at visual styling?▼

Making a dense settings page production-ready requires applying restrictive spacing and type scales, improving alignment, and using depth-and-polish guidance to balance text, icons, borders, and containers.

Can I use this approach to improve hierarchy and emphasis across an entire design system?▼

Yes, you can improve hierarchy across a design system by deciding what should stand out or recede and applying restrictive spacing, type scales, and accessible color choices consistently across components.

When should I not use a layout-first evaluation for UI refactoring?▼

You should not use a layout-first evaluation when your UI refactoring requires complex custom visual graphics or highly specialized interactive components that fall outside standard layout, typography, and spacing systems.

Related Skills

Explore More Design & Creative Skills→
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
ilanf23ilanf23
1

color-system

Generate accessible color palettes with semantic mapping and WCAG contrast compliance.

Community
Intermediate
xinge-jixinge-ji

web-design-guidelines

Compare frontend HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate