Shader Extract

What it does

When your agent uses it

• A page has a WebGL/WebGPU/canvas shader background
• Animated 3D hero
• Generative gradient
• Unicorn Studio / Spline / Three.js effect that must be captured and rebuilt as a runnable local module

Example prompts

• “extract this shader”
• “clone the WebGL background”
• “port this canvas effect”
• “/shader-extract”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

1. 1Intake — accept a pre-locked surface from the clone-site coordinator so
2. 2Capture backends — make the concrete, research-verified capture tools

What it can do on your machine

Read from SKILL.md and the folder at commit f01d396. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Shader Extract loads about 1.4k tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 181 tokens; SKILL.md has 559 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~181

When it runs · the whole SKILL.md, loaded when a task matches

~1.4k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cth9191/site-clone at commit f01d396, republished under its MIT licence (© cth9191). 559 words, ~1,375 tokens.

name

shader-extract

description

Extract, reproduce, and locally replay a single WebGL / WebGPU / Canvas / shader / animated-3D visual effect from a web page — the GPU-rendered surface that DOM/CSS cloning is blind to. Use whenever a page has a WebGL/WebGPU/canvas shader background, animated 3D hero, generative gradient, particle field, or Unicorn Studio / Spline / Three.js effect that must be captured and rebuilt as a runnable local module. This is the GPU track of a site clone (driven by clone-site) but also stands alone. Trigger on "extract this shader", "clone the WebGL background", "port this canvas effect", "rebuild this animated hero", "reproduce this Three.js scene locally". NOT for ordinary DOM/CSS cloning (use dom-clone).

argument-hint

<url> | <locked surface: selector + rect + driver + output-dir>

user-invocable

false

export function mount(canvasEl, opts) { /* start renderer + rAF loop */ return handle }
export function unmount(handle)        { /* cancel rAF, loseContext, free GPU */ }
export function resize(handle, w, h, dpr) { /* resize drawing buffer + viewport */ }

© cth9191, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 26 other files (references) in skills/shader-extract of cth9191/site-clone.

• SKILL.md
• ATTRIBUTION.md
• references/capture-backends.md
• vendor/web-shader-extractor/SKILL.md
• vendor/web-shader-extractor/references/capture-backends.md
• vendor/web-shader-extractor/references/evidence-policy.md
• vendor/web-shader-extractor/references/operating-contract.md
• vendor/web-shader-extractor/references/qa-failure-policy.md
• vendor/web-shader-extractor/references/recon-kernel.md
• vendor/web-shader-extractor/references/replay-policy.md
• vendor/web-shader-extractor/references/shaders-com.md
• vendor/web-shader-extractor/references/source-analysis.md
• vendor/web-shader-extractor/references/surface-discovery.md
• vendor/web-shader-extractor/references/target-lock.md
• vendor/web-shader-extractor/references/three-shader-reconstruction.md
• vendor/web-shader-extractor/references/tool-capability-matrix.md
• vendor/web-shader-extractor/references/unicorn-studio.md
• … and 10 more

Open the folder on GitHubat commit f01d396