How do I install the Redesign skill?

Run npx skillmds@latest add gabrielmoreira/redesign in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Redesign safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Redesign?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Redesign free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Redesign?

gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Redesign by gabrielmoreira — Agent Skill

Name: Redesign
Rating: 4.2 (5 reviews)
Author: gabrielmoreira

Redesign

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.

gabrielmoreira Updated Sep 21, 2026 17 repo stars

File contents

Skill: Redesign & Audit

Audit-first redesign that preserves behavior.

Steps

Read workflows/redesign-audit.md (the full Scan → Diagnose → Direct → Apply → Verify sequence + Output Completeness).
Scan the codebase: framework, styling method (→ route to the matching frameworks/ adapter), token reality, components, what must be preserved.
Diagnose with the Banned Defaults checklist (taste/design-taste.md) + the review rubric (design-review skill). Produce a prioritized findings table.
Direct: choose an archetype/system (apply-aesthetic skill) that fits the brand.
Apply in order — tokens first, then typography/spacing, then component states, then motion — without changing routes/data/markup semantics (except a11y fixes).
Verify: re-run design-review + a11y-audit; smoke-test every previously working flow; dark mode + responsive spot-check. Run scripts/validate_contrast.py on the token source and 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 scripts/lint_hardcodes.py that no page reintroduces off-theme values. Theme switches must come from the single token source, not page edits (.claude/rules/tokens-and-color.md → Single-Theme Consistency).

---name: redesigndescription: 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 & AuditAudit-first redesign that preserves behavior.## Steps1. Read `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 `frameworks/` adapter), token reality, components, what must be preserved.3. **Diagnose** with the Banned Defaults checklist (`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 `scripts/validate_contrast.py` on the token source and `scripts/lint_hardcodes.py` over the changed code.## GuardrailsNever 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 `scripts/lint_hardcodes.py` that no page reintroduces off-theme values. Theme switches must come from the single token source, not page edits (`.claude/rules/tokens-and-color.md` → Single-Theme Consistency).

Frequently asked questions