threejs-skills README

The project's README from github.com/CloudAI-X/threejs-skills. As one markdown file: README.md.

Three.js Skills for Claude Code

Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install.

The skills target three.js r186 ([email protected]), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5. Rendering examples use WebGLRenderer, directly or through React Three Fiber; the WebGPU and TSL section in every skill covers WebGPURenderer.

Why

Claude Code knows three.js from its training data, which mixes many releases. A lot changed between r160 and r186: RGBELoader became HDRLoader, Clock gave way to Timer, PostProcessing became RenderPipeline, WebGL 1 support is gone, and the three.js docs now tell LLMs to use WebGPURenderer with TSL for custom shaders and materials. These skills give Claude Code the current API, working examples, and a Common Mistakes list of the outdated patterns models still reach for.

Installation

With the skills CLI:

npx skills add cloudai-x/threejs-skills

Or manually. Claude Code loads skills from ~/.claude/skills/ (all your projects) or .claude/skills/ (one project):

git clone https://github.com/CloudAI-X/threejs-skills.git

# all your projects
mkdir -p ~/.claude/skills && cp -r threejs-skills/skills/* ~/.claude/skills/

# or one project (run from the project root)
mkdir -p .claude/skills && cp -r threejs-skills/skills/* .claude/skills/

Skills Included

Skill Covers
threejs-fundamentals Scene, cameras, renderer setup, animation loop, object hierarchy, transforms
threejs-geometry Built-in shapes, BufferGeometry, merging, instancing, BatchedMesh, points, lines
threejs-materials Material types, PBR, blending, stencil, recompiles, node materials
threejs-lighting Light types and physical units, shadows, HDR environments, light probes
threejs-textures Loading, color spaces, UV channels, texture types, render targets, memory
threejs-animation Keyframes, the animation mixer, skeletal and morph animation, blending
threejs-loaders glTF with Draco, meshopt and KTX2, other formats, HDR, progress, disposal
threejs-shaders ShaderMaterial and RawShaderMaterial, shader chunks, TSL and node materials
threejs-postprocessing EffectComposer, built-in renderer effects, the WebGPU RenderPipeline
threejs-interaction Raycasting, camera controls, transform gizmos, drag and box selection
threejs-performance Measuring frame cost, draw calls, GPU memory, fill rate, compile stalls
threejs-react-three-fiber React Three Fiber 9 and a verified set of drei helpers, on WebGL or WebGPU
threejs-asset-pipeline gltf-transform: Draco, meshopt, KTX2, WebP, and the matching loader setup

How It Works

Claude Code loads a skill when your request matches its description. When you ask it to:

Skill File Structure

Every skill follows the same layout:

---
name: threejs-<topic>
description: "What the skill covers. Use when ..."
---

# Three.js <Topic>

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

## Quick Start          a complete, runnable example
## <topic sections>     the API with working examples
## WebGPU and TSL       the same topic under WebGPURenderer
## Common Mistakes      outdated or wrong code → the r186 fix, with the reason
## See Also             related skills

Verification

The skills were checked against the published [email protected] package and the official Migration Guide, and against @react-three/[email protected], @react-three/[email protected], @gltf-transform/[email protected] and [email protected] where they apply:

If you find something that is wrong on the current release, please open an issue with the skill name, the line and the three.js version you use.

License

MIT, see LICENSE.

Acknowledgments

threejs-skills (CloudAI-X/threejs-skills)

Searching Database…

4K ·GitHub
Threejs-skills
What is this?A set of 13 skill files that teach Claude Code the current three.js API (r186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5, so the 3D code it writes matches the version you install.
Is it a library I import into my project?No. These are skill files: Claude Code loads one on its own when your request matches the skill's description, so nothing gets imported into your code.
How do I get it working?Copy the skill folders into ~/.claude/skills/ to use them in all your projects, or into .claude/skills/ inside a single project. Claude Code then picks the right skill for each request.
What do I need besides the skills?Claude Code and a three.js project. The skills are written for three.js r186, React Three Fiber 9.8 with drei 10.7 and gltf-transform 4.5 specifically.
Does it cover WebGPU as well as WebGL?Mostly WebGL: the rendering examples use WebGLRenderer, but every skill also has a WebGPU and TSL section that covers WebGPURenderer.
Which skill kicks in for which task?Creating a scene uses threejs-fundamentals, lights and shadows use threejs-lighting, glTF loading uses threejs-loaders, and building the scene with React uses threejs-react-three-fiber.
What do the Common Mistakes lists warn about?They list outdated patterns that models still reach for, such as RGBELoader, which became HDRLoader, and Clock, which gave way to Timer.
What does the performance skill help with?Measuring frame cost, draw calls, GPU memory, fill rate and shader compile stalls in a slow scene.
What are similar projects?threejs-architecture-effects, agent-skills, WebGL-Fluid-Simulation, img2threejs, huashu-art-motion, SwiftUI-Agent-Skill, filament, natural-disasters
Which topics is it in?webgpu, shaders, computer-graphics, webgl, best-practices, claude-code-skill, graphics, claude-skills, reference, 3d, animation, skills
Creator
CloudAI-X
Size
0.2 MB
Stars
4K
Updated
CommitOct 19
Age
9mo
Commits · 90 Days