Skill

redesign-existing-projects

Audit-first frontend redesign skill for upgrading existing websites and apps with low-risk, stack-preserving improvements instead of rewrites.

Install

npx claudepluginhub leolionart/claude-skills --plugin redesign-skill

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill for existing products that already ship code and need better visual quality without a rewrite. Reuse the same design brain as `design-ui`, but operate in audit-first mode: scan, diagnose, then apply targeted fixes.

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.1k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

claude-code-plugin-release

1 file

Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.

claude-mem

64.7k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitMar 19, 2026

Actions

View Source View Plugin View on GitHub View README

Redesign skill

Purpose

Use this skill for existing products that already ship code and need better visual quality without a rewrite. Reuse the same design brain as design-ui, but operate in audit-first mode: scan, diagnose, then apply targeted fixes.

Use this skill when

Improve an existing site, app, dashboard, or marketing page already present in the repo.
Keep the current framework, styling system, and feature set.
Want reviewable, low-risk visual upgrades instead of creating a new design language from scratch.

Do not use this skill when

Building a new UI from scratch. Use design-ui.
The request is mainly about picking a style preset like minimalist/editorial or premium polish for new work. Use design-ui modes.

Workflow

Scan — Read the codebase. Identify framework, styling method, component patterns, and missing states.
Diagnose — Audit typography, color, surfaces, layout, interactivity, content realism, iconography, and code quality.
Fix — Apply the smallest set of changes that noticeably improves the design without breaking behavior.
Verify — Confirm the stack still fits, imports are real, and upgrades remain reviewable.

Design lens

Borrow the same core standards as design-ui:

Avoid generic AI defaults such as Inter, purple/blue AI gradients, repetitive 3-card rows, card spam, and dead-flat motion.
Use one primary design language with limited supporting treatments.
Prefer mobile-safe layouts, explicit states, and GPU-safe animation.

Audit priorities

Fix in this order for best impact with low risk:

Font and hierarchy
Color palette cleanup
Hover, active, focus, loading, empty, and error states
Layout spacing, container width, and alignment rhythm
Replacement of cliché component patterns
Final surface and motion polish

Low-risk redesign rules

Work with the existing stack; do not migrate frameworks or styling systems.
Keep changes focused and reviewable.
Check dependencies before importing libraries.
Prefer targeted improvements over sweeping rewrites.
Preserve functionality and content structure unless the task explicitly allows deeper redesign.

Relationship to design-ui

design-ui = canonical skill for new UI work and style-direction requests.
redesign-skill = audit-first workflow for improving existing shipped interfaces with minimal disruption.