Redesign Skill

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. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

Design Audit

Diagnose by running every rule in references/ui-anti-slop.md (§1 Typography → §9 Strategic Omissions) as a checklist against the existing code. For each rule, record whether the current build violates it. The reference is the full audit superset — every generic-AI-pattern, weak-point, and missing-state check formerly listed here lives there now, so new builds and polish passes get the same comprehensive list. List every violation found before moving to Fix.

Upgrade Techniques

When upgrading a project, pull from these high-impact techniques to replace generic patterns:

Typography Upgrades

• Variable font animation. Interpolate weight or width on scroll or hover for text that feels alive.
• Outlined-to-fill transitions. Text starts as a stroke outline and fills with color on scroll entry or interaction.
• Text mask reveals. Large typography acting as a window to video or animated imagery behind it.

Layout Upgrades

• Broken grid / asymmetry. Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
• Whitespace maximization. Aggressive use of negative space to force focus on a single element.
• Parallax card stacks. Sections that stick and physically stack over each other during scroll.
• Split-screen scroll. Two halves of the screen sliding in opposite directions.

Motion Upgrades

• Smooth scroll with inertia. Decouple scrolling from browser defaults for a heavier, cinematic feel.
• Staggered entry. Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
• Spring physics. Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
• Scroll-driven reveals. Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.

Surface Upgrades

• True glassmorphism. Go beyond backdrop-filter: blur. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
• Spotlight borders. Card borders that illuminate dynamically under the cursor.
• Grain and noise overlays. A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
• Colored, tinted shadows. Shadows that carry the hue of the background rather than using generic black.

Fix Priority

Apply changes in this order for maximum visual impact with minimum risk:

1. Font swap — biggest instant improvement, lowest risk
2. Color palette cleanup — remove clashing or oversaturated colors
3. Hover and active states — makes the interface feel alive
4. Layout and spacing — proper grid, max-width, consistent padding
5. Replace generic components — swap cliche patterns for modern alternatives
6. Add loading, empty, and error states — makes it feel finished
7. Polish typography scale and spacing — the premium final touch

Rules

• Work with the existing tech stack. Do not migrate frameworks or styling libraries.
• Do not break existing functionality. Test after every change.
• Before importing any new library, check the project's dependency file first.
• If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
• If the project has no framework, use vanilla CSS.
• Keep changes reviewable and focused. Small, targeted improvements over big rewrites.