gnurioCommunity·11 Agent Skills Included

refactoring-ui-plugin

Audit and fix UI designs with proven design principles

Audits interface designs against ten proven principles covering visual hierarchy, typography, color palettes, spacing, buttons, shadows, contrast, and empty states. Eliminates guesswork by scoring each design as pass or fail with specific, prioritized fixes instead of vague feedback. Runs a full design review in one pass or applies individual checks for targeted improvements.

240|11

↗

npx skills add gnurio/refactoring-ui-plugin --all -g -y

All Skills in This Repository (11)

Pure Emerald Level Indicators

📦 In Repo

gnurio

eliminate-visual-clutter

Audit decorative UI elements and output PASS/FAIL removal recommendations.

establish-visual-hierarchy

Rank UI elements by visual weight and provide PASS/FAIL assessments.

refactor-ui

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

design-empty-states

Generate empty-state UI copy with primary calls to action.

use-shadows-appropriately

Enforce functional elevation-based shadow choices across UI redesigns.

group-related-elements

Adjust UI spacing to communicate element grouping and produce pass/fail guidance.

manage-color-contrast

Verifies foreground and background colors meet WCAG AA contrast thresholds.

apply-typography-scale

Apply a hand-crafted UI typography hierarchy with font sizes, weights, and line-heights.

build-color-palette

Generate greys, primary, and accent color palettes with role assignments and contrast validation.

design-button-hierarchy

Map primary, secondary, and tertiary actions to distinct button visual treatments.

apply-consistent-spacing

Apply a systematic spacing scale to UI layouts with margin and padding values.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install Refactoring UI Skills?▼

Run `npx skills add gnurio/refactoring-ui-plugin --all -g -y` in your terminal to install all ten design skills globally.

How to run a full UI design audit?▼

Invoke the refactor-ui meta-skill with your design file or description, and it runs all ten checks in sequence and returns a prioritized list of fixes.

What design problems does this plugin catch?▼

It detects weak visual hierarchy, inconsistent typography, poor color contrast, cluttered layouts, ambiguous spacing, and confusing button priorities, then suggests concrete fixes.

Does it work with Claude Code, Codex, and Cursor?▼

Yes. The plugin ships with dedicated adapters for Claude Code, Codex, and Cursor, so the same skills run natively on all three platforms.

Do I need design experience to use these skills?▼

No. Each skill explains its pass and fail criteria in plain language, so developers and non-designers can apply professional design principles directly.