rebuild

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

1. 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."
2. Preserve Information Architecture: Never change routes, component names, or copy intent unless explicitly asked. Fix the look, not the logic.
3. Hierarchy First: Solve the most visible problems first: Spacing (padding, margin, gap) and Typography (font-size, line-height, font-family).
4. Step-by-Step Refactor: Redesign one section at a time. Do not make global changes that might break unrelated components.
5. Brand Token Extraction: Identify existing colors and fonts. Evolve them into a cohesive design system rather than inventing a new one from scratch.
6. 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