WebGPU Skill

Use this skill to design, implement, and debug WebGPU applications and GPU compute pipelines. Keep it framework-agnostic and focus on reusable WebGPU/WGSL patterns.

What this skill covers

• Cover WebGPU initialization, device setup, and surface configuration.
• Cover compute pipelines, workgroup sizing, and storage buffer layout.
• Cover render pipelines, render passes, and post-processing patterns.
• Cover GPU/CPU synchronization and safe readback strategies.
• Cover performance and debugging practices.
• Cover architecture patterns: modular passes, phase-based simulation, and capability handling.
• Cover 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.

Workflow

When asked to build a WebGPU feature:

1. Confirm the target platform and WebGPU support expectations.
2. Propose a resource layout (buffers, textures, bind groups) with a simple data model.
3. Sketch the pipeline graph (compute vs render passes) and dependencies.
4. Provide minimal working code and scale up with performance constraints.
5. Choose a capability strategy when WebGPU is unavailable.

Deliverable checklist

• Provide clean WebGPU init and error handling.
• Include a buffer layout with alignment notes (16-byte struct alignment for WGSL).
• Include a pass graph with clear read/write ownership (ping-pong textures if needed).
• Call out readback and when it is safe.
• Provide an optional fallback or reduced mode for critical functionality.

References and assets

• Use REFERENCE.md for a compact WebGPU cheat sheet.
• Use references/ for deeper patterns and concepts.
• Use examples/ for runnable snippets.
• Use templates/ for project scaffolds or starter code.

Quick reference

See REFERENCE.md for a compact WebGPU cheat sheet and references/ for deeper patterns, including references/use-cases.md and references/simulation-patterns.md.