CloudAI-X Three.js Skills

# CloudAI-X Three.js Skills: setup notes

This kit holds setup notes written by Mindket. It does not contain the skills. Those install from CloudAI-X’s repository: https://github.com/CloudAI-X/threejs-skills

License: MIT, Copyright (c) 2026 CloudAI-X. Full text: https://github.com/CloudAI-X/threejs-skills/blob/main/LICENSE

CloudAI-X Three.js Skills is a community project by CloudAI-X. It is not made or endorsed by Anthropic or by the three.js project.

The pages these notes came from: the README (https://github.com/CloudAI-X/threejs-skills/blob/main/README.md) and each skill’s SKILL.md under https://github.com/CloudAI-X/threejs-skills/tree/main/skills. Facts about where Claude Code loads skills come from Claude Code’s own docs (https://code.claude.com/docs/en/skills), named where they are used. Mindket copied every command and ran none of them.

## What it is

Thirteen skill files for Claude Code, one for each part of three.js work. They target three.js r186 (three@0.186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5. The README gives the reason: Claude Code learned three.js from many releases mixed together, and a lot changed between r160 and r186.

Every skill has the same layout: a Quick Start, the topic’s sections, a WebGPU and TSL section, a Common Mistakes list that pairs an outdated pattern with the current fix, and See Also. Examples use WebGLRenderer, and the WebGPU and TSL section uses WebGPURenderer.

The skills are reference text. Nothing in them runs by itself.

## The thirteen skills

| 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 |

Source: the README’s table “Skills Included”.

## Files in this kit

- setup/claude-code.md: the README’s manual route, a clone and a copy into your personal skills folder or one project’s
- setup/skills-cli.md: the README’s one-line route with the skills CLI
- setup/first-run.md: what to ask first, which skill answers, and the gltf-transform commands in threejs-asset-pipeline

## What you need first

- Claude Code. The README is titled “Three.js Skills for Claude Code” and names no other agent.
- A three.js project. The skills’ examples import the three package. They target r186, so check your project’s version against that.
- Git for the clone route. Node and npx for the skills CLI route and for the gltf-transform and gltfjsx commands.
- KTX-Software, the ktx command at 4.4.0 or newer, only if you ask for KTX2 textures. threejs-asset-pipeline says so.
- No account, sign-up or API key. The README names none. Claude itself runs on your Claude account.

## What installs where

- Clone and copy: thirteen folders named threejs-* in ~/.claude/skills/ (all your projects) or in your project’s .claude/skills/ (one project). Each folder holds one SKILL.md.
- Skills CLI: the README does not say which folder it writes to. See setup/skills-cli.md.

## Your data

The skills are text for Claude to read. The tools a skill has Claude run are all in threejs-asset-pipeline: gltf-transform and gltfjsx through npx, and a Node script built on gltf-transform’s SDK. They read the model files you name and write new ones. The first run of npx can download a package from npm. The plain HTML example in threejs-fundamentals loads three.js from cdn.jsdelivr.net through an import map. What you paste or give Claude goes to Claude as in any other Claude work.

## Update and remove

The README gives no update or removal step. setup/claude-code.md says what Claude Code’s own docs give for removing a skill.

README.md  5 KB
setup/claude-code.md  2 KB
setup/first-run.md  2 KB
setup/skills-cli.md  1 KB