web-shader-extractor skill
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
- 773 ★ on the repository
- Last commit
Extended access
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
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/web-shader-extractorDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Fetches and analyzes the content of arbitrary web pages, including the rendered DOM and bundles
- Runs helper scripts on the user's machine
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/.
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.
Discussion
No questions or reviews yet.
Related
SkillsA skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
A skill builds and debugs GLSL shaders from reusable blocks, bundles dependencies into one file and checks WebGL2-oriented code.
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
A skill that guides an agent from renderer choice to browser verification for small GPU effects in interfaces on WebGL and WebGPU.
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.
README badge
Original 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.