threejs-shaders Skill (CloudAI-X): Three.js GLSL and TSL

Gives your agent current three.js shader knowledge, so custom GLSL and TSL code matches the release you actually install.

Installs: 17.4K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-shaders is a reference skill for custom shaders in three.js. It covers ShaderMaterial and RawShaderMaterial, uniforms, tone mapping and colour output, common patterns (vertex displacement, Fresnel, dissolve), instanced attributes, extending built-in materials, shader chunks and debugging. A second half repeats the effects as TSL node materials for WebGPURenderer.

It targets three.js r186 and bundles no scripts. Its "Common Mistakes" list maps outdated code to the current fix with a reason, such as Clock to Timer, three/nodes to three/tsl, and ShaderMaterial opacity needing its own uniform. The agent loads it when you write a shader, a custom material, move vertices in a shader, or port GLSL to TSL.

Good for

Web developers writing custom three.js shaders, materials or effects
Teams moving GLSL shaders to TSL node materials on WebGPU
Anyone whose assistant keeps producing outdated three.js code

Install threejs-shaders

Claude Code

Copy this prompt.

Install the threejs-shaders skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-shaders

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Custom GLSL vertex and fragment shaders: uniforms, varyings, shader chunks, extending built-in materials, instanced attributes, plus the same effects as node materials with TSL on WebGPU. Use when writing a shader, a custom material or effect, moving vertices in a shader, or porting GLSL to TSL.

Sections in SKILL.md

Quick Start
ShaderMaterial vs RawShaderMaterial
Uniforms
Output Color and Tone Mapping
Common Shader Patterns
Vertex Displacement
Fresnel
Dissolve
Instanced Meshes and Custom Attributes
Extending Built-in Materials
Shader Chunks
Debugging
WebGPU and TSL
Node materials
Uniforms and time
Textures and discard

Key facts

Author: cloudai-x
Repo: cloudai-x/threejs-skills
License: MIT (as listed by the crawl)
Installs on skills.sh: 17,371 (Nov 2, 2026)
GitHub stars: 3,903 (repo, Nov 2, 2026)
Last commit: 2026-10-19
Files: 1 file: SKILL.md
Targets: three.js r186 (three@0.186)
Companions: 12 other threejs-* skills in the same repo (optional)

What it includes

A complete ShaderMaterial scene with time and colour uniforms
Renderer, camera and a material with vertex and fragment shaders, ready to run.
Quick Start
What each one declares for you and when to pick the raw version
ShaderMaterial adds the built-in matrices and attributes; the raw one does not.
ShaderMaterial vs RawShaderMaterial
How to pass values to shaders and finish with tone mapping and colour-space chunks
Includes the chunks that keep custom shader colours matching built-in materials.
Uniforms and output colour
Vertex displacement, Fresnel and dissolve effects
Short, working examples to adapt.
Common shader patterns
Per-instance data in shaders, including the instanceMatrix
Covers the case where a plain model-view-projection line breaks on InstancedMesh.
Instanced meshes and custom attributes
Patch standard materials and use or replace built-in GLSL chunks
For when you want a standard material with one change.
Extending built-in materials and shader chunks
renderer.debug.onShaderError and colour-output tricks for UVs and normals
Shows the assembled shader source on a compile failure.
Debugging
The same effects as node materials with WebGPURenderer, plus porting GLSL
Covers node materials, uniforms and time, textures and discard, vertex displacement, reusable Fn logic, and debugging.
WebGPU and TSL
25 outdated or wrong patterns, each with the r186 fix and the reason
Examples: Clock to Timer, positionGeometry to positionLocal, glslFn to a TSL Fn.
Common Mistakes

From the official docs

Questions

What does the threejs-shaders skill do?

It loads current three.js shader know-how into the assistant when you write custom shaders. That covers GLSL with ShaderMaterial, shader chunks, instancing, and TSL node materials for WebGPU.

How do I install it?

Use the install box above for this skill alone. The README installs all 13 three.js skills with npx skills add cloudai-x/threejs-skills, or by copying the skills folders into ~/.claude/skills/ or .claude/skills/.

Which three.js version does it target?

r186 (three@0.186). The README says the skills were checked against the published three@0.186.1 package and the official migration guide. Older projects may need different code.

Does it work in Claude Code, Cursor and Codex?

The README is written for Claude Code and describes loading from ~/.claude/skills/. It also says the skills CLI installs for any agent that supports the skills format, but it does not name other clients.

Do I need an API key?

No. The skill is a single instruction file with code examples and bundles no scripts.

Do I need the other three.js skills?

No. SKILL.md lists threejs-materials, threejs-textures and threejs-postprocessing under See Also as related reading. They are optional.

Should I use GLSL or TSL?

The skill shows both. Its mistakes list says a TSL Fn compiles for both WebGL 2 and WebGPU backends, while glslFn only works on WebGL 2. The README notes the three.js docs now point LLMs to WebGPURenderer with TSL for custom shaders.

Is it safe?

It is Markdown with code examples and bundles no scripts. You still review and test the shader code the assistant writes.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-shaders

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

threejs-shaders SKILL.md · github.com
threejs-skills README · github.com
skills.sh listing · skills.sh
cloudai-x/threejs-skills · github.com