boyang-hu/website-rebuild-skill

复刻网站的 Agent Skill:抓只读镜像、从压缩代码逐行还原、自动比对验收。An agent skill that mirrors a website, rebuilds it from the minified code, and verifies the result with automated diffs.

何を解決するか

このプロジェクトは、既存のウェブサイトを高忠実度で、行単位で再構築するためのシステムを提供します。単なるウェブサイトスキャナーまたは「クローン」ツールが視覚的な外観のみを取得するのに対し、このツールは元の論理と実装を逆引きして、元のサイトと証明可能な同一性を持つ、人間が読めるソースコードプロジェクトを生成することに焦点を当てています。

動作方法

このプロセスはAIエージェント向けに設計された厳格なパイプラインに従います:

  1. 分類:エージェントはまず、サイトが再構築可能かどうかを判断します(例:静的サイト、WebGLシーン、サーバーサイドレンダリングアプリなど)。
  2. 証拠のミラーリング:サイト全体の読み取り専用スナップショットがキャプチャされ、将来のすべての比較の絶対的な真実として使用されます。
  3. 逆引き:圧縮・難読化されたコードが展開され、再構築された各行が元のバンドルの特定の行に追跡できるようにマッピングが作成されます。
  4. 移植:論理が新しいプロジェクトに移植され、すべての変更が差分テーブルに記録されます。
  5. 検証:エージェントは5つの層で定量的な比較を実行します:コンソールログ、ネットワークリクエスト、DOM構造、ジオメトリ、ピクセル単位の視覚一致。
  6. ソース化:最終出力は、適切な命名とコメントを備えた清潔でモジュール化された人間が読めるエンジニアリングプロジェクトにリファクタリングされ、元のものとバイトレベルで同一性を維持します。

対象ユーザー

  • 開発者および研究者:複雑なウェブアニメーション、WebGLエンジン、または高度なフロントエンドアーキテクチャの実装方法を研究したい人。
  • AIエージェントユーザー:Claude CodeやCodexなどのエージェントを使用し、学習や移行のためにウェブアセットの再構築を自動化したい人。
  • デジタルアーカイブ担当者:Wayback Machineなどのアーカイブから「死んだ」ウェブサイトを救出しようとしている人。

特徴

  • ピクセル単位の正確性:定量的な検証を使用して、再構築されたサイトが元のサイトと同一であることを保証し、平均絶対差が0.00になる場合も。
  • RSC対応:「flight」ストリーム出力を分析することで、Next.js App Routerサイトを再構築可能。
  • 依存関係ゼロのツールチェーン:コアパイプラインはnpmパッケージを必要としない70個のNodeスクリプトで構成され、最終的なソース化ステージまで依存関係がありません。
  • 死んだサイトの回復:キャプチャされたバイトからWayback Machineのサイトを再構築して救出可能。
  • 追跡可能な論理:再構築されたコードの各行が、元のサイトバンドルの特定の行に追跡可能。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト