Three Agent Skills

AI coding agent skills for Three.js and React Three Fiber development.

Skills follow the Agent Skills specification.

Installation

npx add-skill three-agent-skills

Or from GitHub directly:

npx add-skill emalorenzo/three-agent-skills

npx add-skill three-agent-skills --list

npx add-skill three-agent-skills --skill three-best-practices
npx add-skill three-agent-skills --skill r3f-best-practices

Pure Three.js optimization guidelines. 100+ rules across 17 categories.

Use when:

Categories:

Modern Setup & Imports (Import Maps, renderers)
Memory Management & Dispose (CRITICAL)
Render Loop Optimization (CRITICAL)
Geometry & Buffer Management
Material & Texture Optimization
Lighting & Shadows
Scene Graph Organization
Shader Best Practices (GLSL)
TSL - Three.js Shading Language (complete reference, post-processing, compute shaders)
Loading & Assets (GLTF, DRACO, Meshopt, KTX2)
Camera & Controls
Animation System (Mixer, blending, morph targets, skeletal)
Physics Integration (Rapier, Cannon-es)
WebXR / VR / AR
Audio (Spatial, HRTF)
Mobile Optimization
Production (Error handling, migration checklist)
Debug & DevTools

React Three Fiber and Poimandres ecosystem best practices. 60+ rules across 11 categories.

Use when:

Ecosystem coverage:

Categories:

Once installed, the agent uses skills automatically based on context:

Review my entire Three.js app and give me a score from 1 to 100.
Explain what's good, what needs improvement, and provide actionable fixes.

Help me set up a Three.js scene with proper memory management

Review my R3F component for performance issues

How do I load GLTF models with Drei?

Optimize my shader for mobile devices

Set up WebXR for my VR experience

Implement GPU particles with compute shaders

Integrate Rapier physics with my Three.js scene

Works with any agent that supports the Agent Skills spec:

MIT