# webgpu

This skill guides WebGPU and WGSL work, from pipeline design to debugging and tuning. Use it for rendering, compute workloads, and GPU simulations.

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

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

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add cazala/webgpu-skill --skill webgpu -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cazala/webgpu-skill --skill webgpu -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cazala/webgpu-skill --skill webgpu -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cazala/webgpu-skill webgpu
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cazala/webgpu-skill --skill webgpu -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cazala/webgpu-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cazala/webgpu-skill --skill webgpu -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/cazala/webgpu-skill/tree/HEAD/SKILL.md

## When to use it
- 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
- 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, and `device.lost` reporting.

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