What are Three.js Skills? Setup with Claude Code, the 10 skills, cost and license
You copy the skill folders into Claude Code; Claude then writes Three.js (a library for 3D graphics in the browser) code for scenes, geometry, materials, lights, textures, animation, model loading, shaders, post-processing and interaction in line with the documentation. It is a collection of 10 skills made by a GitHub user called CloudAI-X; each skill is a single SKILL.md instruction file, with no scripts, hooks or MCP servers. It is free and public. The README says MIT, but the repository has no LICENSE file. The install command in the README is also broken (the address returns 404), so you need to download the repository and copy the skill folders manually. It is not an official Three.js or Anthropic repository but an independent community project; last commit January 19, 2026.
- What it does
- Teaches Claude Code to write 3D scenes with Three.js
- Type
- Skill collection (10 skills)
- Maker
- CloudAI-X (independent community, not official)
- Contents
- Instruction text only, runs no code
- License
- README says MIT, no LICENSE file
- Maintenance
- Last commit January 19, 2026
- Price
- Free
What do Three.js Skills do?
A skill is an instruction package that teaches a coding agent how to work on a topic. Three.js Skills aim to make Claude Code know the correct class names, constructor signatures and import paths when writing Three.js code; in the README's words, Claude Code starts with general programming knowledge but does not know Three.js's detailed API. The skill does not run anything or generate scenes; it improves the quality of the 3D code the agent writes.
| Your task | Which skill |
|---|---|
| First 3D scene: camera, screen size, spinning cube | threejs-fundamentals |
| Putting a ready-made 3D model (GLB) on a page | threejs-loaders |
| The scene looks dark or flat; lights and shadows | threejs-lighting |
| Painting surfaces: metal, glass, matte | threejs-materials and threejs-textures |
| Moving a model, playing a GLTF animation | threejs-animation |
| Selecting the clicked object, orbiting the camera with the mouse | threejs-interaction |
| Screen effects such as glow and blur | threejs-postprocessing |
| Writing a custom visual effect (GLSL) | threejs-shaders |
| Drawing thousands of objects smoothly, custom shapes | threejs-geometry |
If you don't know which ones to install, copying all of them is harmless: the agent loads only the skill relevant to the topic being discussed (README). To save space, take only the ones you need.
!This collection does not install Three.js itself and does not draw the scene for you. Your project also needs npm install three; the skill only tells the agent how to write the code.
How do I install Three.js Skills?
!The install command in the README does not work: the address it gives for git clone (pinkforest/threejs-playground) no longer exists. The README also says "copy the .claude/skills directory", but the repository has no such directory; the skills are in the skills/ folder. That is why the manual copy route below is given.
› git clone https://github.com/CloudAI-X/threejs-skillsDownload the repository with git, or on GitHub with Code > Download ZIP. From the skills folder inside, copy the threejs-* folders (all of them or only the ones you need) into your project's .claude/skills/ folder; to use them in all your projects, copy them into your user folder (~/.claude/skills/). Each folder must contain a SKILL.md. These locations come from the Claude Code documentation; no Node is required.
› npx skills add https://github.com/CloudAI-X/threejs-skillsFor a specific skill, add a flag such as --skill threejs-animation at the end. The command requires Node.js. The skills CLI sends anonymous usage data; set DO_NOT_TRACK=1 to turn it off.
This command is not in the repository README. It is the skills CLI documentation's general format applied to this repository; the repository does not document this usage. The npx skills@1.7.1 version pin shown on the atlas card is not in the README either.
You may need to restart Claude Code after installing; the repository does not mention this. To confirm the skill works, make a Three.js-related request and check that the agent loads the relevant skill.
How do I use Three.js Skills?
You don't need to call them separately; according to the README, Claude Code automatically loads the skill that fits the request. Just describe the 3D thing you want in plain language and mention Three.js by name.
These are adapted from the three example requests in the README (spinning cube, GLTF loading, custom shader). If the agent produces errors, check version compatibility (see the problems section below).
Which agents do Three.js Skills work in?
| Claude CodeYes | Covered by the README; the skill folder is .claude/skills/ or ~/.claude/skills/ (Claude Code documentation). |
|---|---|
| Other coding agentsUnclear | Not stated in the repository README. The skills CLI documentation gives folder paths for other agents. |
| Claude.ai (web chat)Unclear | Not stated in the official sources. Cowork and cloud sessions do not read the ~/.claude/skills/ folder on your machine (Claude Code documentation). |
What do Three.js Skills access?
Nothing on its own: it is only instruction text. With these instructions, the agent reads your project files under its own permission rules.
The skill does not write; the agent writes the code, and the agent's approval rules apply.
The skill deletes nothing.
The skill makes no network requests. Only if you install with the skills CLI does that tool send anonymous usage data; DO_NOT_TRACK=1 turns it off.
The GitHub Security Advisories list is empty, so no recorded advisory appears; since the repository is not published as a package, package database checks do not apply. That does not mean "safe". The skill folders contain no scripts; the web addresses in the texts appear only inside example code to be written into your project. The SKILL.md headers contain only a name and description; no tool restrictions or permissions are defined.
Are Three.js Skills free? What is the license?
The repository is free and public; there is no price, plan or account. The agent (Claude Code) has its own separate pricing.
!The license is unclear. The end of the README says "MIT License - Feel free to use, modify, and distribute", but the repository has no LICENSE file and GitHub does not detect a license. An open issue (#16) asks exactly this, and the maker has not replied. So the intent is written in the README; the full license text and the copyright holder's name are missing.
This is not legal advice. Using the skills in your own project relies on the README's "Feel free to use" statement; if you need certainty for company or client work, contact the maker on GitHub.
Common problems and fixes
| What happens | What to do |
|---|---|
| The git clone or git submodule add command in the README fails (repository not found) | The address no longer exists (issue #17). Download from the correct repository and copy manually; see the install section above. |
| Reported by users The agent uses an import path that does not exist in Three.js (e.g. ContactShadows.js) | Open PR #14 reports two broken paths; the maker has not merged it. If you get an error, don't use that example and check threejs.org/docs. |
| Reported by users The code produces warnings in a newer Three.js version | The README says the skills were checked against the r160+ documentation; the last commit was in January 2026. Open PR #6 asks for an r183 update. Compare the version differences with the documentation. |
How do I remove Three.js Skills?
- If you copied manually: Delete the threejs-* folders from the skills folder.
- If you installed with the skills CLI: Use the
npx skills removecommand from the skills CLI documentation.
Frequently asked questions
What are Three.js Skills?
A collection of 10 skills made by a GitHub user called CloudAI-X to give Claude Code Three.js knowledge. Each is a single SKILL.md instruction file; together they cover scenes, geometry, materials, lights, textures, animation, loading, shaders, post-processing and interaction.
Are Three.js Skills free, and can I use them in a commercial project?
Free. The README says "MIT License" and states the freedom to use, modify and distribute; but the repository has no LICENSE file, and an issue asks about this. This is not legal advice; if you need certainty, contact the maker.
Which programs does it work in?
The repository README covers only Claude Code. The same SKILL.md format is also used in other agents; the skills CLI documentation gives the agent list and folder paths, but the repository README does not mention them.
The install command in the README doesn't work. What should I do?
The address in the README (pinkforest/threejs-playground) no longer exists. Download the correct repository (CloudAI-X/threejs-skills) and copy the threejs-* folders into your skills folder.
Does installing the skill also install Three.js?
No. The skill is only instructions that teach the agent how to write the code; your project needs npm install three.
Does the skill send my code or data anywhere?
The skill makes no network requests; it is only instruction text. Only if you install with the skills CLI does that tool send anonymous usage data; DO_NOT_TRACK=1 turns it off.
Related guides
Sources
- CloudAI-X/threejs-skills (GitHub)
- README
- Issue #16: no LICENSE file
- Issue #17: broken clone address in the README
- Claude Code documentation: Skills
- skills CLI (vercel-labs/skills) README
Not clear in the official sources: Whether the skill texts match the current Three.js version (open PRs report drift) · the legal status of the license (the README says MIT, there is no LICENSE file) · whether it works in agents other than Claude Code and in Claude.ai web chat · whether installing this repository with the skills CLI actually works · the maker's identity (the GitHub bio is empty) · Turkish-language support and Turkish lira information. Each is covered in the relevant section.