website-cloner

Website Cloner Skill

オーケストレーションされたマルチエージェントワークフローを使用して、あらゆるウェブサイトをピクセル単位で忠実に複製します。

概要

このスキルは、ウェブサイトを複製するための完全なシステムを提供します。

• スラッシュコマンド：/clone-website <url> がワークフロー全体をオーケストレーションします
• 4つの専門サブエージェント：それぞれが特定のフェーズを担当します
• 出力：Tailwind CSS + motion を使用した単一の React コンポーネント

アーキテクチャ

┌─────────────────────────────────────────┐
│     ORCHESTRATOR (/clone-website)       │
│     Delegates, doesn't code             │
└─────────────────────────────────────────┘
                    │
    ┌───────────────┼───────────────┐
    ▼               ▼               ▼
┌─────────┐   ┌─────────┐   ┌─────────┐
│ screen- │   │ extrac- │   │  (can   │
│ shotter │   │  tor    │   │ parallel│
└─────────┘   └─────────┘   └─────────┘
                    │
                    ▼
            ┌─────────────┐
            │   cloner    │◄────────┐
            └─────────────┘         │
                    │               │
                    ▼               │
            ┌─────────────┐         │
            │ qa-reviewer │─────────┘
            └─────────────┘  (loop until done)

クイックセットアップ

1. サブエージェントを作成する

Claude Code で /agents を実行し、以下の4つのエージェントを作成します。それぞれについて「Generate with Claude」を選択し、説明を入力します。

エージェント名	説明の概要
website-screenshotter	包括的なスクリーンショットを撮影します（ページ全体、セクション、コンポーネント、ホバー状態）
website-extractor	アセットを public/ にダウンロードし、色、タイポグラフィ、間隔、アニメーションを抽出します
website-cloner	Tailwind + motion を使用して React コンポーネントを実装し、プロジェクトの種類を自動検出します
website-qa-reviewer	ピクセル単位で比較し、問題を Critical／Major／Minor に分類します

各エージェントの詳細なプロンプト：references/subagents.md を参照してください

2. スラッシュコマンドをインストールする

assets/clone-website.md をコマンドフォルダーにコピーします。

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

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

3. Playwright MCP を設定する

Playwright MCP が ~/.claude.json または .claude/settings.json で設定されていることを確認します。

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

使用方法

/clone-website https://example.com

オーケストレーターは次の処理を行います。

1. タスクフォルダー .tasks/clone-{domain}/ を作成します
2. スクリーンショット担当を呼び出し、すべての視覚的な参考資料を撮影します
3. 抽出担当を呼び出し、アセットをダウンロードしてスタイルを抽出します
4. クローン担当を呼び出し、React コンポーネントを実装します
5. QA レビュアーを呼び出し、不一致を検出します
6. PERFECT になるまで、または最大5回の反復に達するまで、手順4～5を繰り返します

出力構成

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

技術スタックの選定理由

技術	理由
Tailwind CSS	任意の値（bg-[#hex]）を使用でき、色をピクセル単位で正確に合わせられます
motion	framer-motion より新しく軽量な代替手段です（"motion/react" からインポート）
単一コンポーネント	アーキテクチャではなく複製に集中できます。各セクションはコメントで区切ります
フレームワークの自動検出	Next.js、TanStack Start、Vite などに対応しています

選定理由の詳細：references/tech-decisions.md を参照してください

ワークフローの詳細

フェーズごとの詳細：references/workflow.md を参照してください

カスタマイズ

出力先を変更する

別の出力パスを指定するには、クローン担当エージェントのシステムプロンプトを編集します。

フレームワークを追加する

追加のフレームワークに対応するには、クローン担当エージェントのプロジェクト検出ロジックを更新します。

反復回数の上限を調整する

最大反復回数（デフォルト：5）を変更するには、スラッシュコマンドのフェーズ5を修正します。

トラブルシューティング

問題	解決策
サブエージェントが見つからない	名前が次のとおり正確に一致していることを確認します：website-screenshotter、website-extractor、website-cloner、website-qa-reviewer
Playwright エラー	npm install -g @anthropic-ai/mcp-playwright を実行します
アセットが読み込まれない	public/ フォルダーの構成と、コンポーネント内の画像パスを確認します
無限ループ	QA レビュアーがステータスを設定する必要があります。review-notes.md の STATUS 行を確認します