web-clone

スキル：web-clone

性質の異なる2つの作業があります。まずモードを選んでください。

モード	出力	使用する場面	エンジン
snapshot	自己完結型の .html 1つ（正確なバイト列、オフライン）	アーカイブ／忠実なコピー／「オフラインでまったく同じものを保存」	組み込みインライナー · SingleFile CLI · monolith
reconstruct	編集可能なクリーンな Next.js + Tailwind コードベース	「編集できるコードとして再構築」／「インターフェースをコードにクローン」	ai-website-cloner-template パイプライン

モードとエンジンは harness/web-clone.config.yaml にあります（verified:false — ライブキャプチャエンジンと再構築の忠実度は、未検証の項目として隔離されています）。

WHAT

目的とコンテキスト

• 目的： 2つの異なる忠実度モードのいずれかでウェブサイトをクローンします — SNAPSHOT（自己完結型のオフライン版。バイト単位で正確）または RECONSTRUCT（編集可能な Next.js/Tailwind コードベースとして再構築）。
• 使用するタイミング： ユーザーが「このサイトをクローンして」、ページのデザイン／UIと操作をコピーして、レイアウトをミラーリングして、オフラインで保存して、または編集可能なコードとしてサイトを再構築してほしい場合に使います。
• 対象外： ピクセルや動作の完全な再現は保証しません。他者のサイトを再公開する目的でクローンしません。ページを Markdown テキストにする機能ではありません（その場合は /web-crawl を使います）。

メンタルモデル

URL または page.html → モードを選択 → snapshot：エンジン（組み込みインライナー · SingleFile CLI · monolith）→ clone.html / reconstruct：recon → foundation → component spec → parallel builders → assembly → visual-QA diff → Next.js コードベース。モードとエンジンは harness/web-clone.config.yaml のアダプターです（verified:false）。

入力と出力の契約

	フィールド	必須？	意味
入力	mode	はい	snapshot または reconstruct — 先に選択
入力	page.html ローカルファイルまたはライブ URL	はい	ローカル → オフラインの組み込みインライナー、ライブ → エンジンが必要
入力	config 内の engine	snapshot でライブ URL の場合	singlefile-cli または monolith
出力	clone.html	snapshot モード	HTML+CSS+JS+画像を含む自己完結型ファイル1つ
出力	Next.js + Tailwind コードベース	reconstruct モード	component spec docs/research/components/<name>.spec.md + ビルド可能な app/page.tsx

ルールと機能

• RULE-01 (MUST)：モードを明示し、正直に説明します。snapshot の組み込み機能はローカルリソースのみが対象です。ライブページを忠実にキャプチャするにはエンジンが必要です。reconstruct の忠実度は抽出品質に依存します — ピクセルや動作の完全な再現を決してうたわないでください。
• RULE-02 (MUST)：著作権／利用規約を守ります — クローンは参照、オフライン利用、学習を目的とし、他者のサイトの再公開には使いません。
• RULE-03 (MUST)：セルフテストを実施します（snapshot のコア機能）：python3 harness/scripts/web-clone.py --self-test。
• 機能：ページの読み取り（ローカルファイル、または設定済みエンジン経由でライブページを取得）；recon のためのブラウザー操作；ビルダーの並列ディスパッチ；ローカルへのクローン／コードベースファイルの書き込み。

失敗の境界

• ライブ URL でエンジンが設定されていない場合 → 組み込み機能ではローカルリソースのみインライン化します → 部分的であることを明示します。
• すべての snapshot エンジンでの JS 操作はベストエフォートです → 動作の完全な再現をうたわないでください。
• Reconstruct：ビルダーの npx tsc --noEmit または npm run build が失敗した場合 → そのマージは失敗です。修正して再実行してください。
• 再公開の目的が著作権／利用規約に違反する場合 → キャンセルします。

HOW

メインワークフロー

Step	Type	Inputs	Action	Outputs/exit	Failure/next
W01	判断	ユーザーの依頼	モードを選択し（上のモード表を参照）、忠実度の制限を明示します	モード	オフライン保存 → B01；編集可能なコード → B02
W02	決定的処理	—	snapshot のコア機能をセルフテスト web-clone.py --self-test	rc 0	失敗 → 停止して報告
W03	副作用	モード	モード A（snapshot）または B（reconstruct）の分岐を実行します	clone.html またはコードベース	分岐を参照
W04	判断	出力	結果とベストエフォートの範囲（JS 操作、忠実度）を報告します	正直な報告	—

各ステップの詳細（W03 の信頼できる情報源。モード別）：

モード A — スナップショット（忠実な 1 ファイルコピー）

