# AI use cases for Refactoring UI Skill (edisonmbli/refactoring-ui-skill) Repo: [edisonmbli/refactoring-ui-skill](https://github.com/edisonmbli/refactoring-ui-skill) | Use cases: 4 | Page: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/ A Claude Skill that turns the book Refactoring UI into 151 checkable design rules, used to review web interfaces, generate design tokens, and guide AI coding assistants. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Review a UI page for design problems before release: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/review-ui-page-for-design-issues/ - Create a design system for a project that has none: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/generate-design-system-from-scratch/ - Give Codex or Cursor the design rules before it writes UI: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/load-design-rules-before-ai-writes-ui/ - Find out why a color or spacing choice looks wrong: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/look-up-why-a-design-choice-fails/ ## How to review a UI page for design problems before release with Refactoring UI Skill Repo: [edisonmbli/refactoring-ui-skill](https://github.com/edisonmbli/refactoring-ui-skill) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Have the Skill scan a page and return prioritized findings tied to specific Refactoring UI rule numbers. **Who it is for:** A developer or designer who has a settings page, dashboard, or form that feels slightly wrong but cannot name the cause, and wants a structured review. **The problem:** AI-generated or hand-built screens often have spacing, hierarchy, color, and depth issues that are hard to spot one by one. **The outcome:** A list of findings sorted by severity (for example P0 and P1), each with a rule number, the current state, and a suggested fix, plus notes on system-level gaps. ### Steps 1. Install the plugin in Claude Code by running `/plugin marketplace add edisonmbli/refactoring-ui-skill`, then `/plugin install refactoring-ui`. 2. Open your project in Claude Code and name the page or component you want reviewed. 3. 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. 4. Read the findings table, starting with P0 items, and apply the suggested class or value changes that fit your existing token names. 5. Re-run the review after changes to confirm the findings are resolved. ### Prompt to paste into your agent ```text Using the refactoring-ui skill from the edisonmbli/refactoring-ui-skill repo, review the page at 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. ``` ### Caveat The README says visual checks need a browser tool, and without one the findings come only from source code and are labeled code-only. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/review-ui-page-for-design-issues/ ## How to create a design system for a project that has none with Refactoring UI Skill Repo: [edisonmbli/refactoring-ui-skill](https://github.com/edisonmbli/refactoring-ui-skill) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Generate design tokens, a Tailwind or framework-agnostic theme, CSS, a DESIGN.md guide, and a preview page. **Who it is for:** A solo developer or small team starting a new web product that has no written visual rules, or that needs a consistent palette and spacing scale. **The problem:** Without tokens, colors, spacing, and type sizes drift across screens, and the picks tend to be arbitrary. **The outcome:** Five deliverables: token JSON, a theme matched to your Tailwind version or a framework-agnostic CSS file, a DESIGN.md guide, and a preview.html to share. ### Steps 1. Install the plugin with `/plugin marketplace add edisonmbli/refactoring-ui-skill` and `/plugin install refactoring-ui`. 2. Answer the short setup questions about your product, the tone you want, and your tech stack. You can also give a reference site URL. 3. Let the skill generate the palette. The palette script is pure Python, so run it with Python 3.9 or newer; if Python is not available, follow the manual palette steps the README describes. 4. Check that each text and background color pair passes the contrast check the skill runs before delivery. 5. Copy the token JSON and theme into your project and open preview.html to review the system with your team. ### Prompt to paste into your agent ```text Using the refactoring-ui skill in the edisonmbli/refactoring-ui-skill repo, create a design system for the product described in , using 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. ``` ### Caveat The README says the skill does not install Tailwind, migrate your styles, or replace an existing design system, so you must merge the outputs yourself. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/generate-design-system-from-scratch/ ## How to give Codex or Cursor the design rules before it writes UI with Refactoring UI Skill Repo: [edisonmbli/refactoring-ui-skill](https://github.com/edisonmbli/refactoring-ui-skill) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Install the rulebook as an AGENTS.md or Cursor rule so the assistant follows it while generating styles. **Who it is for:** A developer who uses Codex or Cursor to generate front-end code and keeps getting centered-everything layouts, one spacing value, and indigo buttons. **The problem:** Generated UI is built piece by piece, so global design problems are not caught while the code is being written. **The outcome:** The assistant reads the design rules at session start, uses placeholder color tokens instead of hard-coded palette colors, and labels extension rules that come from outside the book. ### Steps 1. Clone the repository into the project folder with `git clone https://github.com/edisonmbli/refactoring-ui-skill.git .refactoring-ui`. 2. For Codex or other tools that read AGENTS.md, run `cp .refactoring-ui/templates/AGENTS.md AGENTS.md`, or merge the file into your existing AGENTS.md. 3. For Cursor, run `mkdir -p .cursor/rules && cp .refactoring-ui/templates/cursor/refactoring-ui.mdc .cursor/rules/`. 4. Start a new session and ask the assistant to build a small screen, then check that it uses token names such as bg-{primary}-600 rather than a fixed palette class. 5. Ask for a review pass after generation to catch issues the generator missed. ### Prompt to paste into your agent ```text Using the design rules in the .refactoring-ui folder from the edisonmbli/refactoring-ui-skill repo, build the screen described in in . 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. ``` ### Caveat The README says Cursor loads the rule by file-type matching and that these paths change often, so check the current tool documentation if the file is not picked up. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/load-design-rules-before-ai-writes-ui/ ## How to find out why a color or spacing choice looks wrong with Refactoring UI Skill Repo: [edisonmbli/refactoring-ui-skill](https://github.com/edisonmbli/refactoring-ui-skill) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README Ask the Skill to explain the mechanism behind a design problem and point to the matching rule. **Who it is for:** A developer or product manager who sees a design that looks off, such as gray text on a colored banner, and wants the reason, not a guess. **The problem:** A common fix may be wrong, and the cause can be hidden by a context where the rule looks fine. **The outcome:** A plain explanation of the mechanism and the rule reference, so the reader can decide on the change. ### Steps 1. Install the plugin with `/plugin marketplace add edisonmbli/refactoring-ui-skill` and `/plugin install refactoring-ui`. 2. Describe the element and what looks wrong, and include a screenshot or the relevant CSS if you have it. 3. Read the explanation, which covers the mechanism behind the rule and the rule reference. 4. Apply the fix that matches the mechanism in your own tokens. ### Prompt to paste into your agent ```text Using the refactoring-ui skill from the edisonmbli/refactoring-ui-skill repo, explain why looks wrong in . Return the underlying mechanism and the matching rule number. Verify that the explanation names the mechanism, not only the symptom. ``` ### Caveat The README says this Skill is an unofficial project, not a substitute for reading the book, and it has no affiliation with the book's authors. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/edisonmbli-refactoring-ui-skill/look-up-why-a-design-choice-fails/