williammelin

7 mods across 1 repository, 2 stars between them.

compute-shaders

02

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.

2 16d ago A 389 tokens

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.

2 16d ago A 479 tokens

post-processing

04

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.

2 16d ago A 518 tokens

webgpu-r3f-tsl

05

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.

2 16d ago A 1,005 tokens

wgsl-integration

06

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.

2 16d ago A 296 tokens

webgpu-r3f-tsl

07

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…

2 16d ago A 93 tokens