# web-shader-extractor

Investigates WebGL, WebGPU, Canvas, and shader-like effects from a webpage, then replays them locally. Useful for animated backgrounds and interactive 3D scenes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 825 installs · ★ 766
- Author: lixiaolin94
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/lixiaolin94/skills/tree/HEAD/web-shader-extractor/SKILL.md
- Updated: 2026-07-03
- HTML: https://affpapa.org/en/nevibecode/skills/web-shader-extractor

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

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/web-shader-extractor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web-shader-extractor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add lixiaolin94/skills --skill web-shader-extractor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/web-shader-extractor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add lixiaolin94/skills --skill web-shader-extractor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/web-shader-extractor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install lixiaolin94/skills web-shader-extractor
```

2. **Manually: put the files in place**
- File: `.github/skills/web-shader-extractor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add lixiaolin94/skills --skill web-shader-extractor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/lixiaolin94/skills --path web-shader-extractor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web-shader-extractor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add lixiaolin94/skills --skill web-shader-extractor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/lixiaolin94/skills/tree/HEAD/web-shader-extractor/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md