---
name: overview
description: High-level architecture and data flow for website cloning
metadata:
  tags: architecture, pipeline, flow
---

# Website Clone Overview

## Architecture

Claude Code/opencode runs the skill. Claude IS the AI - no separate API key needed.

```
┌─────────────────────────────────────────────────────────────┐
│                      Claude (You)                            │
│                                                              │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐  │
│  │  Render  │ → │  Scrape  │ → │ Analyze  │ → │ Generate │  │
│  │(Playwright)│  │(Firecrawl)│  │  (You)   │   │  (You)   │  │
│  └──────────┘   └──────────┘   └──────────┘   └──────────┘  │
│       │              │              │              │         │
│       ▼              ▼              ▼              ▼         │
│     HTML         Assets[]       Sections[]     TSX Files    │
│   Screenshot                                                 │
└─────────────────────────────────────────────────────────────┘
```

## Data Flow

### 1. Input
- Target URL from user
- Output directory (default: `./cloned-site`)

### 2. Render Stage (Plugin)
```ts
const render = await renderPage({url, viewport: {width: 1440, height: 900}});
// render.html - Full DOM after JavaScript execution
// render.screenshot - PNG buffer
// render.requests - Network requests (images, fonts, CSS)
```

### 3. Scrape Stage (Plugin + Firecrawl)
```ts
const scrape = await scrapePage({url, renderResult, firecrawlClient, outputDir});
// scrape.assets - Downloaded images, fonts, SVGs
// scrape.html - Playwright HTML
// scrape.firecrawlHtml - Clean Firecrawl HTML
```

### 4. Analyze Stage (Claude)
You analyze the HTML and identify sections:
- Look for `<nav>`, `<header>`, `<main>`, `<section>`, `<footer>`
- Identify visual blocks: hero, features, pricing, testimonials
- Note the section order and nesting

### 5. Generate Stage (Claude)
You generate TSX components:
- Convert HTML to JSX syntax
- Apply Tailwind CSS classes
- Replace remote URLs with local `/assets/` paths
- Create `page.tsx`, `layout.tsx`, `globals.css`

### 6. Write Stage (Plugin)
```ts
await writeFile('./output/src/app/page.tsx', pageCode);
await writeFile('./output/src/components/sections/hero.tsx', heroCode);
```

## Key Principle

The plugin handles:
- Browser automation (Playwright)
- API calls (Firecrawl)
- File I/O (downloads, writes)

Claude handles:
- Understanding the page structure
- Identifying semantic sections
- Generating clean React code
- Applying appropriate styling