Prerequisites

• Node.js 24+
• An AI coding agent (see Supported Platforms)

Tech Stack

• Next.js 16 — App Router, React 19, TypeScript strict
• shadcn/ui — Radix primitives + Tailwind CSS v4
• Tailwind CSS v4 — oklch design tokens
• Lucide React — default icons (replaced by extracted SVGs during cloning)

How It Works

The /clone-website skill runs a multi-phase pipeline:

1. Reconnaissance — screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)
2. Foundation — updates fonts, colors, globals, downloads all assets
3. Component Specs — writes detailed spec files (docs/research/components/) with exact computed CSS values, states, behaviors, and content
4. Parallel Build — dispatches builder agents in git worktrees, one per section/component
5. Assembly & QA — merges worktrees, wires up the page, runs visual diff against the original

Each builder agent receives the full component specification inline — exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.

Use Cases

• Platform migration — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
• Lost source code — your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format
• Learning — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code

Not Intended For

• Phishing or impersonation — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.
• Passing off someone's design as your own — logos, brand assets, and original copy belong to their owners.
• Violating terms of service — some sites explicitly prohibit scraping or reproduction. Check first.

Project Structure

src/
  app/              # Next.js routes
  components/       # React components
    ui/             # shadcn/ui primitives
    icons.tsx       # Extracted SVG icons
  lib/utils.ts      # cn() utility
  types/            # TypeScript interfaces
  hooks/            # Custom React hooks
public/
  images/           # Downloaded images from target
  videos/           # Downloaded videos from target
  seo/              # Favicons, OG images
docs/
  research/         # Extraction output & component specs
  design-references/ # Screenshots
scripts/
  sync-agent-rules.sh  # Regenerate agent instruction files
  sync-skills.mjs      # Regenerate /clone-website for all platforms
AGENTS.md           # Agent instructions (single source of truth)
CLAUDE.md           # Claude Code config (imports AGENTS.md)
GEMINI.md           # Gemini CLI config (imports AGENTS.md)

Commands

npm run dev    # Start dev server
npm run build  # Production build
npm run lint   # ESLint check
npm run typecheck # TypeScript check
npm run check  # Run lint + typecheck + build

If using docker

docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001

Updating for Other Platforms

Two source-of-truth files power all platform support. Edit the source, then run the sync script:

| What | Source of truth | Sync command | | ---------------------- | --------------------------------------- | ---------------------------------- | | Project instructions | AGENTS.md | bash scripts/sync-agent-rules.sh | | /clone-website skill | .claude/skills/clone-website/SKILL.md | node scripts/sync-skills.mjs |

Each script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.

Star History

License

MIT