redesign-existing-projects

Redesign Skill

When to Use

• Use when the user asks to redesign, restyle, modernize, polish, or improve an existing website or app UI.
• Use when the task is to audit current frontend code and make targeted visual improvements without changing the product architecture.
• Use when the design feels generic, AI-generated, poorly spaced, visually flat, or missing responsive, interactive, loading, empty, or error states.

Example

User request:

Use @redesign-existing-projects for this task: Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.

Limitations

• This skill upgrades existing UI but does not authorize framework migrations, information-architecture rewrites, or product-scope expansion by default.
• Preserve working behavior, routing, data flows, accessibility semantics, and tests while making visual changes.
• Validate redesigned screens in the actual app across supported browsers and viewport sizes before considering the work complete.

How This Works

When applied to an existing project, follow this sequence:

1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.

3