Skills
.Work. You
Rest

refactoring-ui

Community

Build professional UIs without a designer.

Design & Creative#typography#design system#color theory#frontend development#ui design#visual hierarchy
AuthorQinYangWang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a practical, systematic approach to UI design, enabling developers to create professional-looking interfaces without needing a dedicated designer. It addresses common visual hierarchy, spacing, typography, and color challenges.

Core Features & Use Cases

  • Visual Hierarchy: Learn to use size, weight, and color to guide the user's eye.
  • Spacing & Sizing: Implement consistent spacing scales for harmonious layouts.
  • Typography: Define modular type scales and line heights for readability.
  • Color Systems: Build systematic palettes and ensure proper contrast.
  • Depth & Shadows: Use shadows to convey elevation and interaction cues.
  • Images & Icons: Treat visual assets as design elements, not afterthoughts.
  • Layout & Composition: Create engaging layouts beyond simple grids.
  • Use Case: When designing a new dashboard, use this Skill's principles to ensure key metrics stand out, data tables are readable, and the overall layout feels polished and professional.

Quick Start

Apply the principles of Refactoring UI to improve the visual hierarchy of the provided dashboard mockups.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: refactoring-ui
Download link: https://github.com/QinYangWang/honowarden/archive/main.zip#refactoring-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.