Can I add my own Three.js patterns to the collection?

Yes, fork the repository, add or edit files following the provided structure, then submit a pull request after checking the official docs.

Will these skills work with every Three.js version?

They are audited for r160 and later; older versions may need manual adjustments to class names or import paths.

How does Claude Code know which skill to load?

It matches keywords in your prompt to the skill descriptions and loads matching files automatically.

CloudAI-X/threejs-skills

Equip Claude Code with precise Three.js knowledge for reliable 3D projects.

SkillsAgent Skills 2.4kOpen source

View on GitHub

Updated 2026-06-16

CloudAI-X/threejs-skills GitHub repository

What is CloudAI-X/threejs-skills?

CloudAI-X/threejs-skills is a curated set of markdown files that give Claude Code structured knowledge about Three.js. Each file covers a focused area such as geometry, materials, lighting, or animation, complete with constructor details, working snippets, and optimization notes.

The skills load from a .claude/skills folder when the request matches their scope. Claude Code pulls the relevant files to produce correct renderer setup, loader configuration, shader code, or post-processing chains without relying solely on general training data.

It is intended for developers who want Claude Code to generate production-ready Three.js scenes, custom effects, or interactive 3D tools while following current documentation standards.

Capabilities

provide three.js api references

generate 3d scene code examples

offer performance optimization tips

support model loading and animation

assist with shaders and postprocessing

What you can build with CloudAI-X/threejs-skills

Basic scene creation

Request a rotating cube or simple environment and receive properly structured renderer, camera, and animation loop code drawn from fundamentals.

Model loading with animation

Ask to import a GLTF file with Draco compression and the skill supplies loader setup, animation mixer handling, and error checks.

Custom visual effects

Describe a fresnel shader or bloom pass and the relevant shader and post-processing skills produce valid GLSL and EffectComposer code.

Install CloudAI-X/threejs-skills

Install

git clone https://github.com/pinkforest/threejs-playground.git

Quick start

git clone https://github.com/pinkforest/threejs-playground.git

1Clone the repository into your project folder or add it as a git submodule.
2Place the skill files inside a .claude/skills directory at the project root.
3Open Claude Code and describe the Three.js task you need.
4Review the generated code and iterate by referencing specific skills if needed.
5Verify output against the official Three.js docs for your target version.

Works with

Claude Code