120+ performance rules across 18 categories for optimizing Three.js applications.
Works with
Organized by priority from fundamental setup (Import Maps, modern renderers) through critical concerns (memory disposal, render loops, draw calls) to specialized topics (WebGPU, TSL shaders, WebXR)
Covers both WebGLRenderer and WebGPURenderer with guidance on choosing between them and leveraging TSL (Three.js Shading Language) for shader development
Includes practical rules for geometry batching, materi
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionthree-best-practicesExecute the skills CLI command in your project's root directory to begin installation:
Fetches three-best-practices from emalorenzo/three-agent-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate three-best-practices. Access via /three-best-practices in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
0
total installs
0
this week
16
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
16
stars
Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact.
This skill compiles best practices from multiple authoritative sources:
- Official guidelines from Three.js
llmsbranch maintained by mrdoob- 100 Three.js Tips by Utsubo - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips
Reference these guidelines when:
| 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- |
setup-use-import-maps - Use Import Maps, not old CDN scriptssetup-choose-renderer - WebGLRenderer (default) vs WebGPURenderer (TSL/compute)setup-animation-loop - Use renderer.setAnimationLoop() not manual RAFsetup-basic-scene-template - Complete modern scene templatememory-dispose-geometry - Always dispose geometriesmemory-dispose-material - Always dispose materials and texturesmemory-dispose-textures - Dispose dynamically created texturesmemory-dispose-render-targets - Always dispose WebGLRenderTargetmemory-dispose-recursive - Use recursive disposal for hierarchiesmemory-dispose-on-unmount - Dispose in React cleanup/unmountmemory-renderer-dispose - Dispose renderer when destroying viewmemory-reuse-objects - Reuse geometries and materialsrender-single-raf - Single requestAnimationFrame looprender-conditional - Render on demand for static scenesrender-delta-time - Use delta time for animationsrender-avoid-allocations - Never allocate in render looprender-cache-computations - Cache expensive computationsrender-frustum-culling - Enable frustum cullingrender-update-matrix-manual - Disable auto matrix updates for static objectsrender-pixel-ratio - Limit pixel ratio to 2render-antialias-wisely - Use antialiasing judiciouslydraw-call-optimization - Target under 100 draw calls per framegeometry-instanced-mesh - Use InstancedMesh for identical objectsgeometry-batched-mesh - Use BatchedMesh for varied geometries (same material)geometry-merge-static - Merge static geometries with BufferGeometryUtilsgeometry-buffer-geometry - Always use BufferGeometrygeometry-merge-static - Merge static geometriesgeometry-instanced-mesh - Use InstancedMesh for identical objectsgeometry-lod - Use Level of Detail for complex modelsgeometry-index-buffer - Use indexed geometrygeometry-vertex-count - Minimize vertex countgeometry-attributes-typed - Use appropriate typed arraysgeometry-interleaved - Consider interleaved buffersmaterial-reuse - Reuse materials across meshesmaterial-simplest-sufficient - Use simplest material that worksmaterial-texture-size-power-of-two - Power-of-two texture dimensionsmaterial-texture-compression - Use compressed textures (KTX2/Basis)material-texture-mipmaps - Enable mipmaps appropriatelymaterial-texture-anisotropy - Use anisotropic filtering for floorsmaterial-texture-atlas - Use texture atlasesmaterial-avoid-transparency - Minimize transparent materialsmaterial-onbeforecompile - Use onBeforeCompile for shader mods (or TSL)asset-compression - Draco, Meshopt, KTX2 compression guideasset-draco - 90-95% geometry size reductionasset-ktx2 - GPU-compressed textures (UASTC vs ETC1S)asset-meshopt - Alternative to Draco with faster decompressionasset-lod - Level of Detail for 30-40% frame rate improvementlighting-limit-lights - Limit to 3 or fewer active lightslighting-shadows-advanced - PointLight cost, CSM, fake shadowslighting-bake-static - Bake lighting for static sceneslighting-shadow-camera-tight - Fit shadow camera tightlylighting-shadow-map-size - Choose appropriate shadow resolution (512-4096)lighting-shadow-selective - Enable shadows selectivelylighting-shadow-cascade - Use CSM for large sceneslighting-shadow-auto-update - Disable autoUpdate for static sceneslighting-probe - Use Light Probeslighting-environment - Environment maps for ambient lightlighting-fake-shadows - Gradient planes for budget contact shadowsscene-group-objects - Use Groups for organizationscene-layers - Use Layers for selective renderingscene-visible-toggle - Use visible flag, not add/removescene-flatten-static - Flatten static hierarchiesscene-name-objects - Name objects for debuggingobject-pooling - Reuse objects instead of create/destroyshader-precision - Use mediump for mobile (~2x faster)shader-mobile - Mobile-specific optimizations (varyings, branching)shader-avoid-branching - Replace conditionals with mix/stepshader-precompute-cpu - Precompute on CPUshader-avoid-discard - Avoid discard, use alphaTestshader-texture-lod - Use textureLod for known mip levelsshader-uniform-arrays - Prefer uniform arraysshader-varying-interpolation - Limit varyings to 3 for mobileshader-pack-data - Pack data into RGBA channelsshader-chunk-injection - Use Three.js shader chunkstsl-why-use - Use TSL instead of onBeforeCompiletsl-setup-webgpu - WebGPU setup for TSLtsl-complete-reference - Full TSL type system and functionstsl-material-slots - Material node properties referencetsl-node-materials - Use NodeMaterial classestsl-basic-operations - Types, operations, swizzlingtsl-functions - Creating TSL functions with Fn()tsl-conditionals - If, select, loops in TSLtsl-textures - Textures and triplanar mappingtsl-noise - Built-in noise functions (mx_noise_float, mx_fractal_noise)tsl-post-processing - bloom, blur, dof, aotsl-compute-shaders - GPGPU and compute operationstsl-glsl-to-tsl - GLSL to TSL translationwebgpu-renderer - Setup, browser support, migration guidewebgpu-render-async - Use renderAsync for compute-heavy sceneswebgpu-feature-detection - Check adapter featureswebgpu-instanced-array - GPU-persistent bufferswebgpu-storage-textures - Read-write compute textureswebgpu-workgroup-memory - Shared memory (10-100x faster)webgpu-indirect-draws - GPU-driven renderingloading-draco-compression - Use Draco for large meshesloading-gltf-preferred - Use glTF formatgltf-loading-optimization - Full loader setup with DRACO/Meshopt/KTX2loading-progress-feedback - Show loading progressloading-async-await - Use async/await for loadingloading-lazy - Lazy load non-critical assetsloading-cache-assets - Enable cachingloading-dispose-unused - Unload unused assetscore-web-vitals - LCP, FID, CLS optimization for 3Dvitals-lazy-load - Lazy load 3D below the fold with IntersectionObservervitals-code-split - Dynamic import Three.js modulesvitals-preload - Preload critical assets with link tagsvitals-progressive-loading - Low-res to high-res progressive loadvitals-placeholders - Show placeholder geometry during loadvitals-web-workers - Offload heavy work to workersvitals-streaming - Stream large scenes by chunkscamera-near-far - Set tight near/far planescamera-fov - Choose appropriate FOVcamera-controls-damping - Use damping for smooth controlscamera-resize-handler - Handle resize properlycamera-orbit-limits - Set orbit control limitsanimation-system - AnimationMixer, blending, morph targets, skeletalphysics-integration - Rapier, Cannon-es integration patternsphysics-compute-shaders - GPU physics with compute shaderswebxr-setup - VR/AR buttons, controllers, hit testingaudio-spatial - PositionalAudio, HRTF, spatial soundpostprocessing-optimization - pmndrs/postprocessing guidepostpro-renderer-config - Disable AA, stencil, depth for postpostpro-merge-effects - Combine effects in single passpostpro-selective-bloom - Selective bloom for performancepostpro-resolution-scaling - Half resolution for 2x FPSpostpro-webgpu-native - TSL-based post for WebGPUmobile-optimization - Mobile-specific optimizations and checklistraycasting-optimization - BVH, layers, GPU pickingerror-handling-recovery - WebGL context loss and recoverymigration-checklist - Breaking changes by versiondebug-devtools - Complete debugging toolkitdebug-stats-gl - stats-gl for WebGL/WebGPU monitoringdebug-lil-gui - lil-gui for live parameter tweakingdebug-spector - Spector.js for WebGL frame capturedebug-renderer-info - Monitor draw calls and memorydebug-three-mesh-bvh - Fast raycasting with BVHdebug-context-lost - Handle WebGL context lossdebug-animation-loop-profiling - Profile render loop sectionsdebug-conditional - Remove debug code in productionRead individual rule files for detailed explanations and code examples:
rules/setup-use-import-maps.md
rules/memory-dispose-geometry.md
rules/tsl-complete-reference.md
rules/mobile-optimization.md
Each rule file contains:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/tsl": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.tsl.js"
}
}
</script>
function disposeObject(obj) {
if (obj.geometry) obj.geometry.dispose();
if (obj.material) {
if (Array.isArray(obj.material)) {
obj.material.forEach(m => m.dispose());
} else {
obj.material.dispose();
}
}
}
import { texture, uv, color, time, sin } from 'three/tsl';
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = texture(map).mul(color(0xff0000));
material.Make data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
kadajett/agent-nestjs-skills
jwynia/agent-skills
asyrafhussin/agent-skills
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
three-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Keeps context tight: three-best-practices is the kind of skill you can hand to a new teammate without a long onboarding doc.
I recommend three-best-practices for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Keeps context tight: three-best-practices is the kind of skill you can hand to a new teammate without a long onboarding doc.
three-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Registry listing for three-best-practices matched our evaluation — installs cleanly and behaves as described in the markdown.
three-best-practices fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Solid pick for teams standardizing on skills: three-best-practices is focused, and the summary matches what you get after install.
Useful defaults in three-best-practices — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
We added three-best-practices from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
showing 1-10 of 27