WebGPU Skill
This skill helps any agent design, implement, and debug WebGPU applications and GPU compute pipelines. It is framework-agnostic and focuses on reusable WebGPU/WGSL patterns.
What this skill covers
- WebGPU initialization, device setup, and surface configuration
- Compute pipelines, workgroup sizing, and storage buffer layout
- Render pipelines, render passes, and post-processing patterns
- GPU/CPU synchronization and safe readback strategies
- Performance and debugging practices
- Architecture patterns: modular passes, phase-based simulation, and capability handling
- Use cases: rendering, compute, ML training/inference, grid simulations, and systems modeling
Core principles
- Choose a capability strategy: fallback runtime, reduced mode, or fail fast.
- Avoid full GPU readbacks in hot paths; use localized queries or small readback buffers.
- Structure simulation with phases (state, apply, integrate, constrain, correct) to keep WGSL cohesive.
- Use spatial grids or other spatial indexing for neighbor queries and high particle counts.
- Build modular passes so render and compute stages stay composable and testable.
How to use this skill
When asked to build a WebGPU feature:
- Confirm the target platform and WebGPU support expectations.
- Propose a resource layout (buffers, textures, bind groups) with a simple data model.
- Sketch the pipeline graph (compute vs render passes) and dependencies.
- Provide minimal working code and scale up with performance constraints.
- Choose a capability strategy when WebGPU is unavailable.
Deliverable checklist
- Clean WebGPU init and error handling
- A buffer layout with alignment notes (16-byte struct alignment for WGSL)
- A pass graph with clear read/write ownership (ping-pong textures if needed)
- Explicit notes on readback and when it is safe
- Optional fallback or reduced mode for critical functionality
Quick reference
See REFERENCE.md for a compact WebGPU cheat sheet and docs/ for deeper patterns, including docs/use-cases.md and docs/simulation-patterns.md.
1---2name: webgpu3description: Build WebGPU render and compute pipelines with portable best practices.4license: MIT5---6
7# WebGPU Skill
8
9This skill helps any agent design, implement, and debug WebGPU applications and GPU compute pipelines. It is framework-agnostic and focuses on reusable WebGPU/WGSL patterns.
10
11## What this skill covers
12
13- WebGPU initialization, device setup, and surface configuration
14- Compute pipelines, workgroup sizing, and storage buffer layout
15- Render pipelines, render passes, and post-processing patterns
16- GPU/CPU synchronization and safe readback strategies
17- Performance and debugging practices
18- Architecture patterns: modular passes, phase-based simulation, and capability handling
19- Use cases: rendering, compute, ML training/inference, grid simulations, and systems modeling
20
21## Core principles
22
23- Choose a **capability strategy**: fallback runtime, reduced mode, or fail fast.
24- Avoid full GPU readbacks in hot paths; use **localized queries** or small readback buffers.
25- Structure simulation with **phases** (state, apply, integrate, constrain, correct) to keep WGSL cohesive.
26- Use **spatial grids** or other spatial indexing for neighbor queries and high particle counts.
27- Build **modular passes** so render and compute stages stay composable and testable.
28
29## How to use this skill
30
31When asked to build a WebGPU feature:
32
331. Confirm the target platform and WebGPU support expectations.
342. Propose a resource layout (buffers, textures, bind groups) with a simple data model.
353. Sketch the pipeline graph (compute vs render passes) and dependencies.
364. Provide minimal working code and scale up with performance constraints.
375. Choose a capability strategy when WebGPU is unavailable.
38
39## Deliverable checklist
40
41- Clean WebGPU init and error handling
42- A buffer layout with alignment notes (16-byte struct alignment for WGSL)
43- A pass graph with clear read/write ownership (ping-pong textures if needed)
44- Explicit notes on readback and when it is safe
45- Optional fallback or reduced mode for critical functionality
46
47## Quick reference
48
49See `REFERENCE.md` for a compact WebGPU cheat sheet and `docs/` for deeper patterns, including `docs/use-cases.md` and `docs/simulation-patterns.md`.
50
majiayu000