website-cloner

How to use

Copy the installation command and review the source package before installing it in your own agent environment.
Check the source document for required tools, credentials and supported hosts.
Describe your input and desired deliverable; review the output against the source material.

npx skills add https://github.com/horuz-ai/claude-plugins --skill website-cloner

Before you start

Installation does not include a model subscription, API allowance or permission to access your files.
Repository stars and installation counts describe activity, not an independent quality or security test.

Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

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:

bash

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

json

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

Usage

bash

/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