Search everything...

Stats

Actions

Available In

Help us improve

Share bugs, ideas, or general feedback.

refactoring-ui-skills - Claude Code Plugin | ClaudePluginHub

Plugin

refactoring-ui-skills

Name: refactoring-ui-skills
Author: gnurio

By gnurio

AI-powered UI design skills based on Refactoring UI principles. Evaluate and improve interface designs with expert-validated guidance.

npx claudepluginhub gnurio/refactoring-ui-plugin --plugin refactoring-ui-skills

Popularity

Stars

Top 25%

Med: 0·Avg: 274

Installs

Med: 0·Avg: 1

What's Inside

Skills11

build-color-palette

/03-build-color-palette

Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades

apply-consistent-spacing

/04-apply-consistent-spacing

Use systematic spacing with 25% minimum jumps, start with excess whitespace

design-button-hierarchy

/05-design-button-hierarchy

Create clear primary/secondary/tertiary action distinctions

eliminate-visual-clutter

/06-eliminate-visual-clutter

Remove unnecessary borders, backgrounds, shadows, decorations

design-empty-states

/07-design-empty-states

Create helpful, actionable zero-content states

Stats

Version1.0.0

LanguageJavaScript

Stars13

Forks1

MaintenanceGood

LicenseMIT

Last CommitApr 26, 2026

AddedApr 26, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge.

Available In

refactoring-ui-plugin

Help us improve

Share bugs, ideas, or general feedback.

README

Refactoring UI Skills

Ten structured AI skills for evaluating and improving UI designs — covering visual hierarchy, typography, color, spacing, buttons, clutter, empty states, shadows, contrast, and grouping. Use individual skills for targeted fixes or invoke the meta-refactor-ui orchestrator for a full design pass.

Attribution: These skills are based on the principles and methodology in Refactoring UI by Adam Wathan and Steve Schoger (© Tailwind Labs Inc.). This repository is an independent AI skill implementation and is not affiliated with or endorsed by Tailwind Labs.

Overview

This plugin packages 10 focused UI design skills plus a refactor-ui meta-skill that runs a full design pass. The skills cover visual hierarchy, typography, color, spacing, button hierarchy, visual clutter, empty states, shadows, contrast, and grouping.

Quick Start

Claude Code

/refactor-ui --design="path/to/design.md"
/establish-visual-hierarchy --input="design-description"

Codex

@refactor-ui --design="path/to/design.md"
@apply-typography-scale --context="marketing"

Cursor

/refactor-ui evaluate --file="design.md"
/refactor-ui fix --issues="visual-hierarchy"

See PLATFORM_GUIDE.md for platform-specific installation and usage.

Skills

#	Skill	Purpose	Type
01	Establish Visual Hierarchy	Determine what draws attention first	Evaluative
02	Apply Typography Scale	Create hierarchy with font sizes, weights, and colors	Generative
03	Build Color Palette	Define grey, primary, and accent color scales	Generative
04	Apply Consistent Spacing	Use systematic spacing and rhythm	Generative
05	Design Button Hierarchy	Separate primary, secondary, and tertiary actions	Generative
06	Eliminate Visual Clutter	Remove unnecessary decoration	Corrective
07	Design Empty States	Create useful zero-content states	Generative
08	Use Shadows Appropriately	Use elevation functionally	Corrective
09	Manage Color Contrast	Preserve readability and accessibility	Evaluative
10	Group Related Elements	Use proximity to show relationships	Generative

Repository Layout

.
├── .claude-plugin/plugin.json
├── .codex-plugin/plugin.json
├── .cursor-plugin/plugin.json
├── adapters/
├── examples/
├── skills/
│   ├── 01-establish-visual-hierarchy/SKILL.md
│   ├── ...
│   └── meta-refactor-ui/SKILL.md
├── tests/
├── PLATFORM_GUIDE.md
├── README.md
├── SKILL.md
└── skills.json

Development

Validate the skill layout:

bash tests/validate-skills.sh

Check platform detection:

node -e "console.log(require('./adapters/platform-adapter').getPlatformDisplayName())"

License

These skills are based on Refactoring UI by Adam Wathan and Steve Schoger (© Tailwind Labs Inc.). This repository is not affiliated with or endorsed by Tailwind Labs.

Similar Plugins

ui-design

13·

Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.

2mo

v1.0.0

sethdford

bencium-controlled-ux-designer

228·3·

Expert UI/UX design guidance for unique, accessible interfaces. Always-ask-first protocol for visual decisions, colors, typography, layouts.

3mo

v1.0.0

bencium

ui-ux-pro-max

80.0k·1.6K·

UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

2mo

v2.5.0

nextlevelbuilder

fullstack-dev-skills

9.3k·509·

Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.

v0.4.15

Jeffallan

brainstorming-skill

45·447·

This skill should be used when users need to generate ideas, explore creative solutions, or systematically brainstorm approaches to problems. Use when users request help with ideation, content planning, product features, marketing campaigns, strategic planning, creative writing, or any task requiring structured idea generation. The skill provides 30+ research-validated prompt patterns across 14 categories with exact templates, success metrics, and domain-specific applications.

2mo

v1.1.7

Jamie-BitFlight

godot-skills

30·370·

Develop, test, build, and deploy Godot 4.x games with Claude Code. Includes GdUnit4 testing, web/desktop exports, CI/CD pipelines, and deployment to Vercel/GitHub Pages/itch.io.

4mo

v1.0.0

Randroids-Dojo

Help us improve

Find plugins for your project

Help us improve

refactoring-ui-skills

Popularity

What's Inside

Help us improve

Health & Quality

Confidence

README

Refactoring UI Skills

Overview

Quick Start

Claude Code

Codex

Cursor

Skills

Repository Layout

Development

License

Similar Plugins

ui-design

bencium-controlled-ux-designer

ui-ux-pro-max

fullstack-dev-skills

brainstorming-skill

godot-skills

More by gnurio

tufte-vdqi

memetics-plugin

porter-strategy-skills

Refactoring UI Skills

Overview

Quick Start

Claude Code

Codex

Cursor

Skills

Repository Layout

Development

License