Redesign Existing Projects

This skill is a diagnostic. It finds what is wrong with an existing interface and fixes it in place.

Design values

All concrete values (fonts, background colors, spacing, radius, icon sets, motion timing) live in the Design Values section at the bottom of this file. That section is the single source of truth. The audit below tells you what to look for; Design Values tells you what to replace it with.

Never invent a font, hex value, spacing number, radius, or easing curve that is not in Design Values. If a situation is not covered there, ask rather than guessing.

To adapt this skill to a different design system, edit only the Design Values section. The entire audit follows it automatically.

How this works

1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, CSS modules), and the current design patterns.
2. Diagnose — Run the full audit below. List every generic pattern, weak point, and missing state you find. Report before fixing.
3. Fix — Apply targeted upgrades inside the existing stack, in the Fix Priority order. Do not rewrite from scratch. Improve what is there.