skills.rest
YehudaFrankel
YehudaFrankelCOMMUNITY
Explore all skills by this author →
GitHub

refactoring-ui

Apply tactical design rules to improve UI polish across web and mobile interfaces.

16|3|Updated Mar 15, 2026
Search Tags:#typography#color#ui-design#spacing#design-systems#visual-hierarchy#refactoring-ui
One-click install
npx skills add https://github.com/YehudaFrankel/clankbrain --skill refactoring-ui-yehudafrankel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/YehudaFrankel/clankbrain/tree/main/.claude/skills/refactoring-ui
Command: npx skills add https://github.com/YehudaFrankel/clankbrain --skill refactoring-ui-yehudafrankel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide designers and developers with tactical rules to improve visual polish and consistency across interfaces, addressing the most common UI design problems.

Core Features & Use Cases

  • Tactical rules for improvement: grayscale-first workflow, spacing and typography systems, color and shadow guidance, and hierarchy optimization.
  • Use Case: when a UI looks off, apply the rules to diagnose and fix issues from layout to typography to achieve a cohesive design.

Quick Start

Apply the grayscale-first approach and establish a simple spacing and typography system to begin polishing a UI.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I improve UI polish when my interface design looks off?▼

Improve visual hierarchy by applying a grayscale-first workflow and establishing a simple spacing and typography system to diagnose layout inconsistencies and achieve a cohesive design.

What is the grayscale-first workflow for UI design?▼

The grayscale-first workflow involves designing interfaces without color initially to establish robust visual hierarchy and spacing, ensuring visual polish before applying color and shadow guidance.

How do I fix common visual hierarchy and spacing problems in web interfaces?▼

Fix visual hierarchy and spacing problems by establishing a simple spacing and typography system, applying actionable tactical rules to diagnose layout inconsistencies and achieve polished web and mobile interfaces.

Can I apply these UI design rules to both web and mobile interfaces?▼

Yes, the tactical UI design rules scope covers both web and mobile interfaces, allowing you to diagnose and fix layout, typography, color, borders, and shadow issues across platforms for consistent visual hierarchy.

What is the best way to establish design system consistency for typography and color?▼

Establish design system consistency by enforcing a simple spacing and typography system alongside color and shadow guidance, applying tactical rules to optimize visual hierarchy across interfaces.

When should I not use a grayscale-first approach for interface design?▼

Avoid a grayscale-first approach if your interface relies heavily on color for semantic meaning or accessibility, as this method prioritizes layout and visual hierarchy optimization before applying color guidance.

Related Skills

Explore More Design & Creative Skills→
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
amo-tech-aiamo-tech-ai

UI Design Implementation

Implement responsive UI layouts with Tailwind CSS and shadcn/ui components.

Community
Intermediate