claudecodex

refactoring-ui-skills

AI-powered UI design skills based on Refactoring UI principles.

456 on GitHubby Refactoring UI Expertv1.0.0MITupdated 6 months ago
/

Plugin refactoring-ui-skills from marketplace refactoring-ui-plugin in gnurio/refactoring-ui-plugin. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (11)

  • 01-establish-visual-hierarchy

    Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies

  • 02-apply-typography-scale

    Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors

  • 03-build-color-palette

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

  • 04-apply-consistent-spacing

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

  • 05-design-button-hierarchy

    Create clear primary/secondary/tertiary action distinctions

  • 06-eliminate-visual-clutter

    Remove unnecessary borders, backgrounds, shadows, decorations

  • 07-design-empty-states

    Create helpful, actionable zero-content states

  • 08-use-shadows-appropriately

    Add depth only when functionally necessary (elevation, not decoration)

  • 09-manage-color-contrast

    Ensure WCAG AA accessibility and readability

  • 10-group-related-elements

    Use proximity and spacing to show relationships

  • meta-refactor-ui

    Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes

View source on GitHub refactoringui.com

Similar plugins

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

ui-design

claudecodex

Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns

9 skills · 4 commands · 3 agents

wshobson/agents 42,461

product-skills

claude

14 bundled product skills with 19 Python tools: product-skills fork-orchestrator with continuous-discovery loop (deterministic 16-lane router, Torres cadence tracker, OST linter, /cs-product + /cs-grill-product + /cs-product-loop), product manager toolkit (RICE, PRDs), product strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, product analytics, experiment designer, product discovery, roadmap communicator, spec-to-repo, design-qa (UI finish gate: inert controls, missing states, rendered WCAG 2.2 checks). Companion standalone plugins: agile-product-owner, code-to-prd, apple-hig-expert, research-summarizer, design-qa.

14 skills · 3 commands · 1 agent · hooks

alirezarezvani/claude-skills 29,725

interface-design

claude

Design engineering for Claude Code. Build production-grade interfaces with strong visual hierarchy, review craft against an approval bar, and strip AI design slop. Maintains design decisions across sessions.

1 skill

Dammyjay93/interface-design 5,967

designlang

claude

Thirteen slash commands wrapping the designlang CLI: /extract (full design language → DTCG, Tailwind, Figma), /site (crawl a whole site → one canonical design system + consistency grade), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies — brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book — 13 chapters, hand-off-ready), /pair (fuse two designs across configurable axes — colours from one site, typography from another), /studio (live token-editor with component preview + export), /verify (rebuild from tokens and pixel-diff vs live for a fidelity score), /fidelity (score a clone vs the original — visual pixel-diff + motion fidelity — with a ranked correction plan), /gallery (build a shareable static gallery of measured clones).

2 skills · 14 commands

Manavarya09/design-extract 5,068

figma-maxxing

claudecodex

Agent skills for real Figma files: Plugin API gotchas, checks before and after every write, comments to verified fixes, handoff gate.

8 skills

davepoon/buildwithclaude 3,741

Maintain refactoring-ui-skills?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex pluginslisted