---
name: approach
description: End-to-end plan for cloning a site into Next.js
metadata:
  tags: approach, pipeline, nextjs, reference
---

# Cloning Approach

## Goals

- Deliver a pixel-accurate Next.js App Router clone
- Keep sections modular for easy edits
- Localize assets and fonts for reliability
- Validate with linting and screenshots

## Inputs and Outputs

**Inputs**
- Target URL
- Output directory
- Viewport size and wait conditions
- Optional cookies or auth headers

**Outputs**
- `src/app/page.tsx` assembling all sections
- `src/components/sections/*` for each visual block
- `src/app/globals.css` with Tailwind v4 theme tokens
- `public/assets` for images, SVGs, and textures
- `public/fonts` when fonts are self-hosted
- `AGENTS.md` summarizing the clone for future edits

## Phase 1: Recon + Setup

- Inspect target site for viewport, font stack, and theme colors
- Decide on a canonical viewport (match the largest desktop layout)
- Capture the top-level section order and anchor IDs

## Phase 2: Render & Capture (Playwright)

- Render the page with `networkidle` and a short extra wait
- Capture the fully-hydrated HTML, screenshot, and network requests
- Persist raw HTML and screenshots as checkpoint artifacts

## Phase 3: Asset Crawl (Firecrawl + Network)

- Use Firecrawl to enumerate assets, CSS, and background images
- Merge with Playwright network requests and dedupe by URL
- Download assets into `public/assets` and rewrite references

## Phase 4: Sectioning + Semantics

- Split the DOM by landmark tags (`nav`, `header`, `section`, `footer`)
- Fallback to bounding-box clustering for large visual blocks
- Preserve anchor IDs and section order for scrolling behavior

## Phase 5: Code Generation

- Emit `page.tsx` to compose the section components
- Generate one component per section under `src/components/sections`
- Prefer Tailwind classes for layout, inline styles for precise values
- Add `"use client"` only when styled-jsx or client APIs are required

## Phase 6: Styling & Tokens

- Create `globals.css` with `@theme` tokens and `@layer base`
- Mirror font imports and define helper classes (`container`, `polaroid`)
- Extract colors into CSS variables for easy updates

## Phase 7: Validation

- Run linting, formatting, and `tsc` for type safety
- Compare screenshots against the original with a diff threshold
- Iterate section-by-section until diffs are minimal

## Reference Clone Notes

- `src/app/page.tsx` composes sections in strict order
- `src/components/sections` holds each visual block (navigation, hero, etc.)
- `src/app/globals.css` defines `@theme` tokens and custom helpers
- `hero.tsx` and `sneek-peek.tsx` use `"use client"` with styled-jsx
- The layout uses absolute positioning for polaroid collages and glows