refactoring-ui

Apply Refactoring UI principles to guide UI/UX design decisions.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/macCesar/aiskills --skill refactoring-ui-maccesar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/macCesar/aiskills/tree/main/skills/refactoring-ui
Command: npx skills add https://github.com/macCesar/aiskills --skill refactoring-ui-maccesar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides design decisions by applying Refactoring UI principles to improve UI/UX outcomes and reduce guesswork.

Core Features & Use Cases

  • Visual hierarchy guidance (typography, color, spacing)
  • Depth, shadows, and image handling advice consistent with Refactoring UI
  • Quick design critiques and component-level guidance for web and app interfaces

Quick Start

Describe your UI challenge and request guidance grounded in Refactoring UI principles.

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 UI design without guesswork?

Visual hierarchy improves by applying Refactoring UI principles to typography, color, and spacing. This skill provides paraphrased guidance to structure interface elements logically, reducing design uncertainty and ensuring users focus on the right content.

What is the best way to design a consistent color system and spacing for web and mobile interfaces?

A consistent color system and spacing scale comes from applying Refactoring UI principles across web and mobile interfaces. This skill delivers paraphrased guidance to help you build coherent style systems without relying on rigid numeric formulas.

Can I get a quick design critique for a specific component using Refactoring UI?

Yes, you can request quick design critiques and component-level guidance. Describe your UI challenge and receive practical, paraphrased advice grounded in Refactoring UI references for both web and app interfaces.

How do I handle depth and shadows when polishing an interface?

Handle depth and shadows by following Refactoring UI principles for visual hierarchy. This skill provides practical guidance on applying appropriate depth and image handling techniques to polish web and mobile interfaces effectively.

Does Refactoring UI guidance provide numeric formulas for typography and spacing?

No, Refactoring UI guidance does not provide numeric formulas. It delivers practical, paraphrased guidance focused on visual hierarchy, typography, color systems, and depth to improve UI/UX outcomes without rigid mathematical rules.

When should I use Refactoring UI principles for UX design decisions?

Use Refactoring UI principles when facing UI/UX design uncertainty during design reviews, component design, or style-system work. It applies to visual hierarchy, typography, color, spacing, depth, and image handling across web and mobile platforms.