skills.rest
gnurio
gnurioCOMMUNITY
Explore all skills by this author →
Website𝕏@nurijanianGitHub

refactor-ui

Analyze UI designs against Refactoring UI principles and generate prioritized JSON reports.

240|11|Updated Apr 26, 2026
Search Tags:#typography#accessibility#design-review#color-contrast#visual-hierarchy#ui-audit#prioritized-fixes
One-click install
npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill refactor-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-ui
Source: https://github.com/gnurio/refactoring-ui-plugin/tree/main/skills/meta-refactor-ui
Command: npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill refactor-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you identify UI design issues across multiple Refactoring UI principles and turn them into a prioritized set of actionable improvements.

Core Features & Use Cases

  • Comprehensive multi-skill assessment: Reviews a design against visual hierarchy, typography scale, color palette, spacing rhythm, button hierarchy, visual clutter, empty states, shadows, color contrast, and grouping.
  • Prioritized, severity-based recommendations: Consolidates findings, deduplicates repeated issues, and ranks fixes by impact.
  • Mode-driven outputs: Produces quick PASS/FAIL-only results, full PASS-with-rationale deep analysis, or fix-ready instructions with before/after examples.

Quick Start

Run the refactor-ui orchestrator with your design description so it returns an overall score and a prioritized list of specific fixes.

Frequently Asked Questions about refactor-ui

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

FAQPage Schema
How do I audit a UI design for visual hierarchy and typography issues?▼

To audit a UI design for visual hierarchy and typography issues, you can analyze text descriptions and optional screenshots against Refactoring UI principles to generate a consolidated assessment with prioritized fixes.

What is the best way to prioritize UI design fixes for accessibility and color contrast?▼

The best way to prioritize UI design fixes for accessibility and color contrast is to aggregate violations by severity, deduplicate overlapping issues, and generate a ranked list of prioritized recommendations.

Can I review dashboards and marketing pages for spacing rhythm and visual clutter?▼

Yes, you can review dashboards and marketing pages for spacing rhythm and visual clutter by applying multi-skill UI audit principles to text descriptions and screenshots to identify specific design improvements.

Does the UI audit generate actionable before and after examples for button hierarchy?▼

Yes, the UI audit generates actionable before and after examples for button hierarchy by operating in a fix-ready mode that outputs instructions alongside a structured JSON report including an overall score and prioritized fixes.

How do I get a quick PASS or FAIL assessment for empty states and color palette?▼

To get a quick PASS or FAIL assessment for empty states and color palette, you can run a mode-driven UI audit that produces quick results evaluating specific Refactoring UI principles without deep rationale.

Related Skills

Explore More Design & Creative Skills→
currentsuspectcurrentsuspect

frontend-design-ultimate

Generate static websites from text descriptions using React, Tailwind CSS, and shadcn/ui.

Community
Advanced
HAR5HA-7663HAR5HA-7663

critique

Quantify UX issues and generate prioritized Nielsen heuristics reports.

Community
Advanced
ScivorScivor

design-review

Audit live sites for typography, spacing, and hierarchy consistency.

Community
Advanced
vignesh2027vignesh2027
6

ui-ux-designer

Audit interfaces against WCAG 2.1 AA and provide UX critique.

Community
Intermediate