williammelin/webgpu-r3f-claude-skill

williammelin/webgpu-r3f-claude-skill

Cursor rule Cursor

GPU compute shaders in React Three Fiber + WebGPU using TSL. Covers instanced array buffers, parallel simulation, particle systems, atomic operations, workgroup barriers, and dispatching from useEffect/useFrame. Use when writing compute passes, particle systems, or GPU-side simulations in R3F.

williammelin/webgpu-r3f-claude-skill

Cursor rule Cursor

WebGPU device loss handling, recovery strategies, and device limits/optional features in React Three Fiber. Use when adding robustness to an R3F WebGPU app, handling GPU crashes, requesting non-default limits, or enabling optional features like timestamp queries or float32-filterable.

williammelin/webgpu-r3f-claude-skill

Cursor rule Cursor

Post-processing effects for React Three Fiber + WebGPU via the TSL node-based pipeline. Covers RenderPipeline, built-in passes (bloom, blur, FXAA, DOF), custom effects with Fn(), effect chaining, and taking over the R3F render loop. Use when building render pipelines with post effects in R3F.

williammelin/webgpu-r3f-claude-skill

Cursor rule Cursor

Entry point for React Three Fiber + WebGPU + TSL guidance. Covers Canvas/renderer setup, node materials in JSX, node-graph memoization, and TSL syntax fundamentals. Auto-attaches on JS/TS/JSX/TSX files in projects using three/webgpu with R3F.

williammelin/webgpu-r3f-claude-skill

Cursor rule Cursor

Mixing custom WGSL code into TSL shaders in React Three Fiber via wgslFn(). Use when integrating raw WGSL functions, porting existing WGSL, or optimizing hot paths that need hand-written shader code.