webgpu-threejs-tsl-skill: Write WebGPU Shaders in Three.js TSL

Ask a general-purpose assistant to write a WebGPU shader for Three.js and you get a mix of stale APIs and plausible-looking TSL that never runs. webgpu-claude-skill is a knowledge skill for exactly this niche: developing WebGPU-enabled Three.js applications with TSL (Three.js Shading Language).

Why This Skill Matters

TSL is young and moving fast — the README's version notes alone record that r178 deprecated PI2 (use TWO_PI) and renamed transformedNormalView/World to normalView/World. This skill is dated April 1, 2026 and aligned with the r183+ API changes, which is precisely the knowledge a model's training data lags behind. It covers setting up the WebGPU renderer, writing shaders in TSL, node-based materials, GPU compute shaders, post-processing effects, and integrating custom WGSL code. It also ships working examples — from basic-setup.js to a complete earth-shader.js with atmosphere — plus starter templates.

One skill, two editors. The Claude skill under skills/ is the source of truth; the repo also packages the same content as Cursor rules under .cursor/rules/, which @file-reference the skill docs and auto-attach by glob — compute-shaders.mdc only loads for files matching *compute* or *particle*, for example.

Installation

For Claude Code, either install from the repository:

/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill

or copy the skills/webgpu-threejs-tsl folder to ~/.claude/skills/ (global) or <project>/.claude/skills/ (project-level).

For Cursor, copy both directories into your project root, preserving the paths — the .mdc rule files point at the skills/ folder:

your-project/
├── .cursor/rules/
└── skills/webgpu-threejs-tsl/

Real Workflow: Light a Mesh with an Animated Fresnel Rim

1. Install the skill, then ask for the effect directly:

Set up a Three.js WebGPU renderer and give my hero mesh an animated
fresnel emissive rim using TSL.

2. The expected shape of the answer follows the skill's own quick example: a WebGPURenderer with await renderer.init(), a MeshStandardNodeMaterial, and nodes doing the work:

import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0x0066ff);

material.emissiveNode = Fn(() => {
  const viewDir = cameraPosition.sub(positionWorld).normalize();
  const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
  return color(0x00ffff).mul(fresnel).mul(oscSine(time));
})();

3. From there, keep going with the docs the skill carries: ask for a GPU compute particle system and it draws on its compute-shader material — instanced array buffers, parallel physics simulation, atomic operations and barriers; ask for bloom and it works within the post-processing docs (built-in bloom, blur, FXAA, DOF, custom Fn() effects, effect chaining, multiple render targets).

4. If something dies on you, the skill includes device-loss documentation: detecting GPU device loss, recovery strategies, testing with destroy() and Chrome's GPU crash simulation, and state preservation and restoration.

Tips

• Check the version gates before blaming the skill. It recommends Three.js r171+; r178+ renamed several TSL APIs. Browser support is also gated: Chrome 113+, Edge 113+, Firefox behind a flag, Safari in WebGPU preview.
• Start from examples/ rather than a blank file. earth-shader.js is a complete worked example, and templates/webgpu-project.js is a starter scaffold.
• In Cursor, never copy .cursor/rules/ without skills/ — the rules are thin shims that reference the skill documents by path.
• The reference cheatsheet (REFERENCE.md) is the fastest way to check a type, operator, or swizzling pattern without leaving your editor.

When Not to Use This

The skill targets the WebGPU renderer and TSL, with Three.js r171+ as its recommended range — a project on the classic WebGL renderer or an older three.js falls outside what it documents. And if your goal is general Three.js scene-graph work with no custom shading, a full knowledge skill for a shading language is more machinery than the task needs.

See the leaderboard for more skills.