Agent skill · design visual · emalorenzo
three-best-practices
Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.
Why this skill is useful
Provides 120+ performance optimization rules specific to Three.js that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-01-28. 43 stars on the source repository.
What this skill does
Three.js Best Practices Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact. Sources & Credits This skill compiles best practices from multiple authoritative sources: - Official guidelines from Three.js llms branch maintained by mrdoob - 100 Three.js Tips by Utsubo - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips When to Apply Reference these guidelines when: Setting up a new Three.js project Writing or reviewing Three.js code Optimizing performance or fixing memory leaks Working with custom shaders (GLSL or TSL) Implementing WebGPU features Building VR/AR experiences with WebXR Integrating physics engines Optimizing for mobile devices Rule Categories by Priority Priority Category Impact Prefix ---------- ---------- -------- -------- 0 Modern Setup & Imports FUNDAMENTAL setup- 1 Memory Management & Dispose CRITICAL memory- 2 Render Loop Optimization CRITICAL render- 3 Draw Call Optimization CRITICAL drawcall- 4 Geometry & Buffer Management HIGH geometry- 5 Material & Texture Optimization HIGH material- 6 Asset Compression HIGH asset- 7 Lighting & Shadows MEDIUM-HIGH lighting- 8 Scene Graph Organization MEDIUM scene- 9 Shader Best Practices (GLSL) MEDIUM shader- 10 TSL (Three.js Shading Language) MEDIUM tsl- 11 WebGPU Renderer MEDIUM webgpu- 12 Loading & Assets MEDIUM loading- 13 Core Web Vitals MEDIUM-HIGH vitals- 14 Camera & Controls LOW-MEDIUM camera- 15 Animation System MEDIUM animation- 16 Physics Integration MEDIUM physics- 17 WebXR / VR / AR MEDIUM webxr- 18 Audio LOW-MEDIUM audio- 19 Post-Processing MEDIUM postpro- 20 Mobile Optimization HIGH mobile- 21 Production HIGH error-, migration- 22 Debug & DevTools LOW debug- Quick Reference 0. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills emalorenzo/three-best-practices