Web Shader Extractor

lixiaolin94/skills/web-shader-extractor

作者 lixiaolin94ee7e9c50049bf9278b7810c3cd00802cfa401138無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Use when a user gives or references a webpage URL and wants to extract, reproduce, port, or locally replay a WebGL, WebGPU, Canvas, shader-like, animated background, interactive 3D, or web visual effect. Locks the target rendering surface group, records shader/resource/render graph/timing/input evidence, builds an evidence-matched local baseline, then projectizes it. Do not use for ordinary DOM/CSS page cloning.

AI 產生的概覽

從指定網頁 URL 擷取 WebGL、WebGPU 或 Canvas 著色器效果,並在本機重現。

功能
此技能會調查目標網頁的算繪表面、鎖定表面群組,並蒐集著色器、資源、算繪圖、時序與輸入的證據。它會先建立與證據相符的本機基準,再將其專案化為可編輯的專案,產出擷取報告、重播清單、QA 報告與已知缺口文件。它附有擷取算繪後 DOM 與掃描打包片段的輔助指令碼,以及狀態與報告範本。
適用情境
當使用者提供或引用某個網頁 URL,並想擷取、重現、移植或在本機重播著色器類、WebGL、WebGPU、Canvas、動態背景或互動式 3D 效果時使用。它不適用於一般 DOM 或 CSS 頁面複製、靜態截圖、通用網站複製或產品介面重新設計。
執行需求
需要具備瀏覽器能力的代理,例如導覽、執行階段求值、預載指令碼、網路中介資料與回應內容存取、source map、畫布截圖、互動、WebGL/WebGPU 影格擷取、本機執行與多影格比對。選用的算繪後 DOM 擷取指令碼需要 Playwright;打包掃描指令碼在 shell 中執行。此技能附有可執行指令碼及參考與範本檔案,並需要一個輸出目錄來存放大型擷取內容與產生的成品。

Web Shader Extractor

Index for WebGL / WebGPU / Canvas rendering investigation and local replay. Start from the target visual. Lock the surface group. Trace source or runtime facts. Build a runnable baseline. Then projectize.

Router Contract

This file is the index. Do not treat it as the full operating manual. Before task action, read:

  • references/operating-contract.md
  • references/recon-kernel.md

Then load only the focused references needed by the current state. Keep large evidence, captures, and generated outputs out of the conversation. Store them in the user's output directory.

Use This For

  • Extracting a webpage WebGL, WebGPU, Canvas2D, OffscreenCanvas, shader, or animated canvas effect.
  • Replaying an animated background, product shader, interactive WebGL scene, or Canvas visual locally.
  • Building an evidence-matched baseline first, then an editable project.
  • Investigating target-bound shader/render graph/timing/resource/input facts.

Do not use this for ordinary DOM/CSS cloning, static screenshots, generic website copying, unrelated JavaScript deobfuscation, or product UI redesign. Use it only when the task has a shader/canvas target.

Core Rules

  • Target-bound before framework-bound: a global Three.js, platform, or shader signature is only a hypothesis until tied to the target surface group.
  • Probes must discriminate: before running a probe, state which live hypotheses it separates and what each outcome eliminates. Evidence consistent with every candidate is weak; evidence only one candidate predicts is strong.
  • Evidence before implementation: source, runtime objects, frame captures, source maps, and public structured definitions outrank visual fitting.
  • No fabricated numbers: confidence is expressed with hypothesis status and SOURCE/PARTIAL/GUESS, never invented probabilities or scores.
  • Baseline before projectization: never overwrite a verified baseline for cleanup, simplification, or native conversion.
  • Honest labels: implementation-critical facts are SOURCE, PARTIAL, or GUESS; unlabeled values are treated as GUESS.
  • No compensation tuning: do not adjust brightness, time, color, offsets, or noise to mask missing pipeline evidence.
  • Gate artifacts are transition guards: if the required artifact is missing, incomplete, or has placeholders in gate-critical fields, the state has not advanced.
  • Ask only for product scope changes or external access/permission blockers.
  • Use plain records: state the fact, evidence path, current unknown, and next action. Avoid metaphor, broad claims, and unsupported conclusions.

State Router

The full state machine, branches, and gate semantics live in references/recon-kernel.md. The gate order is fixed:

TARGET_LOCKED must precede deep source/bundle work. Before lock, only narrow source probes tied to nextProbe are allowed. REPLAY_READY must precede implementation. BASELINE_VERIFIED must precede projectization.

Reference Router

Load only what the current state needs:

NeedRead
Global contract, fact labels, completion statesreferences/operating-contract.md
Kernel, initial protocol, state flow, autonomy, budgetsreferences/recon-kernel.md
Surface discovery and visual attributionreferences/surface-discovery.md
Lock criteria, target-bound evidence, scope, Three.js bindingreferences/target-lock.md
Evidence labels, ledgers, unknown classes, sensitive datareferences/evidence-policy.md
Tool capability selectionreferences/tool-capability-matrix.md
WebGL, WebGPU, and Canvas2D capture factsreferences/capture-backends.md
Source maps, bundle slices, config, encoded definitionsreferences/source-analysis.md
Replay readiness, routes, baseline, stack choice, projectizationreferences/replay-policy.md
QA, failure routing, severity, mismatch signaturesreferences/qa-failure-policy.md
Three.js shader injection or TSL reconstructionreferences/three-shader-reconstruction.md
Unicorn Studio targetreferences/unicorn-studio.md
shaders.com / TSL targetreferences/shaders-com.md

Tool And Artifact Policy

Tools are replaceable capabilities, not prerequisites. First record the available capability profile:

text
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

Use scripts/fetch-rendered-dom.mjs only as an optional inventory helper when Playwright is already available. Use scripts/scan-bundle.sh only on target-bound bundle slices or a precise nextProbe. Script output is hypothesis evidence. It never satisfies Surface Attribution, Target Lock, Replay Ready, or QA gates by itself.

Use bundled templates as schemas, not free-form notes:

  • templates/scout-card.json
  • templates/replay-manifest.json
  • templates/run-state.json
  • templates/qa-report.md
  • templates/known-gaps.md
  • templates/extraction-report.md

Platform Adapters

Load platform references only after target-bound evidence points there:

  • Unicorn Studio: references/unicorn-studio.md
  • shaders.com / TSL: references/shaders-com.md
  • Three.js shader injection or TSL: references/three-shader-reconstruction.md

If no adapter fits, follow generic WebGL, WebGPU, or Canvas2D capture in references/capture-backends.md.

來源與署名

來源:lixiaolin94/skills位於web-shader-extractor提交ee7e9c5

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架