web-shader-extractor
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Fetches and analyzes the content of arbitrary web pages, including the rendered DOM and bundles
- Runs helper scripts on the user's machine
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/web-shader-extractorDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .claude/skills
cp -R "$tmp/web-shader-extractor" .claude/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .github/skills
cp -R "$tmp/web-shader-extractor" .github/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .devin/skills
cp -R "$tmp/web-shader-extractor" .devin/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .cline/skills
cp -R "$tmp/web-shader-extractor" .cline/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .roo/skills
cp -R "$tmp/web-shader-extractor" .roo/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add lixiaolin94/skills --skill web-shader-extractor -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit ee7e9c5
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractorCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor. Give the agent the URL of the page with the effect and an output path.
Other ways from the author
npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractorInstalls a single skill via skills.sh. Without --skill the whole repository is installed.
This is third-party code. Review the repository files before installing.
What it does
The skill guides the agent through dissecting a visual effect on a web page: an animated background, an interactive 3D scene, a shader or a Canvas animation. It first locks the target group of rendering surfaces, then gathers an evidence base: source code, runtime objects, frame captures, source maps, timings and input. From that it builds a local baseline that matches the original, and only then turns it into an editable project. The work runs as a state machine with strict transition gates: until the target is locked only narrow probes are allowed, and a verified baseline must not be rewritten for the sake of simplification. A separate rule forbids tuning brightness, time and color to mask missing pipeline evidence, and requires facts to be labelled honestly as confirmed, partial or guessed. It is not meant for ordinary DOM and CSS cloning.
Who it is for. For frontend developers and designers who study and reproduce graphical effects from web pages.
Good fit when
- You need to dissect a WebGL, WebGPU or Canvas effect from a page and understand how it works
- You need to reproduce an animated background or interactive 3D scene locally
- You need a baseline of the effect matching the original, then an editable project
Not a fit when
- You need to copy ordinary DOM and CSS markup without a graphical effect
- You need a static screenshot rather than a working render
- You have no right to reuse someone else's effect in your project
Example request
Dissect the animated background on this page and build a local copy in native JSLimitations
The skill targets shader or Canvas tasks only and is not suited to cloning DOM, CSS or static screenshots. It fetches and analyzes the target page's content, including the rendered DOM and bundles, so it should be used with the rights to the original effect in mind. Large captures and outputs go to an output directory rather than into the conversation.
How to disable. Remove the web-shader-extractor folder from the agent's skills directory, for example ~/.claude/skills/.
Security check
- Fetches and analyzes the content of arbitrary web pages, including the rendered DOM and bundles
- Runs helper scripts on the user's machine
README in short
The README presents a small collection of skills for coding agents, currently holding one skill, web-shader-extractor. It extracts WebGL, Canvas and shader effects from pages and ports them into standalone native JS projects. You can install the whole repository or a single skill with npx skills add. It has an acknowledgments section and states the MIT license. Inside, the skill carries detailed references for each stage of the analysis, report templates and helper scripts.
SKILL.md
--- name: web-shader-extractor description: > 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.
FAQ
Does it work on any page?
No. The skill is for targets built on a shader, WebGL, WebGPU or Canvas. It is not meant for ordinary DOM and CSS cloning.
How is the copy known to match?
The skill relies on evidence: sources, runtime objects, frame captures, and it labels facts honestly as confirmed, partial or guessed.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys