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.

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.