website-cloner

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

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

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

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