New Experiment
Tresjs/tres
Create a new experiment in TresJS Lab with all necessary files
Three.js performance optimization and best practices guidelines.
Install Three Best Practices
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install zebbern/claude-code-guide three-best-practices --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/three-best-practices .claude/skills/three-best-practices && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .claude/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practicesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install zebbern/claude-code-guide three-best-practices --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/three-best-practices .agents/skills/three-best-practices && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .agents/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install zebbern/claude-code-guide three-best-practices --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/three-best-practices .cursor/skills/three-best-practices && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .cursor/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/zebbern/claude-code-guide.git --path skills/three-best-practices--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install zebbern/claude-code-guide three-best-practices --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/three-best-practices .gemini/skills/three-best-practices && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .gemini/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install zebbern/claude-code-guide three-best-practicesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/three-best-practices .github/skills/three-best-practices && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .github/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zebbern/claude-code-guide --skill three-best-practices -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install zebbern/claude-code-guide three-best-practices --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/three-best-practices .opencode/skills/three-best-practices && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "three-best-practices" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/three-best-practices into .opencode/skills/three-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "three-best-practices", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
three-best-practices- GitHub stars
- 4.7k
- Token cost
- ~3.3k tokens
- SKILL.md length
- 1,127 words
- Files
- 29
- Skills in repo
- 46
- Repo updated
- First seen
- Licence
- MIT
At a glance
Three.js performance optimization and best practices guidelines.
- Works in 12 steps: Modern Setup (FUNDAMENTAL) → Memory Management (CRITICAL) → Render Loop (CRITICAL) → …
- Optimizing Three.js code
- SKILL.md covers Sources & Credits, When to Apply, Rule Categories by Priority and Quick Reference, plus 2 more sections
- Reaches cdn.jsdelivr.net
What it does
Three Best Practices is an agent skill from zebbern/claude-code-guide. 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.
Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 29 other files (for example `rules/_sections.md`, `rules/animation-system.md` and `rules/asset-compression.md`).
It sits in Game Development, covering 3D graphics and WebGL and Shaders. It works with Three.js. The repository describes itself as: Claude Code Guide - Setup, Commands, workflows, agents, skills & tips-n-tricks from beginner to power user! The licence is MIT.
When your agent uses it
- Optimizing Three.js code
- Tasks involving 3D scenes
- WebGL/WebGPU rendering
Example prompts
- “/three-best-practices”
Workflow steps
12 steps, taken from the step headings in SKILL.md.
- Modern Setup (FUNDAMENTAL)
- Memory Management (CRITICAL)
- Render Loop (CRITICAL)
- Draw Call Optimization (CRITICAL)
- Geometry (HIGH)
- Materials & Textures (HIGH)
- Asset Compression (HIGH)
- Lighting & Shadows (MEDIUM-HIGH)
- Scene Graph (MEDIUM)
- Shaders GLSL (MEDIUM)
- TSL - Three.js Shading Language (MEDIUM)
- WebGPU Renderer (MEDIUM)
What it can do on your machine
Read from SKILL.md and the folder at commit e62775c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.net
Also links to:
utsubo.comgithub.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Three Best Practices loads about 3.3k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 1,127 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from zebbern/claude-code-guide at commit e62775c, republished under its MIT licence (© zebbern). 1,127 words, ~3,302 tokens.
Download SKILL.mdSave it as
.claude/skills/three-best-practices/SKILL.md (or your agent's skills folder). This skill also uses 28 other files; get the full folder from GitHub.- name
- three-best-practices
- description
- 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.
- license
- MIT
- metadata.author
- three-agent-skills
- metadata.version
- 2.1.0
- metadata.three-version
- 0.182.0+
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
llmsbranch 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. Modern Setup (FUNDAMENTAL)
setup-use-import-maps- Use Import Maps, not old CDN scriptssetup-choose-renderer- WebGLRenderer (default) vs WebGPURenderer (TSL/compute)setup-animation-loop- Userenderer.setAnimationLoop()not manual RAFsetup-basic-scene-template- Complete modern scene template
1. Memory Management (CRITICAL)
memory-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 materials
2. Render Loop (CRITICAL)
render-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 judiciously
3. Draw Call Optimization (CRITICAL)
draw-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 BufferGeometryUtils
4. Geometry (HIGH)
geometry-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 buffers
5. Materials & Textures (HIGH)
material-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)
6. Asset Compression (HIGH)
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 improvement
7. Lighting & Shadows (MEDIUM-HIGH)
lighting-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 shadows
8. Scene Graph (MEDIUM)
scene-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/destroy
9. Shaders GLSL (MEDIUM)
shader-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 chunks
Show full SKILL.md (439 more words)Show less
10. TSL - Three.js Shading Language (MEDIUM)
tsl-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 translation
11. WebGPU Renderer (MEDIUM)
webgpu-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 rendering
12. Loading & Assets (MEDIUM)
loading-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 assets
13. Core Web Vitals (MEDIUM-HIGH)
core-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 chunks
14. Camera & Controls (LOW-MEDIUM)
camera-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 limits
15. Animation (MEDIUM)
animation-system- AnimationMixer, blending, morph targets, skeletal
16. Physics (MEDIUM)
physics-integration- Rapier, Cannon-es integration patternsphysics-compute-shaders- GPU physics with compute shaders
17. WebXR (MEDIUM)
webxr-setup- VR/AR buttons, controllers, hit testing
18. Audio (LOW-MEDIUM)
audio-spatial- PositionalAudio, HRTF, spatial sound
19. Post-Processing (MEDIUM)
postprocessing-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 WebGPU
20. Optimization (HIGH)
mobile-optimization- Mobile-specific optimizations and checklistraycasting-optimization- BVH, layers, GPU picking
21. Production (HIGH)
error-handling-recovery- WebGL context loss and recoverymigration-checklist- Breaking changes by version
22. Debug & DevTools (LOW)
debug-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 production
How to Use
Read 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.mdEach rule file contains:
- Brief explanation of why it matters
- BAD code example with explanation
- GOOD code example with explanation
- Additional context and references
Key Patterns
Modern Import Maps
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
"three/tsl": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.tsl.js"
}
}
</script>Proper Disposal
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();
}
}
}TSL Basic Usage
import { texture, uv, color, time, sin } from 'three/tsl';
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = texture(map).mul(color(0xff0000));
material.colorNode = color(0x00ff00).mul(sin(time).mul(0.5).add(0.5));Mobile Detection
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));© zebbern, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 28 other files in skills/three-best-practices of zebbern/claude-code-guide.
- SKILL.md
- rules/_sections.md
- rules/animation-system.md
- rules/asset-compression.md
- rules/audio-spatial.md
- rules/core-web-vitals.md
- rules/debug-devtools.md
- rules/draw-call-optimization.md
- rules/error-handling-recovery.md
- rules/geometry-instanced-mesh.md
- rules/gltf-loading-optimization.md
- rules/lighting-shadows-advanced.md
- rules/memory-dispose-geometry.md
- rules/migration-checklist.md
- rules/mobile-optimization.md
- rules/object-pooling.md
- rules/physics-integration.md
- rules/postprocessing-optimization.md
- rules/raycasting-optimization.md
- rules/render-delta-time.md
- … and 9 more
Open the folder on GitHubat commit e62775c
Compare with similar skills
Three Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Three Best Practices this skillzebbern/claude-code-guide | 4.7k | — | ~3.3k | Automated safety check: Pass | MIT | |
| New ExperimentTresjs/tres | 3.8k | — | ~782 | Automated safety check: Pass | MIT | |
| Shader Extractcth9191/site-clone | 133 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Typegpusoftware-mansion-labs/skills | 291 | 2 repos | ~5.6k | Automated safety check: Pass | None | |
| Tslpmndrs/glyph | 393 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Stage RenderingSiege-Perilous/tableslayer | 122 | — | ~4.1k | Automated safety check: Pass | Custom licence |
Similar skills
Shader Extract
cth9191/site-clone
Extract, reproduce, and locally replay a single WebGL / WebGPU / Canvas / shader / animated-3D visual effect from a web page — the GPU-rendered surface that DOM/CSS cloning is blind to.
Typegpu
software-mansion-labs/skills
TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.
Tsl
pmndrs/glyph
Implement, migrate, review, debug, or verify Three.js Shading Language (TSL) materials, node graphs, WebGPU compute work, and post-processing.
Stage Rendering
Siege-Perilous/tableslayer
Architecture and gotchas for packages/stage — the Threlte/Three.js map renderer (layers, two-pass rendering, shaders, coordinate flips, performance tiers, disposal).
Threejs Materials
OWWZO/ai-agent
Three.js materials - PBR, basic, phong, shader materials, material properties.
More from zebbern/claude-code-guide
All 46 skills in this repoCode To Diagram
zebbern/claude-code-guide
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
Localization Toolkit
zebbern/claude-code-guide
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the…
Audit Flow
zebbern/claude-code-guide
Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export.
Chart Image
zebbern/claude-code-guide
Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.
Code Vuln Audit
zebbern/claude-code-guide
Scan code for security issues: dependency vulnerabilities (npm/pip audit), secret leaks (regex and entropy analysis), and OWASP anti-patterns like SQL injection, XSS, or command injection.
Linux Shell Scripting
zebbern/claude-code-guide
This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts".
Related
Works with
Categories
Questions about Three Best Practices
What does Three Best Practices do?
Three.js performance optimization and best practices guidelines. Three Best Practices is an agent skill from zebbern/claude-code-guide.js performance optimization and best practices guidelines.
When should I use Three Best Practices?
Three Best Practices fits situations like: optimizing Three.js code; tasks involving 3D scenes; webGL/WebGPU rendering.
How do I install Three Best Practices in Claude Code?
Run `npx skills add zebbern/claude-code-guide --skill three-best-practices -a claude-code`. Or copy the skill folder (skills/three-best-practices in zebbern/claude-code-guide) into .claude/skills/three-best-practices in your project. Claude Code loads it when a task matches its description.
How do I install Three Best Practices in Codex?
Run `npx skills add zebbern/claude-code-guide --skill three-best-practices -a codex`. Or copy the skill folder (skills/three-best-practices in zebbern/claude-code-guide) into .agents/skills/three-best-practices in your project. Codex loads it when a task matches its description.
Can I use Three Best Practices in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zebbern/claude-code-guide --skill three-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/three-best-practices, .gemini/skills/three-best-practices, .github/skills/three-best-practices and .opencode/skills/three-best-practices in your project.
What does Three Best Practices need to run?
SKILL.md names no scripts, command-line tools or credentials: Three Best Practices is instructions for the agent only.
Does Three Best Practices access the network?
SKILL.md names 3 domains. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. As links in the text: utsubo.com and github.com. This is read from the text; nothing was executed.
Is Three Best Practices safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Three Best Practices use?
Three Best Practices is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Three Best Practices use?
About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Three Best Practices?
Skills that share tags, products or a category with Three Best Practices: New Experiment (Tresjs/tres, 3.8k stars), Shader Extract (cth9191/site-clone, 133 stars), Typegpu (software-mansion-labs/skills, 291 stars) and Tsl (pmndrs/glyph, 393 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Three Best Practices?
zebbern (a GitHub user) maintains it in zebbern/claude-code-guide, which has 4,650 GitHub stars. The repository holds 46 skills in this directory. The repository was last updated on October 8, 2026.
Source: zebbern/claude-code-guide on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.