majiayu000 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 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:
- 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 |