WebGPU Skill

---
name: webgpu-7cc5a7647148
description: Build WebGPU render and compute pipelines with portable best practices.
version: 0.1.0
license: MIT
tags: [webgpu, wgsl, gpu, shaders, compute, rendering, performance]
---

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

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

- 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`.