skill CX Codex

webgpu-threejs-tsl — Claude Code skill: what it does, how to install

Q: How do I install webgpu-threejs-tsl in Claude Code?

Run `npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code`, then run `npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code` again. The skill file is placed at `~/.claude/skills/webgpu-threejs-tsl/SKILL.md`.

Q: Which imports are used for WebGPU and TSL?

Import Three.js from `three/webgpu` and import TSL functions from `three/tsl`. The standard Three.js entry point does not fit this setup.

Guides an agent through Three.js work with WebGPU, TSL node materials, GPU compute shaders, and post-processing effects.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code

Open on GitHub

What webgpu-threejs-tsl does

This skill gives an agent reference material and examples for Three.js projects that use the WebGPU renderer. It covers TSL syntax, node materials, reusable shader functions, GPU compute, post-processing, and custom WGSL integration.

Its documentation includes materials, WebGPU device limits and recovery after device loss. Examples cover basic setup, custom materials, a particle system, an effect pipeline, and an Earth scene with an atmosphere. Project and compute-shader templates are included too.

Three.js must be imported from three/webgpu, with TSL functions from three/tsl. That matters when moving an existing scene to WebGPU.

What it helps with

set up WebGPURenderer in a Three.js project
build a TSL node material
move GLSL shader logic to TSL
write a GPU compute shader for instanced arrays
create a post-processing effect pipeline

Example prompts for the agent

Set up a Three.js scene with WebGPURenderer and a TSL material.
Create a GPU compute shader for a particle system.
Help me migrate a GLSL material to TSL using a reusable Fn() function.

How to install webgpu-threejs-tsl

1Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code

2Manually: put the files in place

~/.claude/skills/webgpu-threejs-tsl/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/webgpu-threejs-tsl/

1Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a codex

2Manually: put the files in place

.agents/skills/webgpu-threejs-tsl/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cursor

2Manually: put the files in place

.cursor/skills/webgpu-threejs-tsl/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install dgreenheck/webgpu-claude-skill webgpu-threejs-tsl

2Manually: put the files in place

.github/skills/webgpu-threejs-tsl/SKILL.md

1Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a gemini-cli

2Platform CLI

gemini skills install https://github.com/dgreenheck/webgpu-claude-skill --path skills/webgpu-threejs-tsl

Manually: put the files in place

.devin/skills/webgpu-threejs-tsl/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about webgpu-threejs-tsl

How do I install webgpu-threejs-tsl in Claude Code?

Run npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code, then run npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code again. The skill file is placed at ~/.claude/skills/webgpu-threejs-tsl/SKILL.md.

What does webgpu-threejs-tsl do?

It provides guidance for building Three.js applications with WebGPU. The material covers TSL, node materials, compute shaders, WGSL functions, and post-processing.

Which imports are used for WebGPU and TSL?

Import Three.js from three/webgpu and import TSL functions from three/tsl. The standard Three.js entry point does not fit this setup.

Similar skills

Everything for Frontend and UI →

threejs-fundamentals CloudAI-X Sets up Three.js r186 scenes, cameras, renderers, and animation loops for WebGL or WebGPU with TSL. CX Codex +1 17,400installs threejs-shaders CloudAI-X Guides the agent through writing GLSL shaders, custom materials, and TSL nodes for Three.js r186 across WebGL and WebGPU. CX Codex +1 15,600installs threejs mrgoonie A coding-agent skill that walks you through Three.js scenes, shaders and VR work. Useful when a project needs WebGL or WebGPU and you want the agent to know the API. CX Codex +1 1,200installs pixijs-custom-rendering pixijs Guides your agent through custom shaders, uniforms, filters and batchers in PixiJS v8, in GLSL and WGSL, for WebGL and WebGPU. CX Codex +1 5,700installs threejs-scene-setup gamedev-skills Sets up the foundation of a three.js scene and helps diagnose a blank or black canvas. Use it for rendering loops, responsive sizing, camera setup, or OrbitControls. CX Codex +1 5,500installs threejs-webgl freshtechbro Configures coding agents to build Three.js scenes, set up WebGL or WebGPU renderers, adjust lighting, and load glTF models for web 3D apps. CX Codex +1 4,600installs