# Web Shader Extractor

Use when a user gives or references a webpage URL and wants to extract, reproduce...

- Repository: https://github.com/lixiaolin94/skills (768 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-30
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add lixiaolin94/skills --skill web-shader-extractor -g -a claude-code -y`
Codex: `npx skills add lixiaolin94/skills --skill web-shader-extractor -g -a codex -y`
Cursor: `npx skills add lixiaolin94/skills --skill web-shader-extractor -g -a cursor -y`
Gemini CLI: `npx skills add lixiaolin94/skills --skill web-shader-extractor -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.md`
- `references/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.

## Core Rules

The rest: https://github.com/lixiaolin94/skills/blob/HEAD/web-shader-extractor/SKILL.md