Communitygithub.com

GCW — Gao Copy Website

認可された本番Webサイトから証拠に基づいてデプロイ可能なローカルプロジェクトを復元し、ルート、アセット、WebGL、ビジュアルリグレッションツーリングを備えた検証を行うスキルです。

GCW — Gao Copy Website とは?

このスキル(GCW)は、公開Webサイトが実際にどのように動作するかを調査し、重要な部分を再現して、実際のブラウザで検証するための包括的なワークフローを提供します。AIによる推測ではなく、観測可能なランタイム証拠と実際のソースを優先します。主なプラットフォームとしてPlaywrightベースのNode.jsスクリプトとPythonツールを活用し、サイトインベントリ、ルートマッピング、スクリーンショット比較、画像差分分析を行います。このスキルは、本番サイトの復元(ソース喪失時)、忠実なクローン作成、クリエイティブな再構築、ティアダウン分析など、複数のモードをサポートします。法的・倫理的な境界を厳守し、認可の確認、ライセンスチェック、証拠のラベリング(SOURCE/PARTIAL/GUESS)を必須とします。最終的には、再現可能なプロジェクト、QAレポート、設計ドキュメントを生成し、学習成果として納品します。

対応~Claude Code~Codex CLI~Cursor
npx skills add idonafraid-create/GCW

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

GCW — Gao Copy Website は何をしますか?

公開Webサイトが実際にどのように動作するかを調査し、重要な部分を再現して、実際のブラウザで検証します。もっともらしいAIの推測よりも、実際のソースと観測可能なランタイム証拠を優先します。

次の3つのルールを覚えておいてください。

  1. 実装前に証拠を見つける。
  2. リファクタリング前に動作させる。
  3. 磨き上げる前に比較する。

境界

  • 対象がユーザーによって所有されている、意図された再利用のためにライセンスされている、または明示的に認可されている場合にのみ進めてください。認可があいまいな場合にのみ質問してください。
  • 認証が必要なコンテンツ、パスコードのみのコンテンツ、プライベートコンテンツは、明示的に認可されている場合を除き、対象外として扱います。
  • アクセス制御をバイパスしたり、認証情報を復元、出荷、またはコミットしないでください。
  • 公開再利用の前に、コード、フォント、画像、モデル、ブランドの権利を個別に確認してください。
  • 不確かな技術的主張には、SOURCE、PARTIAL、または GUESS のラベルを付けてください。
  • デプロイされたバンドルをオリジナルの作成元ソースとして提示しないでください。

1. ツールの前に目標を選択する

references/clone-modes.md を読み、1つのプライマリモードを選択してください。

  • TEARDOWN: 再構築を約束せずに、実際のデザインと実装を理解する。
  • FAITHFUL_CLONE: 証拠が許す限り、観測可能なサイトを忠実に再現する。
  • CREATIVE_REBUILD: ブランドとコンテンツを置き換えながら、選択した構造、リズム、またはインタラクションのアイデアを保持する。
  • PRODUCTION_RECOVERY: 保守可能なソースが利用できない場合に、所有するデプロイ済みサイトを復元する。

簡単なプリフライトを記録します。

- 目標:
- サイトタイプ:
- ソースの可用性:
- 再利用の境界:
- 確信度の高いスコープ:
- おおよその範囲または除外範囲:
- 推奨パス:

すべてのプロジェクトに本番復元のコストを負わせないでください。選択した目標をサポートできる最も軽量な証拠と検証を使用してください。

2. 最初に実際の実装を探す

スクレイピングや再構築の前に:

  • 公式の公開リポジトリについて、サイト名、製品名、ドメイン所有者、デプロイメントスラッグを検索してください。
  • ソースマップ、フレームワークメタデータ、公開デプロイメントアーティファクトを検査します。
  • リポジトリとアセットのライセンスを確認します。公開されていることが再デプロイの許可にはなりません。
  • オリジナルソース、デプロイ済みアーティファクト、編集可能な実装を明確に分離しておきます。
  • 最終的な正規のHTTP(S) URLを使用します。GCWは、認証情報を含むURLと、設定されたオリジンを離れるドキュメントリダイレクトを拒否します。

公式の再利用可能なソースが存在する場合は、そこから始めてください。存在しない場合は、ランタイム偵察を続行し、不明な点を記録します。

3. プロジェクトレコードを初期化する

ワークスペースの AGENTS.md を読みます。このマシンがまだ検証されていない場合は、GCWリポジトリで npm install、npm run install:browser、npm run check を実行します。

非破壊的なプロジェクトレコードを作成します。

python scripts/init_reconstruction.py <workspace> --url <canonical-url> --authorization <owned|licensed|authorized>

マニフェスト、スクリーンショット、レポート、既知のギャップには .gcw/ を使用します。既存の証拠を黙って上書きしないでください。

4. サイトを偵察し、その表面を分類する

Node.jsとPlaywrightが利用可能な場合、インベントリを実行します。

node scripts/site_inventory.mjs --url <canonical-url> --out <workspace>/.gcw/evidence/network/site-inventory.json

次に、自動化では確実に推測できないものを検証します。

  • ルート、ページファミリー、ディープリンク、レスポンシブブレークポイント
  • DOMルート、固定オーバーレイ、内部スクロールコンテナ
  • ホバー、クリック、ドラッグ、スクロール、時間、リサイズ、テーマ、ストレージの状態
  • Canvas、WebGL、WebGPU、ワーカー、iframe、動画、音声、遅延リソース
  • ローディング状態と安定したアプリケーション状態
  • ローカルフィクスチャを必要とする公開APIとデータ依存関係

Canvas/WebGL/WebGPUの所有権、シェーダー、レンダーパイプラインには web-shader-extractor を使用します。バイトレベルのアーティファクトではなく、タイポグラフィ、スペーシング、パレット、レイアウト、モーション、ビジュアルランゲージを保存することが目標の場合は、design-dna を使用します。

5. 実装パスを選択する

証拠とサイトタイプからパスを選択します。

証拠またはサイトタイプデフォルトパス
公式の再利用可能なソースそのライセンスの範囲内でソースを実行し適応させる
シンプルな静的サイト公開ファイルとURLパスを保存し、トラッキングを削除してコンテンツを置き換える
コンテンツが多いReact/Vue/Nextサイトページテンプレートを再構築し、公開データまたはローカルフィクスチャデータを使用する
マルチページマーケティングサイト共有テンプレートを構築する前にルートとページファミリーをマッピングする
インタラクションが多いサイト最初に状態をキャプチャし、次に状態遷移を再現する
WebGL/Canvasサイトプロジェクト化する前にレンダリング/入力/出力モデルを復元する
ビジュアルインスピレーションのみDesign DNAを抽出し、オリジナルの実装を構築する
ソース喪失の本番サイトreferences/recovery-tiers.md と references/gates.md を読み、検証済みの再生オラクルを確立する

選択したモードに不要なサードパーティアーティファクトをアーカイブまたはコピーしないでください。

6. 実行可能なローカルプロジェクトを構築する

  • 新しいプロジェクトを編集している間は、安定したリファレンスまたは証拠レコードを保持します。
  • ホームページだけでなく、スコープ内のすべてのルートを復元します。
  • 選択したホスト上でナビゲーションとディープリンクの動作を保存します。
  • 利用できないサーバー動作は、明示的なフィクスチャまたは安全なフォールバックに置き換えます。
  • 開発サーバーだけでなく、プロダクションビルドと静的プレビューも検証します。

該当する場合はルートチェックを実行します。

python scripts/route_smoke.py --base-url <preview-url> --route / --route /example

7. 実際のブラウザで検証する

references/qa-scenarios.md と references/tooling.md を読みます。

ソースシナリオと候補シナリオを定義し、マッチした状態をキャプチャします。

node scripts/capture_compare.mjs --config <capture-scenarios.json> --output <results-dir>
python scripts/batch_image_diff.py <results-dir> --diff-dir <results-dir>/diff

ビューポート、DPR、ルート、ポインター、スクロール、ランダムシード、準備状態、時間フェーズを一致させます。スクリーンショットと差分画像を検査します。単一のグローバルスコアでは、インタラクションやコンポジタの失敗を説明できません。

色、オフセット、アニメーション速度を調整して不足している配線を隠さないでください。フェーズに敏感な領域は、決定論的な失敗とは別にしておきます。

8. クローンだけでなく、学習成果を提供する

選択したモードに必要なドキュメントのみを出力します。

  • TEARDOWN.md: 実際の実装、証拠レベル、転用可能なテクニック
  • DESIGN_DNA.json: クリエイティブな再構築のためのデザインシステム、ビジュアルランゲージ、エフェクト
  • REPLACE_GUIDE.md: テキスト、メディア、色、フォント、モデル、データを置き換える場所
  • CLONE_REPORT.md: ソースとローカルの比較、トレードオフ、既知のギャップ
  • 実行可能なプロジェクト、ビルドコマンド、デプロイメントノート

GLTF/GLBジオメトリに埋め込まれたテキストなどの高度なアセットケースについては、メインワークフローを拡張する代わりに references/special-cases.md を読んでください。

9. 必要な場合にのみ強化する

保守されているプロジェクトや本番復元の場合は、スクリーンショット回帰ランナーをインストールします。

python scripts/install_ci.py <project-root> --source-url <canonical-url>

CIは、1回限りのティアダウンや学習演習ではオプションです。インストールする場合は、しきい値に失敗した場合でも、スクリーンショット、差分、レポートをアップロードする必要があります。

10. 正直にクローズする

  • プリフライトで約束したビルドとQAシナリオを再実行します。
  • 既知のギャップと次に必要な証拠を記録します。成功したインタラクションを決してでっち上げないでください。
  • 適応版を公開する前に、トラッキングと元のブランドの痕跡を削除します。
  • クリーンなGitチェックポイントを残します。ユーザーの許可なしにプッシュしないでください。
  • オリジナルのアイデア、再利用されたライセンスアセット、観測された動作、自身の実装を区別します。

関連スキル