Skip to content
MeloSkill

3D

Three.js skills for coding agents and Grok Bot

Start with scene setup, then pick performance, React Three Fiber, interaction, or shaders only when the prompt is already in that lane. Extra CloudAI-X chapters stay in the index. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

Last reviewed 2026-10-24 · 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-10-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-10-19 pass
Three.js Shaders
CloudAI-X/threejs-skills
When the prompt already asks for ShaderMaterial, GLSL, or custom effects. Any agent 2026-10-18 review

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, and coordinates — the first install for a new Three.js job. It is an API tour so the agent can stand up a scene. Skip it if the scene already exists and the failure is jank, disposal, 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, and 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.

Can I use this with Grok Bot?

Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.