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
- 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
- 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/
- 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:
-
Create task folder .tasks/clone-{domain}/
-
Invoke screenshotter → captures all visual references
-
Invoke extractor → downloads assets, extracts styles
-
Invoke cloner → implements React component
-
Invoke qa-reviewer → finds discrepancies
-
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
Technology Reason
Tailwind CSS Arbitrary values (bg-[#hex] ) enable pixel-perfect color matching
motion Modern, lighter alternative to framer-motion (import from "motion/react")
Single component Focus on cloning, not architecture; sections divided by comments
Auto-detect framework Supports Next.js, TanStack Start, Vite, etc.
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
Issue Solution
Sub-agents not found Verify names exactly match: website-screenshotter , website-extractor , website-cloner , website-qa-reviewer
Playwright errors Run npm install -g @anthropic-ai/mcp-playwright
Assets not loading Check public/ folder structure and image paths in component
Infinite loop QA reviewer should set status; check review-notes.md for STATUS line