williammelin/webgpu-r3f-claude-skill

williammelin/webgpu-r3f-claude-skill

Plugin Claude Code

Plugin marketplace listing 1 plugin: webgpu-r3f-tsl.

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.

williammelin/webgpu-r3f-claude-skill

Skill Claude CodeCodex

Comprehensive guide for developing WebGPU-enabled React Three Fiber applications using TSL (Three.js Shading Language). Covers Canvas/WebGPURenderer setup, TSL syntax and node materials in JSX, compute shaders driven from useFrame, post-processing effects, and WGSL integration. Use this skill when working with React…