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.

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

2. Install Slash Command

Copy assets/clone-website.md to your commands folder:

# Project-level (shared via git)
cp assets/clone-website.md .claude/commands/

# Or user-level (personal)
cp assets/clone-website.md ~/.claude/commands/

3. Configure Playwright MCP

Ensure Playwright MCP is configured in ~/.claude.json or .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-playwright"]
    }
  }
}

Usage

/clone-website https://example.com

The orchestrator will:

1. Create task folder .tasks/clone-{domain}/
2. Invoke screenshotter → captures all visual references
3. Invoke extractor → downloads assets, extracts styles
4. Invoke cloner → implements React component
5. Invoke qa-reviewer → finds discrepancies
6. Loop steps 4-5 until PERFECT or max 5 iterations

Output Structure

your-project/
├── public/
│   ├── images/          # Downloaded images
│   ├── videos/          # Downloaded videos
│   └── icons/           # Downloaded SVGs/icons
├── app/clone/page.tsx   # React component (location varies by framework)
└── .tasks/clone-{domain}/
    ├── context.md       # Extracted styles
    ├── screenshots/     # Visual references
    └── review-notes.md  # QA findings

Tech Stack Decisions

Detailed rationale: See references/tech-decisions.md

Workflow Details

Phase-by-phase breakdown: See references/workflow.md

Customization

Change output location

Edit the cloner agent's system prompt to specify a different output path.

Add frameworks

Update project detection logic in cloner agent for additional frameworks.

Adjust iteration limit

Modify the slash command's Phase 5 to change max iterations (default: 5).

Troubleshooting