# Web Shader Extractor > 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. - Skill: `lixiaolin94/web-shader-extractor` (Agent Skill, multi-file: 22 files) - Install (CLI): `npx skillmds@latest add lixiaolin94/web-shader-extractor` - Raw SKILL.md: https://api.skillmd.com/api/skills/lixiaolin94/web-shader-extractor/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: lixiaolin94 (https://skillmd.com/u/lixiaolin94) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/lixiaolin94/web-shader-extractor --- # 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: | Need | Read | |---|---| | Global contract, fact labels, completion states | `references/operating-contract.md` | | Kernel, initial protocol, state flow, autonomy, budgets | `references/recon-kernel.md` | | Surface discovery and visual attribution | `references/surface-discovery.md` | | Lock criteria, target-bound evidence, scope, Three.js binding | `references/target-lock.md` | | Evidence labels, ledgers, unknown classes, sensitive data | `references/evidence-policy.md` | | Tool capability selection | `references/tool-capability-matrix.md` | | WebGL, WebGPU, and Canvas2D capture facts | `references/capture-backends.md` | | Source maps, bundle slices, config, encoded definitions | `references/source-analysis.md` | | Replay readiness, routes, baseline, stack choice, projectization | `references/replay-policy.md` | | QA, failure routing, severity, mismatch signatures | `references/qa-failure-policy.md` | | Three.js shader injection or TSL reconstruction | `references/three-shader-reconstruction.md` | | Unicorn Studio target | `references/unicorn-studio.md` | | shaders.com / TSL target | `references/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`.