ai-website-cloner-template

What this skill does

```markdown
---
name: ai-website-cloner-template
description: Clone any website into a pixel-perfect Next.js replica using AI coding agents with one command
triggers:
  - clone this website
  - reverse engineer a website
  - scrape and rebuild a site
  - copy this website design
  - clone website with AI
  - rebuild this page as Next.js
  - extract design tokens from a site
  - run clone-website skill
---

# AI Website Cloner Template

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A multi-phase AI agent pipeline that reverse-engineers any website and rebuilds it as a pixel-perfect Next.js 16 clone — fonts, colors, assets, interactions, and responsive layout included. One command triggers reconnaissance, design extraction, parallel component building, and visual QA.

---

## Installation

```bash
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
```

Start your AI agent (Claude Code recommended):

```bash
claude --chrome
```

---

## Quick Start

```
/clone-website https://example.com
```

That's it. The skill handles everything: screenshots, token extraction, asset downloads, component specs, parallel builds, assembly, and visual diff.

---

## How the Pipeline Works

The `/clone-website` skill runs five sequential phases:

### Phase 1 — Reconnaissance
- Full-page screenshots at multiple breakpoints (mobile, tablet, desktop)
- `getComputedStyle()` sweeps for every visible element
- Interaction sweep: scroll, hover, click, focus, responsive resize
- Extracts fonts, color palette, spacing scale, border radii, shadow tokens

### Phase 2 — Foundation
- Updates `globals.css` with extracted oklch color tokens
- Installs Google Fonts or downloads font files to `/public`
- Downloads all images → `/public/images/`, videos → `/public/videos/`, favicons → `/public/seo/`
- Patches `layout.tsx` with correct metadata, og image, favicon

### Phase 3 — Component Specs
- Writes one spec file per section to `docs/research/components/`
- Each spec contains exact computed CSS values, all interaction states, content copy, asset paths, and responsive breakpoints
- No guessing — builder agents receive inline ground truth

### Phase 4 — Parallel Build
- Spawns one builder agent per section in isolated git worktrees
- Each builder reads its spec and produces a self-contained React component
- Builders run concurrently — large sites finish faster

### Phase 5 — Assembly & QA
- Merges all worktrees back to main branch
- Wires components into `src/app/page.tsx`
- Runs visual diff screenshot against the original
- Outputs side-by-side comparison to `docs/design-references/comparison.png`

---

## Project Structure

```
src/
  app/
    layout.tsx          # Root layout — fonts, metadata, globals
    page.tsx            # Assembled clone page
  components/
    ui/                 # shadcn/ui primitives (Button, Card, etc.)
    icons.tsx           # Extracted SVG icons from target site
  lib/
    utils.ts            # cn() Tailwind merge utility
  types/                # Shared TypeScript interfaces
  hooks/                # Custom React hooks

public/
  images/               # Downloaded images from target
  videos/               # Downloaded videos from target
  seo/                  # Favicons, OG images

docs/
  research/
    tokens.json         # Extracted design tokens
    components/         # Per-section spec files (*.md)
  design-references/
    comparison.png      # Visual diff output

scripts/
  sync-agent-rules.sh   # Regenerate agent instruction files from AGENTS.md
  sync-skills.mjs       # Regenerate /clone-website for all platforms

AGENTS.md               # Single source of truth for agent instructions
CLAUDE.md               # Claude Code config (imports AGENTS.md)
GEMINI.md               # Gemini CLI config (imports AGENTS.md)
```

---

## Tech Stack

| Layer | Technology |
|-------|-----------|
| Framework | Next.js 16, App Router, React 19 |
| Styling | Tailwind CSS v4, oklch design tokens |
| Components | shadcn/ui (Radix primitives) |
| Icons | Lucide React → replaced by extracted SVGs |
| Language | TypeScript (strict mode) |

---

## Commands

```bash
npm run dev    # Start dev server at localhost:3000
npm run build  # Production build
npm run lint   # ESLint check
```

---

## Real Code Examples

### Adding an extracted component

After the pipeline runs, components land in `src/components/`. Wire them into the page:

```tsx
// src/app/page.tsx
import { HeroSection } from "@/components/hero-section";
import { FeaturesSection } from "@/components/features-section";
import { PricingSection } from "@/components/pricing-section";
import { FooterSection } from "@/components/footer-section";

export default function Page() {
  return (
    <main>
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <FooterSection />
    </main>
  );
}
```

### Typical extracted component structure

```tsx
// src/components/hero-section.tsx
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function HeroSection() {
  return (
    <section
      className={cn(
        "relative flex min-h-[680px] flex-col items-center justify-center",
        "bg-[oklch(0.12_0.02_264)] px-6 py-24 text-center"
      )}
    >
      <h1 className="max-w-4xl text-5xl font-bold tracking-tight text-white md:text-7xl">
        Your extracted headline here
      </h1>
      <p className="mt-6 max-w-2xl text-lg text-[oklch(0.72_0.05_264)]">
        Extracted subheading copy from the target site.
      </p>
      <div className="mt-10 flex gap-4">
        <Button size="lg" className="bg-[oklch(0.65_0.22_264)] hover:bg-[oklch(0.60_0.22_264)]">
          Primary CTA
        </Button>
        <Button size="lg" variant="outline">
          Secondary CTA
        </Button>
      </div>
      <img
        src="/images/hero-visual.webp"
        alt="Hero visual"
        className="mt-16 w-full max-w-5xl rounded-xl shadow-2xl"
      />
    </section>
  );
}
```

### Design tokens in globals.css (Tailwind v4)

```css
/* src/app/globals.css */
@import "tailwindcss";

:root {
  /* Extracted from target site via getComputedStyle() */
  --color-primary: oklch(0.65 0.22 264);
  --color-primary-hover: oklch(0.60 0.22 264);
  --color-background: oklch(0.12 0.02 264);
  --color-surface: oklch(0.16 0.02 264);
  --color-text: oklch(0.97 0.01 264);
  --color-text-muted: oklch(0.72 0.05 264);
  --color-border: oklch(0.25 0.03 264);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Cal Sans", "Inter", sans-serif;
}
```

### Extracted SVG icons

```tsx
// src/components/icons.tsx
// Auto-generated by the clone pipeline — do not edit manually

export function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M20 6L9 17L4 12"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
```

### Using cn() for conditional classes

```tsx
import { cn } from "@/lib/utils";

function NavLink({
  href,
  active,
  children,
}: {
  href: string;
  active?: boolean;
  children: React.ReactNode;
}) {
  return (
    <a
      href={href}
      className={cn(
        "text-sm font-medium transition-colors",
        active
          ? "text-white"
          : "text-[oklch(0.72_0.05_264)] hover:text-white"
      )}
    >
      {children}
    </a>
  );
}
```

---

## Component Spec Format

Each file in `docs/research/components/` follows this structure:

```markdown
# Hero Section Spec

## Dimensions
- Height: 680px min, full viewport
- Padding: 96px top/bottom, 24px horizontal

## Typography
- H1: font-size 72px, font-weight 700, letter-spacing -0.02em, c