web-shader-extractor — Claude Code skill: use and install
Investigates WebGL, WebGPU, Canvas, and shader-like effects from a webpage, then replays them locally. Useful for animated backgrounds and interactive 3D scenes.
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-codeWhat web-shader-extractor does
The skill examines a visual effect on a webpage, fixes the relevant rendering surface, and records facts about shaders, resources, render graphs, timing, and input. It then creates a local baseline that matches the collected evidence before moving the result into an editable project.
Its workflow uses state routing, focused reference files, report and manifest templates, plus optional scripts for DOM and bundle inspection. The surface must be locked before deep source work, and a verified baseline must exist before projectization. This skill is not for ordinary DOM/CSS cloning. scripts/fetch-rendered-dom.mjs is optional and requires Playwright to already be available.
What it helps with
- inspect a WebGL effect on a webpage
- record shader and rendering-resource evidence
- replay an animated canvas background locally
- build a verified baseline before projectization
- trace render-graph and timing facts
Example prompts for the agent
- Inspect the visual effect on this webpage, lock its rendering surface, and record the shader and resource evidence.
- Replay this interactive WebGL scene locally, then build a baseline that matches the captured behavior.
- Investigate the Canvas effect and prepare the verified baseline for an editable project.
How to install web-shader-extractor
1Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code2Manually: put the files in place
~/.claude/skills/web-shader-extractor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-shader-extractor/
1Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a codex2Manually: put the files in place
.agents/skills/web-shader-extractor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a cursor2Manually: put the files in place
.cursor/skills/web-shader-extractor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install lixiaolin94/skills web-shader-extractor2Manually: put the files in place
.github/skills/web-shader-extractor/SKILL.md1Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a gemini-cli2Platform CLI
gemini skills install https://github.com/lixiaolin94/skills --path web-shader-extractorManually: put the files in place
.devin/skills/web-shader-extractor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about web-shader-extractor
How do I install web-shader-extractor in Claude Code?
Run npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code, then check ~/.claude/skills/web-shader-extractor/SKILL.md.
What does web-shader-extractor do?
It investigates WebGL, WebGPU, Canvas, and related visual effects on a webpage, records rendering evidence, and prepares a local replay before projectization.
Is this skill for cloning a regular HTML/CSS page?
No. It targets WebGL, WebGPU, Canvas, shader, animated-background, and interactive 3D work rather than ordinary DOM/CSS cloning.
