What you can do with Refactoring UI Skill

4 use cases

• Review a UI page for design problems before release

  Have the Skill scan a page and return prioritized findings tied to specific Refactoring UI rule numbers.

  • Refactoring UI Skill
  • Claude Code
  • Software and DevOps
  • Intermediate
  View prompt

  Using the refactoring-ui skill from the edisonmbli/refactoring-ui-skill repo, review the page at <path-to-page-file> across hierarchy, spacing, typography, color, depth, imagery, and finishing. Return findings sorted by severity, each with its rule number, current state, and suggested fix. Verify that every finding cites a rule number from the skill.

  Share Save

• Create a design system for a project that has none

  Generate design tokens, a Tailwind or framework-agnostic theme, CSS, a DESIGN.md guide, and a preview page.

  • Refactoring UI Skill
  • Claude Code
  • Software and DevOps
  • Intermediate
  View prompt

  Using the refactoring-ui skill in the edisonmbli/refactoring-ui-skill repo, create a design system for the product described in <product-brief>, using <stack-name> as the stack. Return token JSON, the matching theme file, framework-agnostic CSS, DESIGN.md, and preview.html. Verify that every text-on-background color pair meets the contrast check.

  Share Save

• Give Codex or Cursor the design rules before it writes UI

  Install the rulebook as an AGENTS.md or Cursor rule so the assistant follows it while generating styles.

  • Refactoring UI Skill
  • Codex
  • Cursor
  • Software and DevOps
  • Intermediate
  View prompt

  Using the design rules in the .refactoring-ui folder from the edisonmbli/refactoring-ui-skill repo, build the screen described in <screen-brief> in <project-path>. Return the changed files and a short list of which rules were applied. Verify that no hard-coded palette color classes appear in the output.

  Share Save

• Find out why a color or spacing choice looks wrong

  Ask the Skill to explain the mechanism behind a design problem and point to the matching rule.

  • Refactoring UI Skill
  • Claude Code
  • Software and DevOps
  • Beginner
  View prompt

  Using the refactoring-ui skill from the edisonmbli/refactoring-ui-skill repo, explain why <element-description> looks wrong in <design-context>. Return the underlying mechanism and the matching rule number. Verify that the explanation names the mechanism, not only the symptom.

  Share Save

How to use Refactoring UI Skill

1. Check you have what it needs: Claude Code, or another AI coding assistant that can read files in the project; Git, to clone the repository; Python 3.9 or newer for the scripts (no third-party packages needed).
2. Open edisonmbli/refactoring-ui-skill on GitHub and read the README and license.
3. Install the plugin in Claude Code by running /plugin marketplace add edisonmbli/refactoring-ui-skill, then /plugin install refactoring-ui.
4. Open your project in Claude Code and name the page or component you want reviewed.
5. Tell the assistant which parts of the design are intentional, such as a linear spacing scale or a low-contrast brand color, so those are flagged as decisions rather than defects.
6. Read the findings table, starting with P0 items, and apply the suggested class or value changes that fit your existing token names.

These steps come from our top use case, Review a UI page for design problems before release, which also has a copy-paste agent prompt.

Refactoring UI Skill alternatives · Best AI repos for Software and DevOps

About this repo

• Who it is forFront-end developers and product builders who use an AI coding assistant to write HTML, CSS, or Tailwind and want the output to follow solid visual design rules.
• Why it is hot
• LanguagePython
• Sourcegithub.com/edisonmbli/refactoring-ui-skill · Back to Hot repos

Requirements

• Claude Code, or another AI coding assistant that can read files in the project
• Git, to clone the repository
• Python 3.9 or newer for the scripts (no third-party packages needed)
• A web project with HTML, CSS, or a framework such as Tailwind, for the review and token steps

Related repos

• Trended earlier Omarchy Local AI Local AI is an Omarchy plugin that runs a validated local model on your own GPU or CPU in Docker and opens coding agents on it.
• Trended earlier Hermes Plan Mode A plugin for Hermes Agent that enforces a Claude Code-style plan mode: the agent explores read-only, writes a plan file, and makes changes only after you approve the plan.
• Trended earlier Agent 2 Agent-2 is a Python agent harness that runs on your machine with your own Gemini API keys and can write code, run terminal commands, manage files, and coordinate tools.