webgpu — Claude Code skill: what it does, how to install
This skill guides WebGPU and WGSL work, from pipeline design to debugging and tuning. Use it for rendering, compute workloads, and GPU simulations.
npx skills add cazala/webgpu-skill --skill webgpu -a claude-codeWhat webgpu does
The skill takes WebGPU work from a small observable result to a larger application. It helps map resources and pass ownership, define buffers, textures, bind groups, and WGSL layouts, then build compute and render pipelines with checks for visible or numeric output.
Its guidance covers ping-pong state, canvas sizing, device pixel ratio, readback, compilation diagnostics, uncaptured errors, device loss, and teardown. A browser starter project is available in assets/starter/; it includes a typed particle field with compute and rendering. If navigator.gpu is unavailable, the application needs a fallback, a reduced mode, or a clear failure path.
The skill addresses particles, cellular automata, image processing, feedback effects, and other data-parallel workloads. Host code should be checked against current @webgpu/types. Optional features such as shader-f16 should be gated after the device capabilities are confirmed.
What it helps with
- design a WebGPU resource and pass graph
- calculate WGSL buffer offsets and array strides
- build compute and render pipelines
- handle canvas resize, errors, and device loss
- diagnose validation and readback issues
Example prompts for the agent
- Design a WebGPU particle simulation with ping-pong buffers and a canvas render pass.
- Review this WGSL and host code for buffer sizes, bind groups, dispatch counts, and synchronization hazards.
- Start from
assets/starter/and add resize handling, pointer input, anddevice.lostreporting.
How to install webgpu
1Skills CLI (Vercel)
npx skills add cazala/webgpu-skill --skill webgpu -a claude-code2Manually: put the files in place
~/.claude/skills/webgpu/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/webgpu/
1Skills CLI (Vercel)
npx skills add cazala/webgpu-skill --skill webgpu -a codex2Manually: put the files in place
.agents/skills/webgpu/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add cazala/webgpu-skill --skill webgpu -a cursor2Manually: put the files in place
.cursor/skills/webgpu/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install cazala/webgpu-skill webgpu2Manually: put the files in place
.github/skills/webgpu/SKILL.md1Skills CLI (Vercel)
npx skills add cazala/webgpu-skill --skill webgpu -a gemini-cli2Platform CLI
gemini skills install https://github.com/cazala/webgpu-skillManually: put the files in place
.devin/skills/webgpu/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add cazala/webgpu-skill --skill webgpu -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 webgpu
How do I install webgpu in Claude Code?
Run npx skills add cazala/webgpu-skill --skill webgpu -a claude-code. The skill will be available at ~/.claude/skills/webgpu/SKILL.md.
What does webgpu do?
It guides the design, implementation, review, debugging, and optimization of WebGPU applications and WGSL shaders, including resource setup, passes, presentation, and lifecycle handling.
How does the skill handle optional WebGPU features?
It treats shader-f16, timestamp queries, subgroups, and raised limits as optional accelerators. Build a portable core path first, then gate each feature on the capabilities granted by the device.
