Redesign skill

Skill: Redesign & Audit

Requirements

This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with npx ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 add copies the skill folder and nothing else. Installed that way, this skill runs in guidance-only mode: no gate runs, so it gives no verdict.

Step 0: is the kit here? Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent Skills kit is not installed here, so no gate ran and nothing below is measured." Then work from this file and general practice, under three rules. Do not guess or cite the contents of a kit file you could not open. State no measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not verified" where one would go. End with a line Skipped (kit not installed): that names every gate script this file tells you to run, then the install command above.

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).