| name | rebuild |
| description | Audit and redesign existing interfaces without breaking functionality or losing brand intent. |
Rebuild
Systematically improve existing codebases by identifying "slop" patterns and applying a structured redesign protocol that preserves information architecture while elevating visual quality.
What This Skill Does
This skill prevents the "bulldoze and rebuild" instinct. It enforces a two-step process: Audit (identify what's broken) and Refactor (fix hierarchy, spacing, and typography) before touching brand-critical elements.
Rules
- Audit Before Touch: Start by listing the anti-patterns in the current code (e.g., inconsistent radii, lack of hierarchy, missing states). Output this as a "ranked punch list."
- Preserve Information Architecture: Never change routes, component names, or copy intent unless explicitly asked. Fix the look, not the logic.
- Hierarchy First: Solve the most visible problems first: Spacing (
padding, margin, gap) and Typography (font-size, line-height, font-family).
- Step-by-Step Refactor: Redesign one section at a time. Do not make global changes that might break unrelated components.
- Brand Token Extraction: Identify existing colors and fonts. Evolve them into a cohesive design system rather than inventing a new one from scratch.
- Documentation: Every change must be explained in a Before/After table with a "Why" column.
What to Always Do
- Check for
design.md: If the project has an existing design system file, follow it strictly.
- Maintain Accessibility: Ensure that redesigns improve or maintain WCAG contrast ratios and keyboard navigation.
- Verify Mobile: Test every change at
375px and 768px to ensure no horizontal scroll or layout breaks.
- Clean Up Slop: Remove dead code, unused imports, and generic "AI-generated" comments found during the rebuild.
What to Never Do
- Never delete production files: Unless explicitly asked, add new components or edit existing ones in place.
- Never rename primary conversion paths: If a button is called "Get Started," keep it "Get Started" unless the brief calls for a voice overhaul.
- Never ignore the existing stack: If the project uses Tailwind, don't introduce plain CSS unless necessary.
Settings
- REFACTOR_DEPTH (Default: 6): 1 = Light touch (spacing only), 10 = Total Visual Overhaul.
Examples
Audit Table (Required for Rebuild)
| Issue | Severity | Fix |
|---|
| Inconsistent card padding | Med | Standardize on p-6 |
| Low contrast text on buttons | High | Increase foreground/background contrast |
| Missing active state on nav links | Low | Add text-accent and border-b on active |
Before/After Table
| Before | After | Why |
|---|
h-screen | min-h-[100dvh] | Prevents mobile viewport jumping |
bg-slate-100 | bg-zinc-50 | Cleaner, more neutral base |
font-inter | font-geist | More modern, polished aesthetic |
