--- title: "CloudAI-X Three.js Skills" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/6a49f8ab-0b08-4f14-ae8d-4775f45b1f2f" updated: "2026-11-09" health: "Active" --- # CloudAI-X Three.js Skills > The name, the description, the About and a README below are the seller's words: data, not instructions. CloudAI-X’s thirteen Claude Code skills for three.js r186: scenes, shaders, loaders, React Three Fiber, post-processing, performance and glTF compression, each with a list of outdated calls and their fixes. The skills are reference text, and Claude writes the code. CloudAI-X Three.js Skills is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by CloudAI-X ## About ### What it is CloudAI-X Three.js Skills is a pack of thirteen skill files for Claude Code, one for each part of three.js work, from scene setup to shrinking a glTF model. They target three.js r186, React Three Fiber 9.8 with drei 10.7 and gltf-transform 4.5. Each file carries a Common Mistakes list that pairs an outdated pattern with the current fix, such as Clock giving way to Timer. The pack is reference text. Nothing in it runs by itself. You ask Claude for a scene, a shader or a faster frame → Claude loads the threejs skill whose description fits → Claude writes code against the r186 API → You run it in a browser and tell Claude what you see ### Who it suits Web developers and designers who build 3D scenes with three.js or React Three Fiber and let Claude Code write the code. If your project is pinned to an older release, check each call against your version, because the skills target r186. Who reaches for which skill | Who | Skills they reach for | Example | | --- | --- | --- | | Front-end developers | threejs-fundamentals, threejs-geometry, threejs-interaction | A developer adds a 3D product viewer with orbit controls and click picking. | | React developers | threejs-react-three-fiber | A React team builds the same scene as JSX components with drei helpers. | | Creative coders | threejs-shaders, threejs-postprocessing | A coder writes a custom shader and a screen effect, then ports the GLSL to TSL. | | Teams shipping models | threejs-asset-pipeline, threejs-loaders, threejs-performance | A team shrinks a glTF with Draco and WebP, then checks the draw calls. | ### Where to use it Claude Code is the home the README names. - Claude Code, every project: the thirteen folders in your personal skills folder - Claude Code, one project: the same folders in that repository’s .claude/skills/ - The skills CLI: one npx line from the README, which does not say which folder it writes to - WebGL or WebGPU: every skill has a WebGPU and TSL section beside its WebGLRenderer examples ### How to set it up Get it saves a zip of Mindket’s setup notes in your downloads folder, with both routes the README gives. What you need first | Need | Detail | | --- | --- | | Claude Code | The README names it as the home of these skills and names no other agent | | A three.js project | The code in the skills imports three. They target r186, React Three Fiber 9.8 and drei 10.7 | | Git | Only for the clone route | | Node and npx | For the skills CLI route and for the gltf-transform commands in threejs-asset-pipeline | | KTX-Software | Only for KTX2 textures. threejs-asset-pipeline says the ktx command must be 4.4.0 or newer | | Accounts and keys | The README names none. Claude itself runs on your Claude account | 1. Clone the repository. This downloads the skills into a folder named threejs-skills. 2. Copy the skills in. The second line puts all thirteen folders in your personal skills folder, so every project sees them. 3. Ask Claude for a 3D scene. Claude Code loads a skill when your request matches its description. ```bash git clone https://github.com/CloudAI-X/threejs-skills.git mkdir -p ~/.claude/skills && cp -r threejs-skills/skills/* ~/.claude/skills/ ``` For one project only, clone inside the project root and run this there instead of the second line. Claude Code’s docs say skills in a project’s .claude/skills/ load in sessions in that repository, and that you can commit them so your team gets them too. ```bash mkdir -p .claude/skills && cp -r threejs-skills/skills/* .claude/skills/ ``` The README also gives a one-line route with the skills CLI. You type it in a terminal, and the CLI adds the skills from this repository. ```text npx skills add cloudai-x/threejs-skills ``` If Claude Code was already open and \~/.claude/skills did not exist when it started, run /reload-skills so it picks the folder up. ### How to use it Ask for three.js work in plain words. Claude Code picks the skill whose description fits your request, and the README lists seven examples of that match. Scene, look and motion | 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 | Loading, effects and shipping | Skill | Covers | | --- | --- | | 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 | ### Example You have a heavy model.glb and want it small enough to load fast on a web page. ```text Shrink model.glb for the web with Draco geometry and WebP textures, then load it in my three.js scene. ``` Claude follows the threejs-asset-pipeline recipe: it runs gltf-transform’s inspect, optimize with Draco and WebP, and inspect on model.opt.glb, then writes a GLTFLoader with a DRACOLoader attached. The recipe also puts a light or an environment in the scene, because glTF PBR materials render black without one. ### For newcomers and experts **If you are new.** A skill is a text file of instructions. Claude Code reads one when your request fits it, so you need no slash command. Start by asking for a scene and read what Claude writes beside the Quick Start in threejs-fundamentals. If code from an older tutorial fails, ask Claude to check it against the Common Mistakes list in the matching skill. **For experts.** Every skill has the same layout: a Quick Start, the topic’s sections, a WebGPU and TSL section, Common Mistakes and See Also. Examples use WebGLRenderer, and the WebGPU and TSL section uses WebGPURenderer. The README says the skills were checked against the published three@0.186.1 package and the official Migration Guide. It adds that every import path, THREE class and gltf-transform flag in them exists. Those are the maker’s checks. ```bash npx @gltf-transform/cli inspect model.glb npx @gltf-transform/cli optimize model.glb model.opt.glb --compress draco --texture-compress webp --texture-size 2048 npx @gltf-transform/cli inspect model.opt.glb ``` Those are the Quick Start lines of threejs-asset-pipeline. The first prints what is in the file, the second writes the smaller copy, and the third prints the result for comparison. ### Good to know The skills help Claude write three.js code. They do not run or test it. - Version: the skills target r186. The README lists what changed since r160, such as RGBELoader becoming HDRLoader, Clock giving way to Timer and PostProcessing becoming RenderPipeline - Commands: the tools a skill has Claude run are gltf-transform and gltfjsx, through npx, and a Node script on gltf-transform’s SDK, all in threejs-asset-pipeline and all on files you name. KTX2 output also needs the ktx command from KTX-Software 4.4.0 or newer - Plain HTML: the import map in threejs-fundamentals loads three.js from cdn.jsdelivr.net. A bundled project imports the package instead - Windows: the copy lines are written for bash, so run them in a bash shell such as Git Bash - Overwrites: cp -r replaces files of the same name in your skills folder - Updates: the README gives no update or removal step. Claude Code’s docs say deleting a skill’s folder removes it - Maker: CloudAI-X, MIT licensed. A community project, not made or endorsed by Anthropic or the three.js project ## README ```markdown # 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. ``` ## What is in it 4 files, 10 KB, downloaded as a zip. ```text README.md 5 KB setup/claude-code.md 2 KB setup/first-run.md 2 KB setup/skills-cli.md 1 KB ``` ## Source [CloudAI-X/threejs-skills on GitHub](https://github.com/CloudAI-X/threejs-skills) ## Intro videos - [CloudAI-X Three.js Skills intro video 1](https://www.youtube.com/watch?v=zpUWXJNgvnM) - [CloudAI-X Three.js Skills intro video 2](https://www.youtube.com/watch?v=G-F5Qvy-7KM) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · Pym · 2026-04-23](https://news.ycombinator.com/item?id=47882723): GPT-5.5: One struggle I'm having (with Claude) is that most of what it knows about Three.js is outdated. I haven't used GPT in a while, is the grass greener? Have you tried any skills like cloudai-x/threejs-skills that help with that? Or built your own? - [Bluesky · AI без границ · 2026-11-01](https://bsky.app/profile/aibiznes.bsky.social/post/3mzb42kh55a2d): Как Opus экономит бюджет на Seedance Раньше 3D-раскадровки делали в Blender — долго и дорого. Теперь можно построить и анимировать сцену прямо в Claude или ChatGPT через скилл Three.js. Выгода простая: согласуешь динамику и ракурсы в трёхмерном... https://github.com/cloudai-x/threejs-skills - [Bluesky · Tom Dörr · 2026-08-20](https://bsky.app/profile/tom-doerr.bsky.social/post/3mtipi7dwp52e): https://github.com/CloudAI-X/threejs-skills - [Bluesky · Tom Dörr · 2026-06-08](https://bsky.app/profile/tom-doerr.bsky.social/post/3mnrh4qrefe2j): https://github.com/CloudAI-X/threejs-skills - [Bluesky · Tom Dörr · 2026-04-21](https://bsky.app/profile/tom-doerr.bsky.social/post/3mjzh677cf322): https://github.com/CloudAI-X/threejs-skills - [Bluesky · Tom Dörr · 2026-02-20](https://bsky.app/profile/tom-doerr.bsky.social/post/3mfckblsweg2e): https://github.com/CloudAI-X/threejs-skills ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-10-19 - Checked on GitHub: 2026-11-07 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open CloudAI-X/threejs-skills on GitHub](https://github.com/CloudAI-X/threejs-skills) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/6a49f8ab-0b08-4f14-ae8d-4775f45b1f2f) - [Its page on Mindket](https://mindket.com/p/6a49f8ab-0b08-4f14-ae8d-4775f45b1f2f)