website-cloner

# Website Cloner Skill

Clone any website with pixel-perfect fidelity using an orchestrated multi-agent workflow.

## Overview

This skill provides a complete system for cloning websites:
- **Slash command**: `/clone-website <url>` orchestrates the entire workflow
- **4 specialized sub-agents**: Each handles a specific phase
- **Output**: Single React component using Tailwind CSS + motion

## Architecture

```
┌─────────────────────────────────────────┐
│     ORCHESTRATOR (/clone-website)       │
│     Delegates, doesn't code             │
└─────────────────────────────────────────┘
                    │
    ┌───────────────┼───────────────┐
    ▼               ▼               ▼
┌─────────┐   ┌─────────┐   ┌─────────┐
│ screen- │   │ extrac- │   │  (can   │
│ shotter │   │  tor    │   │ parallel│
└─────────┘   └─────────┘   └─────────┘
                    │
                    ▼
            ┌─────────────┐
            │   cloner    │◄────────┐
            └─────────────┘         │
                    │               │
                    ▼               │
            ┌─────────────┐         │
            │ qa-reviewer │─────────┘
            └─────────────┘  (loop until done)
```

## Quick Setup

### 1. Create Sub-Agents

Run `/agents` in Claude Code and create these 4 agents. For each, select "Generate with Claude" and provide the description.

| Agent Name | Description Summary |
|------------|---------------------|
| `website-screenshotter` | Captures comprehensive screenshots (full-page, sections, components, hover states) |
| `website-extractor` | Downloads assets to `public/`, extracts colors, typography, spacing, animations |
| `website-cloner` | Implements React component with Tailwind + motion, auto-detects project type |
| `website-qa-reviewer` | Pixel-by-pixel comparison, classifies issues as Critical/Major/Minor |

**Detailed prompts for each agent**: See `references/subagents.md`

### 2. Install Slash Command

Copy `assets/clone-website.md` to your comm