Three.js-Claude-Skill-Package

In the author's own words, from each skill's SKILL.md.

• threejs-agents-model-optimizer

  Use when optimizing 3D models for web delivery: reducing file size, compressing meshes, optimizing textures, or generating LOD. Provides a complete GLTF optimization pipeline using Draco, KTX2, mesh simplification, and gltf-transform. Keywords: optimize model, reduce file size, Draco compression, KTX2, gltf-transform, mesh simplification, LOD, GLTF optimize, bundle size, model too big, slow loadi…

  skills/source/threejs-agents/threejs-agents-model-optimizer/SKILL.md on GitHub (opens in a new tab)

• threejs-agents-scene-builder

  Use when composing a complete Three.js scene from scratch or when asked to create a 3D visualization. Provides decision trees for choosing lighting setup, materials, camera type, controls, and post-processing pipeline. Orchestrates other Three.js skills. Keywords: create scene, build 3D, Three.js project, scene setup, visualization, product viewer, 3D application, scene composition, how to start…

  skills/source/threejs-agents/threejs-agents-scene-builder/SKILL.md on GitHub (opens in a new tab)

• threejs-core-math

  Use when working with 3D math in Three.js: vectors, matrices, quaternions, rotations, colors, or coordinate transforms. Prevents the common mistake of mutating shared vectors, using wrong rotation order, or confusing Euler gimbal lock. Covers Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, Box3, Sphere, coordinate system. Keywords: Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, ler…

  skills/source/threejs-core/threejs-core-math/SKILL.md on GitHub (opens in a new tab)

• threejs-core-raycaster

  Use when implementing mouse picking, hover detection, object selection, or line-of-sight checks in Three.js. Prevents the common mistake of raycasting every mousemove frame, not using layers for filtering, or missing recursive flag. Covers Raycaster, setFromCamera, intersection format, InstancedMesh picking, layers, performance. Keywords: Raycaster, mouse picking, intersectObjects, click, hover,…

  skills/source/threejs-core/threejs-core-raycaster/SKILL.md on GitHub (opens in a new tab)

• threejs-core-renderer

  Use when initializing a Three.js renderer, setting up the render loop, handling window resize, configuring tone mapping, or managing color spaces. Prevents the common mistake of not capping pixel ratio, using wrong color space, or forgetting to enable shadow maps. Covers WebGLRenderer, render targets, tone mapping, color management. Keywords: WebGLRenderer, render loop, setSize, setPixelRatio, to…

  skills/source/threejs-core/threejs-core-renderer/SKILL.md on GitHub (opens in a new tab)

• threejs-core-scene-graph

  Use when creating Three.js scenes, adding objects, managing parent-child hierarchies, or organizing 3D content. Prevents the common mistake of using add() instead of attach() for reparenting, forgetting matrixAutoUpdate, or missing dispose() calls. Covers Object3D, Scene, Group, Mesh, Layers, Fog, traversal, coordinate conversion. Keywords: scene graph, Object3D, add, remove, traverse, layers, fo…

  skills/source/threejs-core/threejs-core-scene-graph/SKILL.md on GitHub (opens in a new tab)

• threejs-errors-performance

  Use when a Three.js scene has performance problems: low FPS, memory leaks, too many draw calls, or high GPU memory usage. Prevents the common mistake of forgetting dispose(), creating objects in the render loop, or not using InstancedMesh for repeated objects. Covers disposal patterns, draw call optimization, InstancedMesh, LOD, texture compression, renderer.info, Stats.js profiling. Keywords: pe…

  skills/source/threejs-errors/threejs-errors-performance/SKILL.md on GitHub (opens in a new tab)

• threejs-errors-rendering

  Use when a Three.js scene renders incorrectly: black screen, invisible objects, wrong colors, z-fighting, or broken shadows. Prevents the common mistake of wrong color space, missing material.side, or forgetting updateProjectionMatrix. Covers all common rendering errors with diagnosis steps and fix patterns. Keywords: black screen, invisible, wrong color, z-fighting, shadow artifact, rendering er…

  skills/source/threejs-errors/threejs-errors-rendering/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-animation

  Use when playing animations, crossfading between animation states, or loading skeletal animations from GLTF in Three.js. Prevents the common mistake of not calling mixer.update(delta) every frame, wrong crossfade setup, or missing Clock. Covers AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack, crossfade, blending. Keywords: animation, AnimationMixer, AnimationClip, AnimationAction, c…

  skills/source/threejs-impl/threejs-impl-animation/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-audio

  Use when adding sound to a Three.js scene: background music, 3D spatial audio, or audio visualization. Prevents the common mistake of ignoring browser autoplay policy, not attaching AudioListener to camera, or wrong distance model. Covers AudioListener, Audio, PositionalAudio, AudioAnalyser. Keywords: audio, sound, AudioListener, PositionalAudio, 3D audio, spatial audio, music, AudioAnalyser, Web…

  skills/source/threejs-impl/threejs-impl-audio/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-drei

  Use when using Drei helper components with React Three Fiber: controls, environment maps, text rendering, HTML overlays, or performance helpers. Prevents the common mistake of not wrapping useGLTF in Suspense, using wrong Environment preset name, or forgetting makeDefault on controls. Covers 150+ Drei components across controls, environment, text, materials, loaders, performance. Keywords: Drei,…

  skills/source/threejs-impl/threejs-impl-drei/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-ifc-viewer

  Use when loading and viewing IFC/BIM models in a Three.js scene. Prevents the common mistake of using deprecated web-ifc-three, ignoring AGPL-3.0 license implications, or loading large IFC files without streaming. Covers web-ifc (MIT), @thatopen/components (AGPL-3.0), IFC loading, spatial tree, property extraction. Keywords: IFC, BIM, web-ifc, IFC viewer, @thatopen/components, building model, arc…

  skills/source/threejs-impl/threejs-impl-ifc-viewer/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-lighting

  Use when setting up lighting in a Three.js scene: ambient, directional, point, spot, area, or environment lighting. Prevents the common mistake of too many shadow-casting lights, wrong intensity units, or missing environment maps for PBR. Covers all 7 light types, PMREMGenerator, HDR environment maps, physically correct intensity, helpers. Keywords: lighting, AmbientLight, DirectionalLight, Point…

  skills/source/threejs-impl/threejs-impl-lighting/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-physics

  Use when adding physics simulation to a Three.js scene: rigid bodies, collisions, constraints, or raycasting. Prevents the common mistake of wrong Vec3/Vector3 conversion, missing world.step(), or choosing the wrong engine. Covers cannon-es and Rapier with Three.js sync patterns, performance comparison. Keywords: physics, cannon-es, Rapier, rigid body, collider, collision, gravity, simulation, WA…

  skills/source/threejs-impl/threejs-impl-physics/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-post-processing

  Use when adding post-processing effects like bloom, SSAO, depth of field, or anti-aliasing to a Three.js scene. Prevents the common mistake of mixing Three.js EffectComposer with pmndrs/postprocessing, wrong pass order, or missing RenderPass. Covers EffectComposer, 27+ passes, pmndrs/postprocessing, custom ShaderPass. Keywords: post-processing, EffectComposer, bloom, UnrealBloomPass, SSAO, outlin…

  skills/source/threejs-impl/threejs-impl-post-processing/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-react-three-fiber

  Use when building 3D scenes with React using React Three Fiber (R3F). Prevents the common mistake of mixing imperative Three.js code with R3F's declarative model, creating objects inside useFrame, or forgetting Suspense for loaders. Covers Canvas, useFrame, useThree, useLoader, JSX mapping, event system, performance patterns. Keywords: React Three Fiber, R3F, Canvas, useFrame, useThree, useLoader…

  skills/source/threejs-impl/threejs-impl-react-three-fiber/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-shadows

  Use when enabling shadows in a Three.js scene or debugging shadow artifacts like acne, peter panning, or low resolution. Prevents the common mistake of wrong shadow camera frustum, too many PointLight shadows, or missing castShadow/receiveShadow flags. Covers shadow map types, per-light config, bias tuning, CameraHelper debugging. Keywords: shadows, shadowMap, shadow acne, peter panning, bias, no…

  skills/source/threejs-impl/threejs-impl-shadows/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-webgpu

  Use when using the Three.js WebGPU renderer, node-based materials, TSL (Three Shading Language), or compute shaders. Prevents the common mistake of not checking browser support, missing async init, or using GLSL with WebGPU. Covers WebGPURenderer, node materials, TSL, compute shaders, WebGL fallback, migration guide. Keywords: WebGPU, WebGPURenderer, TSL, Three Shading Language, node material, co…

  skills/source/threejs-impl/threejs-impl-webgpu/SKILL.md on GitHub (opens in a new tab)

• threejs-impl-xr

  Use when building VR or AR experiences with Three.js using WebXR. Prevents the common mistake of using requestAnimationFrame instead of setAnimationLoop, not handling controller events, or wrong reference space. Covers WebXRManager, VRButton, ARButton, controllers, hand tracking, hit testing, teleportation. Keywords: VR, AR, XR, WebXR, VRButton, ARButton, immersive, controller, hand tracking, hit…

  skills/source/threejs-impl/threejs-impl-xr/SKILL.md on GitHub (opens in a new tab)

• threejs-syntax-controls

  Use when adding camera controls to a Three.js scene: orbit, pan, zoom, fly, first-person, or object manipulation. Prevents the common mistake of forgetting controls.update() in the render loop, not calling dispose(), or mixing controls. Covers OrbitControls, MapControls, FlyControls, PointerLockControls, TransformControls. Keywords: OrbitControls, controls, camera controls, orbit, pan, zoom, MapC…

  skills/source/threejs-syntax/threejs-syntax-controls/SKILL.md on GitHub (opens in a new tab)

• threejs-syntax-geometries

  Use when creating 3D shapes, custom geometry, or instanced meshes in Three.js. Prevents the common mistake of forgetting dispose(), not setting needsUpdate on BufferAttribute, or using non-indexed geometry when indexed is better. Covers BufferGeometry, BufferAttribute, all 21 built-in geometries, InstancedMesh, ExtrudeGeometry, custom geometry. Keywords: BufferGeometry, BoxGeometry, SphereGeometr…

  skills/source/threejs-syntax/threejs-syntax-geometries/SKILL.md on GitHub (opens in a new tab)

• threejs-syntax-loaders

  Use when loading 3D models (GLTF, FBX, OBJ), textures, or HDR environment maps in Three.js. Prevents the common mistake of not setting up DRACOLoader, wrong WASM path, or missing error handling. Covers GLTFLoader, DRACOLoader, KTX2Loader, TextureLoader, RGBELoader, FBXLoader, OBJLoader, LoadingManager. Keywords: GLTFLoader, GLTF, GLB, load model, DRACOLoader, texture, FBXLoader, OBJLoader, RGBELo…

  skills/source/threejs-syntax/threejs-syntax-loaders/SKILL.md on GitHub (opens in a new tab)

• threejs-syntax-materials

  Use when choosing or configuring materials, loading textures, or setting up PBR workflows in Three.js. Prevents the common mistake of wrong color space on textures, forgetting material.dispose(), or not calling material.needsUpdate after changes. Covers all 15+ material types, PBR metalness/roughness, MeshPhysicalMaterial, texture maps, color space. Keywords: MeshStandardMaterial, MeshPhysicalMat…

  skills/source/threejs-syntax/threejs-syntax-materials/SKILL.md on GitHub (opens in a new tab)

• threejs-syntax-shaders

  Use when writing custom GLSL shaders, creating ShaderMaterial or RawShaderMaterial, defining uniforms, or patching built-in materials with onBeforeCompile. Prevents the common mistake of wrong uniform format, missing needsUpdate on uniforms, or not including required defines. Covers ShaderMaterial, RawShaderMaterial, GLSL, uniforms, ShaderChunk, onBeforeCompile, defines, GLSL3. Keywords: ShaderMa…

  skills/source/threejs-syntax/threejs-syntax-shaders/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• cavemanby JuliusBrussee 🪨 why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman. 113k stars · 20 skills
• oh-my-openagentby code-yeongyu OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering. 70.1k stars · 25 skills
• OpenMontageby calesthio World's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge… 68.6k stars · 30 skills
• obsidian-skillsby kepano Agent skills for Obsidian. Teach your agent to use Obsidian CLI and open formats including Markdown, Bases, JSON Canvas. 49.6k stars · 6 skills
• CowAgentby zhayujie Open-source personal AI assistant & Agent Harness. Plans tasks, runs tools and skills, self-evolves with memory and knowledge. Multi-agent,… 47.4k stars · 3 skills
• watermarks-removerby guillaumemeyer A privacy-first app that strips AI watermarks from content you own. 24.2k stars · 2 skills