web-shader-extractor について
web-shader-extractor は、Web ページのシェーダーや Canvas の表示を調査し、ローカルで再現するためのスキルです。編集可能なプロジェクトを作る前に、証拠の収集と検証を進めます。
主な機能
- 01WebGL、WebGPU、Canvas の表示が対象
- 02段階的なゲートに沿った調査
- 03ソースと実行時の証拠を利用
- 04再現とベースライン検証の手順
- 05対象別のリファレンスを用意
活用シーン
- 01Web ページのアニメーション背景をローカル再現
- 02製品シェーダーや対話型シーンの調査
- 03証拠に沿ったビジュアル基準の構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ lixiaolin94/ skills --skill web-shader-extractorインストール後、Claude Code で/web-shader-extractorを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/capture-backends.mdevidence-policy.mdoperating-contract.mdqa-failure-policy.mdrecon-kernel.mdreplay-policy.mdshaders-com.mdsource-analysis.mdsurface-discovery.mdtarget-lock.mdthree-shader-reconstruction.mdtool-capability-matrix.mdunicorn-studio.mdscripts/fetch-rendered-dom.mjsscan-bundle.shtemplates/extraction-report.mdknown-gaps.mdqa-report.mdreplay-manifest.jsonrun-state.jsonscout-card.json詳細
Web Shader Extractor
WebGL/WebGPU/Canvas のレンダリング調査とローカル再生のためのインデックスです。 対象のビジュアルから始めます。サーフェスグループを確定し、ソースまたは実行時の事実を追跡します。実行可能なベースラインを構築してから、プロジェクト化します。
Router Contract
このファイルはインデックスです。運用マニュアル全体として扱わないでください。タスクに着手する前に、以下を読みます。
references/operating-contract.mdreferences/recon-kernel.md
次に、現在の状態に必要な焦点を絞ったリファレンスだけを読み込みます。 大量の証拠、キャプチャ、生成物を会話に含めないでください。 ユーザーの出力ディレクトリに保存してください。
Use This For
- Webページの WebGL、WebGPU、Canvas2D、OffscreenCanvas、シェーダー、またはアニメーション Canvas エフェクトの抽出。
- アニメーション背景、製品シェーダー、インタラクティブな WebGL シーン、または Canvas ビジュアルのローカル再生。
- 証拠に一致するベースラインを先に構築し、その後で編集可能なプロジェクトを作成。
- 対象に紐づくシェーダー/レンダリンググラフ/タイミング/リソース/入力の事実の調査。
通常の DOM/CSS のクローン作成、静的スクリーンショット、一般的なウェブサイトのコピー、無関係な JavaScript の難読化解除、製品 UI の再設計には使用しないでください。 シェーダーまたは Canvas の対象があるタスクに限って使用してください。
Core Rules
- フレームワークに紐づける前に対象に紐づけます。グローバルな Three.js、プラットフォーム、またはシェーダーの特徴は、対象のサーフェスグループとの関連が確認されるまでは仮説にすぎません。
- プローブは仮説を判別できるものでなければなりません。プローブを実行する前に、どの実行時の仮説を区別するのか、各結果で何が除外されるのかを述べます。すべての候補と整合する証拠は弱く、1つの候補だけが予測する証拠は強いものです。
- 実装より先に証拠を確認します。ソース、実行時オブジェクト、フレームキャプチャ、ソースマップ、公開されている構造化定義は、見た目に合わせる作業より優先されます。
- 数値を捏造しません。確信度は仮説の状態と
SOURCE/PARTIAL/GUESSで表し、確率やスコアを作り出しません。 - プロジェクト化より先にベースラインを作成します。クリーンアップ、単純化、ネイティブ形式への変換を理由に、検証済みのベースラインを上書きしないでください。
- ラベルを正直に付けます。実装に不可欠な事実には
SOURCE、PARTIAL、GUESSのいずれかを付けます。ラベルのない値はGUESSとして扱います。 - 不足しているパイプラインの証拠を隠すために、明るさ、時間、色、オフセット、ノイズを調整しないでください。
- ゲート用アーティファクトは状態遷移のガードです。必須のアーティファクトがない、不完全である、またはゲート上重要なフィールドにプレースホルダーがある場合、状態は進んでいません。
- 製品スコープの変更、または外部アクセス/権限の障害についてのみ質問します。
- 簡潔な記録を使用します。事実、証拠のパス、現在の不明点、次のアクションを記載します。比喩、広範な主張、裏付けのない結論は避けてください。
State Router
完全な状態機械、分岐、ゲートの意味は references/recon-kernel.md に記載されています。ゲートの順序は固定です。
TARGET_LOCKED を完了する前に、ソース/バンドルの詳細な調査に進んではなりません。
ロック前に許可されるのは、nextProbe に紐づく限定的なソースプローブだけです。
実装に進む前に REPLAY_READY を完了する必要があります。
プロジェクト化に進む前に BASELINE_VERIFIED を完了する必要があります。
リファレンスルーター
現在の状態に必要なものだけを読み込みます。
| 必要なもの | 読み込むもの |
|---|---|
| グローバル契約、事実ラベル、完了状態 | references/operating-contract.md |
| カーネル、初期プロトコル、状態フロー、自律性、予算 | references/recon-kernel.md |
| サーフェスの検出と視覚的な帰属 | references/surface-discovery.md |
| ロック基準、ターゲットに紐づく証拠、スコープ、Three.js のバインディング | references/target-lock.md |
| 証拠ラベル、台帳、不明クラス、機密データ | references/evidence-policy.md |
| ツール機能の選択 | references/tool-capability-matrix.md |
| WebGL、WebGPU、Canvas2D のキャプチャに関する事実 | references/capture-backends.md |
| ソースマップ、バンドルスライス、設定、エンコードされた定義 | references/source-analysis.md |
| リプレイ準備状況、ルート、ベースライン、スタックの選択、プロジェクト化 | references/replay-policy.md |
| QA、失敗の振り分け、重大度、不一致のシグネチャ | references/qa-failure-policy.md |
| Three.js のシェーダーインジェクションまたは TSL の再構築 | references/three-shader-reconstruction.md |
| Unicorn Studio のターゲット | references/unicorn-studio.md |
| shaders.com / TSL のターゲット | references/shaders-com.md |
ツールと成果物のポリシー
ツールは置き換え可能な機能であり、前提条件ではありません。まず、利用可能な機能プロファイルを記録します。
navigate, runtime-eval, preload-script, network-metadata, network-body,
source-map, canvas-screenshot, interaction, frame-capture-webgl,
frame-capture-webgpu, local-run, multi-frame-compare
Playwright がすでに利用可能な場合に限り、任意のインベントリ補助として scripts/fetch-rendered-dom.mjs を使用してください。
scripts/scan-bundle.sh は、ターゲットに紐づくバンドルスライスまたは具体的な nextProbe に対してのみ使用してください。
スクリプトの出力は仮説の根拠です。それだけでは、サーフェス帰属、ターゲットロック、リプレイ準備完了、QA の各ゲートを満たしません。
同梱テンプレートは自由記述のメモではなく、スキーマとして使用してください。
templates/scout-card.jsontemplates/replay-manifest.jsontemplates/run-state.jsontemplates/qa-report.mdtemplates/known-gaps.mdtemplates/extraction-report.md
プラットフォームアダプター
ターゲットに紐づく証拠によって該当すると判断された場合にのみ、プラットフォームのリファレンスを読み込みます。
- Unicorn Studio:
references/unicorn-studio.md - shaders.com / TSL:
references/shaders-com.md - Three.js のシェーダーインジェクションまたは TSL:
references/three-shader-reconstruction.md
該当するアダプターがない場合は、references/capture-backends.md に記載されている汎用的な WebGL、WebGPU、または Canvas2D のキャプチャ手順に従ってください。