WebGPU Three.js TSL Skill
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skill consists of documentation, examples and code templates
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/webgpu-three-js-tsl-skillDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .claude/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .claude/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .github/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .github/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .devin/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .devin/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .cline/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .cline/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .roo/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .roo/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit af2319b
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tslCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: /skill install webgpu-threejs-tsl@dgreenheck/webgpu-claude-skill. Or clone the repository and copy skills/webgpu-threejs-tsl into ~/.claude/skills/. Then work with Three.js using the docs and the examples folder.
Other ways from the author
/skill install webgpu-threejs-tsl@dgreenheck/webgpu-claude-skillInstalls the skill directly from the repository.
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a reference for Three.js graphics on the WebGPU renderer with the TSL shading language. It explains how to start a WebGPU renderer, build node materials, write compute shaders and post-processing chains, embed custom WGSL, and handle GPU device loss. It bundles topic docs, ready examples (basic scene, custom material, particle system, Earth shader) and project templates. The same material is mirrored as Cursor rules that attach to matching files by glob.
Who it is for. For developers building interactive browser 3D graphics with Three.js and WebGPU.
Good fit when
- You need to set up Three.js on the WebGPU renderer and write a TSL material
- You need a compute shader, particle system or post-processing chain
- You are porting shaders from GLSL to TSL or embedding your own WGSL
Not a fit when
- The project stays on the Three.js WebGL renderer without TSL
- You need graphics outside Three.js, for example raw WebGPU or another engine
Example request
Set up Three.js with the WebGPU renderer and make a material with an animated fresnel effect in TSLLimitations
The material targets Three.js r171 and later and flags API changes in newer releases. WebGPU is not supported everywhere: stable in Chrome and Edge, behind a flag in Firefox, in preview in Safari. The skill provides knowledge and examples but does not replace testing the code in a real project.
How to disable. Remove the webgpu-threejs-tsl folder from the skills directory, or uninstall the plugin via /plugin. In Cursor delete the .cursor/rules files from the project.
Security check
- The skill consists of documentation, examples and code templates
README in short
The README describes a skill for Three.js development on the WebGPU renderer with the TSL shading language. Content is split into topic docs, examples and templates, with SKILL.md as the entry point. The same material ships in two formats: an Agent Skill for Claude Code and Cursor rules that reference the shared files. It also lists Three.js version compatibility and browser support. MIT licensed, with code examples derived from Three.js.
SKILL.md
---
name: webgpu-threejs-tsl
description: Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.
---
# WebGPU Three.js with TSL
TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
## Quick Start
```javascript
import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';
const renderer = new THREE.WebGPURenderer();
await renderer.init();
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));
```
## Skill Contents
### Documentation
- `docs/core-concepts.md` - Types, operators, uniforms, control flow
- `docs/materials.md` - Node materials and all properties
- `docs/compute-shaders.md` - GPU compute with instanced arrays
- `docs/post-processing.md` - Built-in and custom effects
- `docs/wgsl-integration.md` - Custom WGSL functions
- `docs/device-loss.md` - Handling GPU device loss and recovery
- `docs/limits-and-features.md` - WebGPU device limits and optional featuresFAQ
What is TSL?
Three.js Shading Language, a node approach to shaders: instead of GLSL or WGSL strings the shader is described with JavaScript functions and method chaining.
Does the skill work in Cursor?
Yes. The same material is packaged as .cursor/rules that reference files inside skills/, so both folders must stay together.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys