/ clone-site / README.md
README.md
1 # 🧬 Clone Site 2 3 **URL → Pixel-Perfect Next.js Replica in Minutes** 4 5 Point this skill at any website URL and it reverse-engineers the entire thing — design tokens, assets, interactions, responsive behavior — then rebuilds it as a production-ready Next.js app using parallel builder agents. 6 7 This isn't "screenshot → approximate HTML." This is computed-style extraction, section-by-section specification, and parallel construction with visual QA diffing against the original. 8 9 --- 10 11 ## What It Does 12 13 ``` 14 Input: "Clone yourcompany.com" 15 Output: Pixel-perfect Next.js app with real assets, exact CSS, working interactions 16 ``` 17 18 ### The Pipeline 19 20 1. **🔍 Reconnaissance** — Screenshots at desktop + mobile, extracts every design token (fonts, colors, spacing) via `getComputedStyle()`, downloads all assets (images, videos, SVGs, fonts), maps page topology 21 22 2. **🏗️ Foundation** — Sets up Next.js with the target's exact fonts, colors, and global styles. Configures Tailwind, shadcn/ui primitives, and any detected smooth scroll libraries (Lenis, Locomotive, etc.) 23 24 3. **📋 Component Specification** — Writes detailed spec files for each section with exact CSS values, interaction models (click-driven vs scroll-driven vs time-driven), multi-state behaviors, and responsive breakpoints 25 26 4. **⚡ Parallel Build** — Dispatches builder agents in isolated git worktrees, one per section (complex sections get split into sub-component agents). Extraction continues while builders work. 27 28 5. **🔗 Assembly & QA** — Merges all worktrees, wires up the page, runs visual diff comparison against the original at multiple viewports. Fixes discrepancies until pixel-perfect. 29 30 ### What Makes This Different 31 32 - **Computed styles, not guesses.** Every CSS value comes from `getComputedStyle()` on the live site — not "it looks like `text-lg`" 33 - **Behavior extraction.** Captures scroll-triggered animations, hover states, tab switching, parallax, sticky headers — not just static layouts 34 - **Parallel construction.** Builder agents work simultaneously in git worktrees. A 10-section page doesn't take 10x as long. 35 - **Specification files as contracts.** Every component gets a detailed spec file before any builder touches it. Auditable, reproducible, debuggable. 36 - **Multi-state capture.** Clicks every tab, scrolls through every trigger point, hovers every interactive element. Extracts ALL states, not just the default. 37 - **Visual QA pass.** Side-by-side comparison at desktop and mobile after assembly. Not "done" until it matches. 38 39 --- 40 41 ## Requirements 42 43 - **Claude Code** with Chrome MCP enabled (`claude --chrome`) 44 - **Node.js 20+** 45 - A Next.js + Tailwind v4 + shadcn/ui scaffold (the skill expects this as the base project) 46 47 ## Quick Start 48 49 ### 1. Set up the project scaffold 50 51 ```bash 52 npx create-next-app@latest my-clone --typescript --tailwind --app 53 cd my-clone 54 npx shadcn@latest init 55 npm install 56 ``` 57 58 ### 2. Add the skill to Claude Code 59 60 Copy `SKILL.md` to your Claude Code agents or skills directory. 61 62 ### 3. Clone a site 63 64 ``` 65 You: "Clone yourcompany.com" 66 ``` 67 68 Or create a `TARGET.md` with the URL and scope, then invoke the skill. 69 70 --- 71 72 ## How Parallel Building Works 73 74 The skill operates like a **construction foreman**: 75 76 ``` 77 ┌─────────────┐ 78 │ Recon & │ ← You (the foreman) inspect each section 79 │ Extraction │ 80 └──────┬───────┘ 81 │ 82 ├── Section 1 spec written → dispatch Builder Agent A (worktree) 83 ├── Section 2 spec written → dispatch Builder Agent B (worktree) 84 ├── Section 3 spec written → dispatch Builder Agent C (worktree) 85 │ ↑ all building in parallel 86 ▼ 87 ┌─────────────┐ 88 │ Assembly │ ← Merge worktrees, wire up page, visual QA 89 └─────────────┘ 90 ``` 91 92 Each builder receives: 93 - The full component spec (inline, not a file reference) 94 - Section screenshot 95 - Asset paths (`public/images/...`) 96 - Shared component imports (icons, utilities) 97 - TypeScript verification requirement (`npx tsc --noEmit`) 98 99 Builders never have to read external docs or guess values. Everything they need is in the prompt. 100 101 --- 102 103 ## Component Spec Format 104 105 Every section gets a specification file before any code is written: 106 107 ```markdown 108 # HeroSection Specification 109 110 ## Overview 111 - Target file: src/components/HeroSection.tsx 112 - Interaction model: scroll-driven 113 114 ## Computed Styles (from getComputedStyle) 115 ### Container 116 - display: flex 117 - padding: 80px 64px 118 - maxWidth: 1440px 119 - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%) 120 121 ## States & Behaviors 122 ### Scroll-triggered parallax 123 - Trigger: scroll position > 0 124 - Background layer: translateY at 0.3x scroll rate 125 - Foreground: translateY at 0.6x scroll rate 126 - Transition: none (frame-synced via requestAnimationFrame) 127 128 ## Assets 129 - Hero image: public/images/hero-dashboard.webp 130 - Background pattern: public/images/hero-bg-pattern.svg 131 132 ## Responsive 133 - Desktop (1440px): 2-column, image right 134 - Mobile (390px): stack, image below text, full-width 135 ``` 136 137 --- 138 139 ## The Extraction Arsenal 140 141 The skill includes battle-tested JavaScript extraction scripts that run via Chrome MCP: 142 143 - **Asset discovery** — Enumerates all `<img>`, `<video>`, background-images, inline SVGs, and fonts on the page. Detects layered compositions (multiple images stacked in one container). 144 - **CSS extraction** — Deep `getComputedStyle()` capture for 50+ properties per element, walking up to 4 levels of DOM depth. 145 - **Behavior detection** — Scroll sweep, click sweep, hover sweep, responsive sweep at 3 viewport widths. 146 147 --- 148 149 ## What It Catches That You'd Miss 150 151 | Pattern | What happens if missed | 152 |---------|----------------------| 153 | Scroll-driven tabs vs click-driven tabs | Complete rewrite (hours wasted) | 154 | Layered images (background + overlay) | Section looks empty/broken | 155 | Smooth scroll library (Lenis) | Page "feels wrong" even if it looks right | 156 | Multi-state content (tabs with different cards) | Only default tab's content appears | 157 | Header scroll transition | Nav looks static and cheap | 158 | CSS `animation-timeline` | Scroll animations don't work | 159 | Video/Lottie elements | Built as static HTML mockups | 160 161 --- 162 163 ## Output 164 165 ``` 166 my-clone/ 167 ├── public/ 168 │ ├── images/ # All downloaded assets 169 │ ├── videos/ # Video assets 170 │ └── seo/ # Favicons, OG images 171 ├── src/ 172 │ ├── app/ 173 │ │ ├── layout.tsx # Configured with target's fonts, metadata 174 │ │ ├── globals.css # Target's exact color tokens, animations 175 │ │ └── page.tsx # All sections assembled 176 │ ├── components/ # One component per section 177 │ └── types/ # TypeScript interfaces 178 ├── docs/ 179 │ ├── design-references/ # Screenshots at multiple viewports 180 │ └── research/ 181 │ ├── PAGE_TOPOLOGY.md 182 │ ├── BEHAVIORS.md 183 │ └── components/ # Spec file per component 184 └── TARGET.md 185 ``` 186 187 Run `npm run dev` and you have a working clone. 188 189 --- 190 191 ## Limitations & Honest Caveats 192 193 - **Server-rendered dynamic content** (personalized feeds, auth-gated pages) won't be captured — this clones what's publicly visible 194 - **Complex JS applications** (SPAs with client-side routing, real-time data) are better suited to different approaches — this excels at marketing sites, landing pages, and content-heavy pages 195 - **Third-party widgets** (Intercom chat, embedded forms) are identified but not replicated 196 - **Exact font rendering** may vary slightly across OS/browser combinations 197 198 --- 199 200 ## File Structure 201 202 ``` 203 clone-site/ 204 ├── README.md # This file 205 ├── SKILL.md # Claude Code skill instructions 206 └── references/ 207 └── FULL_METHODOLOGY.md # Complete technical methodology (~500 lines) 208 ``` 209 210 --- 211 212 ## License 213 214 MIT — See [LICENSE](../LICENSE) in the repository root. 215 216 217 --- 218 219 <div align="center"> 220 221 **🧠 [Want these built and managed for you? →](https://singlebrain.com/?utm_source=github&utm_medium=skill_repo&utm_campaign=ai_marketing_skills)** 222 223 *This is how we build agents at [Single Brain](https://singlebrain.com/?utm_source=github&utm_medium=skill_repo&utm_campaign=ai_marketing_skills) for our clients.* 224 225 [Single Grain](https://www.singlegrain.com/?utm_source=github&utm_medium=skill_repo&utm_campaign=ai_marketing_skills) · our marketing agency 226 227 📬 **[Level up your marketing with 14,000+ marketers and founders →](https://levelingup.beehiiv.com/subscribe)** *(free)* 228 229 </div>