Skip to content
MeloSkill

3D

Three.js skills for coding agents

WebGL scenes, materials, and React Three Fiber. Install a fundamentals file before a shader file unless the prompt is already in GLSL.

Last reviewed 2026-09-10 · Methodology · How to choose · How to install

Skill When to use it Platform Updated Safety
Three.js Fundamentals
CloudAI-X/threejs-skills
First install for a new Three.js scene: camera, renderer, Object3D, coordinates. Any agent 2026-01-19 review
Three.js Best Practices
emalorenzo/three-agent-skills
When the scene exists and the agent needs performance, disposal, and shader hygiene rather than an API tour. Any agent 2026-01-28 pass
R3F Best Practices
emalorenzo/three-agent-skills
Only for React Three Fiber / Drei work. Skip it for vanilla Three.js. Cursor 2026-01-28 pass
Three.js Interaction
CloudAI-X/threejs-skills
Picking, controls, and pointer input — not materials or postprocessing. Cursor 2026-01-19 pass
Three.js Shaders
CloudAI-X/threejs-skills
When the prompt already asks for ShaderMaterial, GLSL, or custom effects. Any agent 2026-01-19 pass

Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.

  1. 01

    Three.js Fundamentals

    Scene, camera, renderer, Object3D, coordinates. First install for a new Three.js job. It is an API tour, not a performance or shader file. Skip it if the scene already exists and the failure is jank or GLSL.

    npx skills add https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-fundamentals

  2. 02

    Three.js Best Practices

    Performance, disposal, and shader hygiene for vanilla Three.js. Use it when the scene exists and the agent is about to leak GPU memory or stall the loop. It is not a React Three Fiber file.

    npx skills add https://github.com/emalorenzo/three-agent-skills/tree/HEAD/skills/three-best-practices

  3. 03

    R3F Best Practices

    React Three Fiber and Drei only. Install it when the stack is R3F, not when the code is raw WebGLRenderer. It will not teach vanilla scene setup.

    npx skills add https://github.com/emalorenzo/three-agent-skills/tree/HEAD/skills/r3f-best-practices

  4. 04

    Three.js Interaction

    Picking, controls, and pointer input. Use it when the prompt is about clicking or dragging objects. It is not materials, lighting, or postprocessing.

    npx skills add https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-interaction

  5. 05

    Three.js Shaders

    ShaderMaterial, GLSL, and custom effects. Install only when the prompt is already in shader territory. Do not load it as a default with fundamentals.

    npx skills add https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-shaders

FAQ

Which Three.js skill should I install?

threejs-fundamentals for scene/camera/renderer setup. three-best-practices if you already have a scene and need performance and disposal rules. r3f-best-practices only when the stack is React Three Fiber.

Why are there so many threejs-* files?

CloudAI-X splits the API by topic. That is useful for agents with small context windows. Do not install the whole bundle unless the project is a 3D app.

How do I update them?

Same install command. Check the last-change date on each listing; the bundle can move one file and leave another stale.