skills.rest
tillysoso
tillysosoCOMMUNITY
Explore all skills by this author →
GitHub

refactoring-ui

Apply grayscale-first design principles to review and improve frontend UI components.

Updated Sep 10, 2025
Search Tags:#typography#ui-design#spacing#color-system#visual-hierarchy#frontend-review
One-click install
npx skills add https://github.com/tillysoso/mv1 --skill refactoring-ui-tillysoso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/tillysoso/mv1/tree/main/.claude/skills/refactoring-ui
Command: npx skills add https://github.com/tillysoso/mv1 --skill refactoring-ui-tillysoso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI often suffers from inconsistent hierarchy, spacing, and color systems. Designers and developers struggle to maintain visual coherence across components without a unified approach.

Core Features & Use Cases

  • Apply a grayscale-first design approach to component design and visual reviews.
  • Score UI designs 0-10 against a set of design principles to identify actionable improvements.
  • Use during code reviews, component design sessions, and visual audits to communicate changes and maintain consistency.

Quick Start

Ask it to review a UI component and propose actionable visual improvements.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I improve frontend UI visual hierarchy and spacing consistency?▼

Apply professional visual design principles to score UI designs 0-10, identifying actionable improvements for spacing, typography, and color systems. This enforces a grayscale-first approach to maintain visual coherence across frontend components.

What is a grayscale-first design approach for web interfaces?▼

A grayscale-first design approach establishes spacing, typography, and shadows before applying color to web interfaces. It enforces consistent, scalable visual hierarchy across frontend components.

How do I score UI designs to identify actionable visual improvements?▼

Score UI designs 0-10 against professional visual design principles to identify actionable improvements. This evaluates visual hierarchy, spacing, and color systems to communicate changes during component design.

Can I use design principles during frontend code reviews and visual audits?▼

You can apply professional visual design principles during frontend code reviews and visual audits to evaluate component designs against spacing, typography, and shadow guidelines, maintaining visual coherence across projects.

Does this approach work for maintaining color systems across multiple web components?▼

It maintains color systems across web components by enforcing a grayscale-first system with specific color, typography, and shadow guidelines, ensuring consistent, scalable visual hierarchy across projects.

Related Skills

Explore More Design & Creative Skills→
Maitreya04Maitreya04

refactoring-ui

Audit frontend UIs and apply design-system rules for spacing, typography, and color.

Community
Advanced
julianromlijulianromli

quieter

Reduce visual intensity in branding, UI, and marketing designs.

Community
Advanced
CANTAGESTUDIOCANTAGESTUDIO
3

aesthetic-form-composition

Analyze eye path, balance, rhythm, layering, and proportion to derive compositional rules.

Community
Intermediate
KrismithReddy12KrismithReddy12

design-review

Audit web interfaces for visual inconsistencies, spacing issues, and hierarchy problems.

Community
Advanced