three-agent-skills
💡 Summary
This skill provides optimization guidelines and best practices for Three.js and React Three Fiber development.
🎯 Target Audience
🤖 AI Roast: “Powerful, but the setup might scare off the impatient.”
Risk: Low. Review: shell/CLI command execution; outbound network access (SSRF, data egress). Run with least privilege and audit before enabling in production.
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
List available skills
npx add-skill three-agent-skills --list
Install specific skill
npx add-skill three-agent-skills --skill three-best-practices npx add-skill three-agent-skills --skill r3f-best-practices
Available Skills
three-best-practices
Pure Three.js optimization guidelines. 100+ rules across 17 categories.
Use when:
- Writing Three.js code
- Optimizing WebGL/WebGPU performance
- Managing memory and disposal
- Writing shaders (GLSL or TSL)
- Building VR/AR experiences with WebXR
- Integrating physics engines
- Optimizing for mobile devices
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
r3f-best-practices
React Three Fiber and Poimandres ecosystem best practices. 60+ rules across 11 categories.
Use when:
- Writing R3F components
- Optimizing R3F performance (re-renders)
- Using Drei helpers
- Managing state with Zustand
- Implementing physics or post-processing
Ecosystem coverage:
- @react-three/fiber
- @react-three/drei
- @react-three/postprocessing
- @react-three/rapier
- zustand
- leva
Categories:
- Performance & Re-renders (CRITICAL)
- useFrame & Animation (CRITICAL)
- Component Patterns
- Canvas & Setup
- Drei Helpers
- Loading & Suspense
- State Management
- Events & Interaction
- Post-processing
- Physics (Rapier)
- Leva (Debug GUI)
Usage Examples
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
Supported Agents
Works with any agent that supports the Agent Skills spec:
- Claude Code
- Cursor
- Codex
- OpenCode
- VS Code Copilot
- And more...
Documentation
- Full Three.js guide: THREE_BEST_PRACTICES.md
- Full R3F guide: R3F_BEST_PRACTICES.md
- Creating skills: CLAUDE.md
License
MIT
Pros
- Comprehensive guidelines for optimization
- Supports both Three.js and React Three Fiber
- Easy installation and usage
- Covers a wide range of performance aspects
Cons
- May require familiarity with Three.js concepts
- Limited to specific frameworks
- Potentially overwhelming for beginners
- Documentation may need more examples
Related Skills
threejs-materials
A“Powerful, but the setup might scare off the impatient.”
pytorch
S“It's the Swiss Army knife of deep learning, but good luck figuring out which of the 47 installation methods is the one that won't break your system.”
agno
S“It promises to be the Kubernetes for agents, but let's see if developers have the patience to learn yet another orchestration layer.”
Disclaimer: This content is sourced from GitHub open source projects for display and rating purposes only.
Copyright belongs to the original author emalorenzo.