Three.js Skills

Install

Download the CloudAI-X/threejs-skills repository and copy every folder from skills/ into the project's .claude/skills.

This is third-party code. Review the repository files before installing.

What it does

The skills give the agent accurate Three.js API details that a general model often lacks. Each file covers one area: basic scene and renderer, geometry and instancing, PBR materials, lights and shadows, textures, GLTF loading, GLSL shaders, EffectComposer effects, raycasting and camera controls. Each has a minimal working example, key class breakdowns, common patterns and performance tips. The agent loads the relevant skill based on the request.

Who it is for. For frontend developers building 3D scenes and interactive graphics in the browser.

Example request

Build a Three.js scene with a rotating cube, soft shadows and a bloom effect

Limitations

Content is checked against Three.js r160+ docs; older versions may differ in imports and APIs. The README clone command points to a different repository, so copying the skills manually is simpler. GitHub does not detect a license file, although the README states MIT.

How to disable. Delete the threejs-* folders from the agent's skills directory.

Security check

• The skills contain only reference instructions and code examples

README in short

The README explains the gap: models know programming in general but stumble on Three.js API details. It lists the ten skills and which requests trigger each. It describes a shared file structure: quick start, concepts, patterns, performance and related skills. The author notes the content was audited against r160+ docs.

SKILL.md

---
name: threejs-animation
description: Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
---

# Three.js Animation

## Quick Start

```javascript
import * as THREE from "three";

// Simple procedural animation
const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();

  mesh.rotation.y += delta;
  mesh.position.y = Math.sin(elapsed) * 0.5;

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
```

## Animation System Overview

Three.js animation system has three main components:

1. **AnimationClip** - Container for keyframe data
2. **AnimationMixer** - Plays animations on a root object
3. **AnimationAction** - Controls playback of a clip

Related