clone-site

1name: clone-site
2description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL".
3---
4 
5# Clone Site
6 
7Reverse-engineer and rebuild any website as a pixel-perfect Next.js clone.
8 
9## Quick Start
10 
11User says: "Clone yourcompany.com" or "Make a landing page like this: [url]"
12 
13## How It Works
14 
151. **Recon** — Screenshots the target at desktop + mobile, extracts all design tokens (fonts, colors, spacing), downloads all assets
162. **Foundation** — Sets up Next.js with the target's exact fonts, colors, and global styles
173. **Component Specs** — Writes detailed specs for each section with exact CSS values from getComputedStyle()
184. **Parallel Build** — Dispatches builder agents in git worktrees, one per section
195. **Assembly & QA** — Merges everything, wires up the page, visual diff against original
20 
21## Requirements
22 
23- Chrome MCP must be enabled: `claude --chrome`
24- Node.js 20+
25- A Next.js + Tailwind v4 + shadcn/ui scaffold as the base project
26 
27## Setup (first time only)
28 
29```bash
30cd /path/to/your-clone-project
31npm install
32```
33 
34## To Clone a Site
35 
36```bash
37cd /path/to/your-clone-project
38```
39 
40Edit `TARGET.md` with the URL and scope, then run the skill in Claude Code.
41…