redesign · plugin87 — Claude Code skill for auditing and updating UI
This skill audits an existing interface and revises its design while preserving working features. Use it to refresh a website or app without changing its core behavior.
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a claude-codeWhat redesign does
The skill scans the project to identify its framework, styling approach, tokens, and components, then ranks the design issues it finds. It chooses a fitting visual system and applies changes in sequence: tokens first, followed by typography and spacing, component states, and motion. Routes, data, and markup semantics stay intact, except for accessibility fixes.
After the changes, it repeats design and accessibility reviews, tests previously working flows, and spot-checks dark mode and responsive layouts. The kit includes validate_contrast.py and lint_hardcodes.py. The kit’s token, workflow, and script files must be present; without them, the skill stops rather than guessing. For multi-page apps, it expects every page to use one shared token theme.
What it helps with
- spot generic design patterns in an existing interface
- refresh a UI while keeping working flows intact
- align multiple app pages around shared design tokens
- check contrast, accessibility, and hardcoded colors
Example prompts for the agent
- Audit this interface and refresh its design without breaking working features.
- Modernize the app’s visual style, then test the flows that already work.
- Use one shared theme across the pages and check contrast and accessibility.
How to install redesign
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a claude-code2Manually: put the files in place
~/.claude/skills/redesign/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/redesign/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a codex2Manually: put the files in place
.agents/skills/redesign/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a cursor2Manually: put the files in place
.cursor/skills/redesign/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills redesign2Manually: put the files in place
.github/skills/redesign/SKILL.md1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a gemini-cli2Platform CLI
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/redesignManually: put the files in place
.devin/skills/redesign/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill redesign -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about redesign
How do I install redesign in Claude Code?
Run npx skills add plugin87/ux-ui-agent-skills --skill redesign -a claude-code. The skill file is available at ~/.claude/skills/redesign/SKILL.md.
What does the redesign skill do?
It inspects an existing project, ranks design issues, and applies a visual refresh while preserving working behavior. It then checks the design, accessibility, and existing user flows.
What does redesign need to run?
It reads token, workflow, and script files from the kit. If the tokens directory is unavailable, it stops and points to npx ux-ui-agent-skills init or the plugin installation.
Source text
SKILL.md · MIT
---
name: redesign
description: Upgrade an existing website or app to premium quality without breaking functionality. Audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.
# `invocation:` was not a field Claude Code reads - unknown frontmatter keys are
# ignored without an error, so these six were auto-invocable the whole time they
# were marked user-only. This is the field that actually does it.
disable-model-invocation: true
---
# Skill: Redesign & Audit
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Audit-first redesign that preserves behavior.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/redesign-audit.md` (the full Scan → Diagnose → Direct → Apply → Verify sequence + Output Completeness).
2. **Scan** the codebase: framework, styling method (→ route to the matching `${CLAUDE_SKILL_DIR}/../../../frameworks/` adapter), token reality, components, what must be preserved.
3. **Diagnose** with the Banned Defaults checklist (`${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md`) + the review rubric (`design-review` skill). Produce a prioritized findings table.
4. **Direct**: choose an archetype/system (`apply-aesthetic` skill) that fits the brand.
5. **Apply** in order (tokens first, then typography/spacing, then component states, then motion) without changing routes/data/markup semantics (except a11y fixes).
6. **Verify**: re-run `design-review` + `a11y-audit`; smoke-test every previously working flow; dark mode + responsive spot-check. Run `${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py` on the token source and `${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py` over the changed code.
## Guardrails
Never sacrifice a working feature for aesthetics. Never ship a brand color that fails contrast. Never remove existing accessibility affordances. Deliver complete files, no placeholders.
## Single-theme consistency (critical for multi-page apps)
Consolidate to ONE shared token theme and make **every page** consume it. A redesign that leaves different pages on different palettes has failed. Replace per-page/ad-hoc colors with semantic tokens; verify with `${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py` that no page reintroduces off-theme values. Theme switches must come from the single token source, not page edits (`${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md` → Single-Theme Consistency).
© plugin87 · MIT · plugin87/ux-ui-agent-skills
Similar skills
Everything for Design →redesign by other authors comes first.
