Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
This skill documents how to build WebGPU-accelerated Three.js applications using TSL, a node-based shading language that keeps shader logic inside JavaScript. It covers the WebGPU renderer setup, custom node materials, compute shaders for particle systems, post-processing pipelines, and WGSL function integration. It helps Three.js developers and graphics programmers write shaders that are easier to compose, read, and maintain without switching between shading languages.
WHO IT'S FOR
Three.js / WebGPU Graphics Developers
building WebGPU Three.js apps
Creative / Visual Effects Developers
implementing GPU visual effects and post-processing
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
Platform: Target browsers: Chrome 113+, Edge 113+, Firefox behind a flag, and Safari with WebGPU preview.
Run from: <project>
Replace `<project>` with the target project's root path, then manually copy the repository's `skills/webgpu-threejs-tsl` folder into `<project>/.claude/skills/`.
Platform: Target browsers: Chrome 113+, Edge 113+, Firefox behind a flag, and Safari with WebGPU preview.
Run from: Cloned webgpu-claude-skill repository root
Clone this repository by your normal repository-cloning method, then open the cloned repository directly in Cursor; Cursor automatically picks up `.cursor/rules/`.
Platform: Target browsers: Chrome 113+, Edge 113+, Firefox behind a flag, and Safari with WebGPU preview.
Run from: Target project root
Manually copy both `.cursor/rules/` and `skills/webgpu-threejs-tsl/` from this repository into the target project root, preserving those paths because the `.mdc` rules reference the skill documentation with `@file`.
`<project-path>`: replace with the existing Three.js project path
A project using the recommended Three.js r171+ compatibility level and the required `three/webgpu` import-map entry
A supported WebGPU browser target
Use the webgpu-threejs-tsl skill to create a minimal example for the Three.js project at `<project-path>`. Use the `three/webgpu` and `three/tsl` entry points, initialize `WebGPURenderer`, and create a red `MeshStandardNodeMaterial` animated with `oscSine(time)`. Replace `<project-path>` with the actual project path and keep the result focused on this basic setup.
Claude
Cursor