LeahyCCLeahyCC/claude-skills/skills/webgpu/SKILL.md

webgpu

Skill3 starsChanged 8 months agoMITView on GitHub

Writes, reviews, and debugs WebGPU and WGSL code: adapter and device setup, feature detection and WebGL2 fallback, buffers and struct alignment, textures, bind groups, pipelines, depth, MSAA, compute shaders, the canvas frame loop, React integration, device loss, error scopes, GPU timing, and testing. Use when code touches navigator.gpu, GPUDevice, a .wgsl file, a WebGPU black canvas or validation error, or a WebGL port to WebGPU. Not for deciding whether WebGPU will make a page faster (spa-performance).

1 other project uses a version of this.

Adopted by

Most recently taken up by

shreyam1008/shre-skillstheir own version, first seen Oct 9, 2026

Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
shreyam1008/shre-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository17 other files it gives its agents.
- api-securitySkill
- ascii-artSkill
- code-readabilitySkill
- gotchasSkill
- llm-agent-securitySkill
- nextjs-app-routerSkill
- plain-docsSkill
- product-marketingSkill
- prompt-rewriteSkill
- react-performanceSkill
- react-testingSkill
- seoSkill
- spa-performanceSkill
- tailwind-design-systemSkill
- typescript-safetySkill
- ux-copySkill
- wcag-accessibilitySkill

The file

We split this skill into the rules it gives an agent

4 rules. About 0 are common, 3 are distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Read setup.md. Detect, request only the features and limits the adapter has, and decide the fallback.
line 25
Very specific:
Add the uncapturederror listener and device.lost handler from errors-and-device-loss.md.
line 26
Distinctive:
Read the resource for the thing you are building.
line 28
Distinctive:
Check the resource's checklist, then report how far the code was checked, using the levels in debugging-and-testing.md.
line 30

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

WebGPU

Writing WebGPU that works on the browsers you ship to, and does not fail silently when it does not. Whether WebGPU is the right fix for a slow page belongs to the spa-performance skill.

WebGPU almost never throws. A bad call returns an invalid object and reports the error later, and a lost device turns every call into a no-op. Wire up error reporting and device loss before anything else, or a black canvas is all you get.

If an engine owns the device, use the engine. In three.js, Babylon.js, or a library like TypeGPU, follow that library's API and its docs. Do not mix raw WebGPU calls into its frame unless it documents a way to. This skill is for code that owns its own device.

Source checks and dates: SOURCES.md.

Procedure

Read setup.md. Detect, request only the features and limits the adapter has, and decide the fallback.
Add the uncapturederror listener and device.lost handler from errors-and-device-loss.md. Label every object.
For multi-pass or compute work, write down each pass first: what it reads, what it writes, and which buffer holds the current data afterwards.
Read the resource for the thing you are building.
For any struct shared with the CPU, run node scripts/wgsl-layout.mjs <file.wgsl> and use the offsets it prints. Add --uniform for uniform buffers.
Check the resource's checklist, then report how far the code was checked, using the levels in debugging-and-testing.md.

navigator.gpu? -> adapter? -> device?  --any no--> fallback, log why
                                 |
                       error listener + device.lost
                                 |
        +------------------------+------------------------+
        |                        |                        |
   draw to canvas           compute only              both
   canvas.md                compute.md                all three
   render-basics.md              |
        |                        |
        +--- buffers-and-textures.md, wgsl.md, pipelines.md ---+
                                 |
          check it: debugging-and-testing.md   slow? profiling.md

Where to read

Task	Resource
Support, detection, adapter, device, limits, fallback, old tutorials	setup.md
Error scopes, labels, device loss and recovery	errors-and-device-loss.md
Usage flags, alignment, uploads, readback, textures, mipmaps	buffers-and-textures.md
Struct layout, the vec3 trap, uniformity, overrides, extensions, untrusted shaders	wgsl.md
Async pipelines, explicit layouts, bind group frequency, instancing	pipelines.md
Vertex layouts, depth, culling, blending, MSAA, video, porting from WebGL	render-basics.md
Configure, frame loop, resize, React, workers	canvas.md
Workgroups, dispatch, bounds, barriers, atomics	compute.md
GPU time with timestamp queries	profiling.md
`chrome://gpu`, capture tools, offline WGSL checks, tests in Node and headless Chrome	debugging-and-testing.md

The traps that cost the most time

Symptom	Usual cause	Read
Black canvas, no exception	An invalid object upstream. Read the first error, not the last.	errors-and-device-loss.md
Values shifted or garbled in the shader	`vec3` is 16-byte aligned. The CPU packed it at 12. Run the layout script.	wgsl.md
Works in dev, black after a while in production	Device lost and never recovered	errors-and-device-loss.md
Bind group rejected by a second pipeline	Both used `layout: 'auto'`	pipelines.md
Near objects vanish after a WebGL port	Projection maps depth to -1..1. WebGPU clips at 0..1.	render-basics.md
Far objects draw over near ones	No depth texture or `depthStencil` state	render-basics.md
Blurry or stretched output	Canvas size in CSS pixels, not device pixels	canvas.md
Device creation fails on some machines	A feature or limit requested that the adapter lacks	setup.md
Big buffer binding rejected though the GPU is large	The device got the default limit. Request it in `requiredLimits`.	setup.md
Last elements never computed	Dispatch count truncated, not rounded up	compute.md
`textureSample` compile error inside an `if`	Uniformity analysis	wgsl.md
Video frame bind group errors after the first frame	External textures expire. Import and bind each frame.	render-basics.md
Two devices in development, one leaked	React Strict Mode cleanup ran during the async setup	canvas.md
GPU timer always reads zero	The pass is shorter than the browser's timer quantum	profiling.md

Review checklist

Every way setup can fail reaches a fallback, and the reason is logged
An uncapturederror listener and a device.lost handler exist, and recovery starts from a new adapter
Every descriptor has a label
Features and limits are requested only when the adapter has them
Every CPU-shared struct has offsets from the layout script, not from hand counting
Pipelines are created async, outside the frame loop
getCurrentTexture() is called each frame, and the canvas is sized in device pixels
The projection maps depth to 0..1
Compute dispatches round up, and shaders bounds-check
Readback never makes a frame wait
Buffers, textures, and the device are destroyed on teardown
The report says how far the code was checked: types, WGSL, a real device, a browser

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free