Web Shader Extractor
Use when a user gives or references a webpage URL and wants to extract, reproduce...
Install
npx skills add lixiaolin94/skills --skill web-shader-extractor -g -a claude-code -y- Repository
- lixiaolin94/skills768
- Category
- Design
- Updated
- 6d ago
- License
- See repository
- Context cost
- Lightabout 1,362 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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.mdreferences/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.
