refactoring-ui

Name: refactoring-ui
Availability: InStock
Author: prapanch

Diagnose and fix visual defects in UI components using rule-based corrections.

Updated Aug 23, 2026

Search Tags:#typography #ui #accessibility #refactoring #color #spacing #visual-design

Ready to run

npx skills add https://github.com/prapanch/agent-forma --skill refactoring-ui-prapanch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/prapanch/agent-forma/tree/main/refactoring-ui
Command: npx skills add https://github.com/prapanch/agent-forma --skill refactoring-ui-prapanch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual designers and frontend engineers often struggle to diagnose why UI looks off. This skill captures the most common visual failure modes and provides explicit fixes to improve readability, hierarchy, spacing, and polish.

Core Features & Use Cases

A set of 10 visual correction rules addressing spacing, visual hierarchy, borders/shadows, color saturation, empty states, typography weight, interactive inputs, modals and overlays, mobile responsiveness, and motion.
Use cases include diagnosing card grids, form layouts, and component libraries to ensure consistent design language across products.

Quick Start

Apply the 10 visual correction rules to diagnose and fix spacing, hierarchy, borders, color saturation, typography, inputs, modals, and mobile layout in a UI component.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema

How do I fix visual UI issues like poor spacing and typography hierarchy in my components?▼

Fix visual UI issues by applying rule-based corrections for spacing, typographic hierarchy, borders, shadows, and color saturation to improve readability and polish in frontend components. This skill diagnoses common visual defects and provides explicit fixes for each failure mode.

What is the best way to diagnose why a UI card or form layout looks visually off?▼

Diagnose why a UI looks off by evaluating it against ten visual correction rules covering empty states, typography weight, and mobile responsiveness. This rule-based approach identifies common failure modes in card grids, form layouts, and component libraries.

Can I audit a design system for color saturation and interactive input consistency?▼

Yes, you can audit design systems to ensure a consistent design language by checking color saturation, interactive inputs, modals, and overlays. The skill provides explicit rules to correct visual inconsistencies across component libraries.

Does this UI refactoring approach cover mobile responsiveness and motion with accessibility considerations?▼

Yes, this UI refactoring approach covers mobile responsiveness and motion with accessibility considerations as part of its ten visual correction rules. It ensures that responsive layouts and interactions remain accessible while improving visual polish.

When should I use borders instead of shadows to improve visual hierarchy?▼

Use borders or shadows to improve visual hierarchy based on the specific rule-based corrections this approach applies to your UI components. The skill diagnoses which styling method best resolves visual defects and enhances readability.