Skills

Redesign

Upgrade an existing website or app to premium quality without breaking functionality.

Install

npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -a claude-code -y
Category
Design
Updated
8d ago
License
MIT
Context cost
Lightabout 582 tokens
Runs scripts
No, instructions only

What it does

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.

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.

Read the whole SKILL.md on GitHub

More in Design