{"id":"fba731ff-ac4b-4e35-81b6-ed3b7579af38","slug":"xxxxzb-refactoring-ui-skill","kind":"skill","name":"refactoring-ui-skill","summary":"Agent skill for Refactoring UI: 151 rules, nine-lens design audit, design tokens, brand personality, interface copy, and a 9-case evaluation suite.","owner":"xxxxzb","repoUrl":"https://github.com/xxxxzb/refactoring-ui-skill","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-21T09:04:23.000Z","addedAt":"2026-10-22T00:03:05.219Z","logoUrl":"https://avatars.githubusercontent.com/u/32010433?u=a4a6d55225ababd53435985eeaf0d5ced73b3357&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-26T02:39:16.791Z","sample":false,"url":"https://conduits.dev/tools/xxxxzb-refactoring-ui-skill","language":"Python","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# refactoring-ui\n\nA design rulebook and diagnostic layer for web UI, derived from *Refactoring UI* by Adam Wathan and Steve Schoger, with brand-personality and interface-copy extensions.\n\nInstalled at `~/.agents/skills/refactoring-ui`.\n\n## Install\n\nClone this repository directly into a skills directory. The repository root is the skill root:\n\n```bash\ngit clone <repository-url> ~/.agents/skills/refactoring-ui\n```\n\nFor Claude Code, use `~/.claude/skills/refactoring-ui`; for a project-level install, use `.agents/skills/refactoring-ui` inside the project.\n\n## What it does\n\n- **Builds design tokens** — palette generation, contrast checks, Tailwind v3/v4 theme output.\n- **Guides a new screen** — personality first, grayscale hierarchy, then color, depth, polish, copy.\n- **Refines or audits existing UI** — nine lenses, severity-ranked findings, every finding tied to a rule ID.\n- **Writes interface copy** — headlines, CTAs, errors, empty states, confirmations, onboarding.\n\nIt is a constraint layer, not an image generator: it decides what a design must obey and checks whether it did.\n\n## Layout\n\n| Path | Contents |\n|---|---|\n| `SKILL.md` | Index, routing, thirteen laws, four workflows, scope guard |\n| `references/01`–`08` | The book's chapters, in rule form (chapter 9 is folded into `SKILL.md`) |\n| `references/10` | Tailwind v3/v4 mapping for every rule |\n| `references/11` | Token interview, generation algorithm, output contract |\n| `references/12` | Component recipes |\n| `references/13` | Audit rubric: severity, finding schema, nine-lens sweep |\n| `references/14` | Antipatterns: symptom → rule, incl. AI-generated UI |\n| `references/15` | Extensions: dark mode, focus, motion, breakpoints |\n| `references/16` | Component-library token contracts |\n| `references/17` | **Brand personality**, domain anchors, layout/density, component variation |\n| `references/18` | **Interface copy**, AI-write tells, errors, empty states |\n| `references/19` | **Color psychology**, harmony, culture, saturation |\n| `references/20` | **Quick card**: scales, ten hard rules, triage checklist for one component |\n| `assets/starter-tokens.css` | Complete, contrast-verified starter set with semantic roles and dark mode |\n| `scripts/` | `generate_palette.py`, `check_contrast.py`, `emit_tokens.py` (stdlib only) |\n| `examples/` | Three worked before/after audits |\n| `eval/` | 9 fixtures, scorer, trigger set, evaluation docs |\n\n`00-coverage-matrix.md` maps all 151 book rules to their files. References 17–19 are extensions; they are labeled as such and are not part of the 151.\n\n## Usage\n\nThe skill triggers from its `description`. Typical requests:\n\n```\nReview this settings page. Diagnose only.\nThis page looks off — audit it against design rules.\nSet up a type scale, spacing scale, and color ramps for this app.\nWrite the empty state and error copy for this form.\nWhat should this product feel like? Give me a brand direction.\n```\n\nFor Workflows C and D, the agent loads `13-audit-rubric.md` first, renders at 1280 and 375 when possible, and returns a finding table. Each row carries a severity and a `§` rule ID.\n\n## Scripts\n\n```bash\nuv run python scripts/generate_palette.py --base '#0f7b6c' --json\nuv run python scripts/check_contrast.py --pair '#ffffff' '#bd4d28'\nuv run python scripts/emit_tokens.py assets/tokens.template.json --format v4 --out dist\n```\n\nPython 3.9+, no third-party dependencies. The palette algorithm has a manual fallback in `references/11-design-tokens.md`.\n\n## Evaluation\n\n```bash\nuv run python eval/score.py --self-check\nuv run python eval/score.py --dir eval/runs/<run-id>\n```\n\nSee `eval/README.md` for the fixtures, pass bar and trigger set.\n\n## Sources and license\n\nMIT. Rule architecture and reference set adapted from [`edisonmbli/refactoring-ui-skill`](https://github.com/edisonmbli/refactoring-ui-skill); personality and copy material adapted from [`jaywilburn/refactoring-ui-skill`](https://github.com/jaywilburn/refactoring-ui-skill); starter tokens and quick card adapted from [`s0xDk/refactoring-ui-skill`](https://github.com/s0xDk/refactoring-ui-skill). See `ATTRIBUTION.md` and `licenses/`.\n\nThis is an unofficial project. It is not affiliated with the book's authors, and it is not a substitute for reading *Refactoring UI*.\n"}