1. ローカルページがすでにダウンロード済みの場合： オフラインで、キー不要 — python3 harness/scripts/web-clone.py inline <page.html> --out clone.html （ローカルの <link> CSS、<script src> JS、画像を data-URI としてインライン化し、1 ファイルにします）。
2. ライブ URL、忠実なコピー： engine: singlefile-cli（npm i -g single-file-cli、スクリプトを保持） または monolith（Rust）を設定し、web-clone.py url "<URL>" --out clone.html を実行します。
3. JS インタラクション： 隔離された未知のエンジンを含め、すべてのスナップショットエンジンでベストエフォートです。

モード B — 再構築（→ 編集可能な Next.js、ai-website-cloner-template の手法）

これはバイト単位のコピーではありません。ページをリバースエンジニアリングし、新しくクリーンなコードベースに再構築します。手法 （JCodesMore の ai-website-cloner-template から抽出、約 6k★。関連項目を参照）：

1. 調査 — browser-MCP/Computer-Use：デスクトップ 1440 とモバイル 390 で全ページのスクリーンショットを撮影； グローバルデザイントークン（フォント、色、ファビコン）を抽出；スクロール／クリック／ホバーを一通り試して、すべての インタラクティブな動作を見つける；ページのトポロジーをマッピングします。
2. 基盤 — layout.tsx のフォント、globals.css のカラートークンとアニメーション、TS インターフェース、 インライン SVG → React アイコンコンポーネント、Node アセットダウンロードスクリプト → public/。
3. コンポーネント仕様と割り当て — セクションごとに：getComputedStyle() の値を正確に読み取る（推定は しない）→ docs/research/components/<name>.spec.md を作成（ビルダー向けの契約：DOM、計算済み スタイル、状態遷移、原文どおりのコンテンツ、アセットパス、ブレークポイント）→ 並列の ビルダーサブエージェントに割り当てます（複雑なセクションはサブコンポーネントごとに 1 つ；仕様はそれぞれ最大約 150 行）。
4. 組み立て — コンポーネントを app/page.tsx にインポートし、scroll-snap / Lenis / IntersectionObserver を接続します。
5. ビジュアル QA 差分確認 — デスクトップとモバイルでクローンと原本を比較し、すべてのインタラクティブな状態をテストして、差異があれば 再抽出して修正します。ビルダーは npx tsc --noEmit を検証し、メインはマージごとに npm run build を実行します。

スタック：Next.js + TypeScript + Tailwind v4 + shadcn/ui。overstack /orchestration または Agent tool でビルダーを割り当てます。

ブランチ

ID	種類	ガード	動作	スキップ／失敗	再合流
B01	user_optional	mode = snapshot	モード A：ローカルページ → inline；ライブ URL → エンジン singlefile-cli/monolith + url	エンジン未導入 → ローカルリソースのみ、部分的な結果と報告	W04
B02	user_optional	mode = reconstruct	モード B の 5 フェーズ。/orchestration または Agent tool 経由でビルダーを並列実行	ビルド失敗 → 再抽出して修正	W04
B03	capability_optional	忠実なライブキャプチャに外部エンジンが必要	harness/web-clone.config.yaml で engine: を設定	未導入 → 組み込み	B01

検証と停止条件

必須：python3 harness/scripts/web-clone.py --self-test；ビルダーは npx tsc --noEmit、メインはマージごとに npm run build。要レビュー：デスクトップとモバイルでのクローンと原本のビジュアル QA 差分、およびすべてのインタラクティブな状態。出力があり、制限事項を明示できたら停止します。再抽出を無限に繰り返さず、残った差異を報告します。

例

• 成功例： ダウンロード済みの page.html について「このページをオフラインでそっくり保存して」と依頼 → python3 harness/scripts/web-clone.py inline page.html --out clone.html → オフラインで開ける 1 ファイルになり、CSS/JS/画像が data-URI としてインライン化されます。
• 境界／失敗例： ライブ URL を指定したものの、設定でエンジンが未指定 → ローカルリソースのみをインライン化できるため、部分的な結果と報告し、npm i -g single-file-cli を提案します。JS インタラクションはベストエフォートであると明記し、完全とは主張しません。

関連項目

• harness/scripts/web-clone.py + harness/web-clone.config.yaml（エンジン／モードのアダプター）。
• 再構築手法： github.com/JCodesMore/ai-website-cloner-template（上記の 5 フェーズのパイプライン）。
• スナップショットエンジン： SingleFile（github.com/gildas-lormeau/SingleFile）、monolith。
• /web-crawl（ページ → Markdown テキスト）、/computer-use + /orchestration（調査 + 並列ビルダー）。