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

refactoring-ui

Review web interfaces for visual hierarchy, spacing, color, and depth improvements.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and fix web interfaces that feel unbalanced, cluttered, flat, or hard to read by applying a practical visual design system for hierarchy, spacing, typography, color, depth, and layout.

Core Features & Use Cases

  • Visual Hierarchy Audits: Improve page structure so the primary action, important content, and supporting details are immediately clear.
  • Spacing, Color, and Depth Systems: Replace arbitrary styling with constrained scales for spacing, type, shadows, and theme colors.
  • Use Case: You can use this Skill to polish a dashboard, landing page, settings screen, or Tailwind component set before launch so it looks more professional and consistent.

Quick Start

Use the refactoring-ui skill to review this web interface and recommend the highest-impact visual improvements for hierarchy, spacing, color, and depth.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I improve visual hierarchy in a web interface that feels flat and cluttered?▼

Polish UI spacing by replacing arbitrary values with a constrained spacing scale, ensuring consistent padding and margins across components. This system eliminates alignment issues and creates a balanced, professional layout.

Can I use this to review Tailwind styling and design-token systems for a dashboard?▼

Yes, you can review Tailwind styling and design-token systems for dashboards by evaluating component-level refinement against reference patterns. It ensures accessible contrast, consistent shadows, and proper depth alignment.

What is the best way to set up dark mode themes with accessible contrast?▼

Set up dark mode themes by applying constrained color scales that maintain accessible contrast ratios. Evaluate theme colors against reference patterns to ensure depth and readability are preserved in low-light interfaces.

Does this approach require a specific framework to polish web UIs?▼

No framework is required, but it applies directly to frontend design reviews and Tailwind component sets. The process uses design-token systems and reference patterns to guide component-level refinement regardless of the platform.

Related Skills

Explore More Design & Creative Skills→
gerald-icagerald-ica

arrange

Provides UI layout suggestions that improve spacing and rhythm for given designs.

Community
Intermediate
WebWakaHubWebWakaHub
20

UI Designer

Design accessible, pixel-perfect UI design systems with WCAG AA compliance.

Official
Advanced
svengrazianisvengraziani
2

ui-design-principles

Guide CSS/HTML styling with visual hierarchy, spacing, typography, and depth principles.

Community
Intermediate
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic