Clone Site Engine

What it does

clone-site reverse-engineers a target website into a pixel-perfect Next.js replica. Instead of a single model glancing at a screenshot and guessing markup, it follows a measurement-based pipeline:

1. Recon: Screenshots the target at desktop + mobile breakpoints and, via Chrome MCP, extracts every color (hex/oklch), font family/weight/line-height and spacing value as a token using getComputedStyle(); downloads all assets (fonts, images, video) into public/.
2. Foundation: Configures a Next.js + Tailwind v4 scaffold with the target's exact fonts, colors and global styles — tokens mapped to CSS custom properties.
3. Component Specs: Writes detailed specs per section with exact CSS values from getComputedStyle() (interaction model, multi-state content, responsive breakpoints, asset paths inline).
4. Parallel Build: Dispatches builder agents in parallel git worktrees — one per section, conflict-free.
5. Assembly & QA: Merges worktrees, wires up the page, and validates fidelity via visual diff (visual regression) against the original.

It finishes by emitting the Skill Machine dual-output contract: output.json (agent-readable) + output.html (visual, marketplace).

When to use it

• To rebuild a competitor/reference landing page as a clean, maintainable React component tree.
• For "make it look like this" or "build a page based on this URL" requests.
• To turn a design into named components + clean Tailwind classes rather than a tangle of inline styles.
• During brand redesigns or migrations, carrying the existing look into a new stack at pixel fidelity.

Method / frameworks

• Measurement-based extraction — computed style + bounding-box measurement via Playwright/Chrome page.evaluate(); grounded in real pixel values, not screenshot guesses.
• Design tokens → CSS custom properties — every color/font/spacing reduced to a token, written into Tailwind config.
• Parallel agent dispatch (git worktree isolation) — section-level concurrent build.
• Visual diff / visual regression QA — original vs clone comparison yielding a fidelity verdict.
• Stack: Next.js (App Router) + Tailwind v4 + shadcn/ui. Requires Chrome MCP, Node 20+.