cloudai-x/threejs-skills
10 skills41.6k installs23.3k starsGitHub
Install
npx skills add https://github.com/cloudai-x/threejs-skillsSkills in this repo
1Threejs AnimationThreejs Animation is an agent skill for solo builders adding motion to Three.js scenes—whether you are spinning a hero mesh, playing imported GLTF clips, or blending multiple actions on a rig. It centers the official mental model: AnimationClip holds tracks, AnimationMixer drives a root object, and AnimationAction controls play state, fade, and weight. The skill includes a minimal procedural loop using Clock delta time, patterns for authoring clips with NumberKeyframeTrack and vector tracks on properties like position and material opacity, and guidance for the cases agents hit most often: GLTF playback, skeletal setups, morph targets, and mixing concurrent animations. Invoke it during Build when frontend 3D work is blocked on timing, easing, or mixer wiring rather than on scene setup alone. It is a procedural reference integration, not a deploy or SEO workflow—pair it with your renderer, loader, and asset pipeline skills in the same threejs-skills family.6.3kinstalls2Threejs Fundamentalsthreejs-fundamentals is an agent skill from the threejs-skills package that encodes the canonical Three.js bootstrap: import the library, create scene and PerspectiveCamera with sensible near/far planes, configure a WebGLRenderer sized to the viewport, add a mesh with standard lighting, and run a resize-aware animation loop. It is aimed at solo builders shipping interactive 3D in the browser—landing hero scenes, configurators, lightweight games, or technical demos—who want the agent to follow consistent setup instead of mixing deprecated patterns. Invoke it when you are creating or refactoring scene graphs, choosing cameras, wiring renderers, parenting Object3D nodes, or debugging transforms and coordinate handedness. The skill is phase-specific to Build → frontend because it does not cover deployment, SEO, or backend asset pipelines; pair it with your bundler choice (Vite, Next) outside this skill. Intermediate complexity reflects WebGL concepts (projection matrices, pixel ratio, material/light interplay) while the quick start stays copy-paste friendly for indies iterating on visuals.5.2kinstalls3Threejs Shadersthreejs-shaders is an agent skill for solo builders shipping WebGL experiences who need custom looks beyond MeshStandardMaterial. It centers on THREE.ShaderMaterial: declare uniforms, paste vertexShader and fragmentShader strings, and tick uniforms from the render loop—typically time from a clock for motion or color shifts. The readme explains when ShaderMaterial is enough because Three.js injects standard matrices, normals, UVs, and cameraPosition, versus RawShaderMaterial when you want full control and accept more boilerplate. That split matters for indies iterating on shaders without fighting implicit assumptions. Use it during Build when a marketing site, product configurator, or small game needs glow, distortion, procedural surfaces, or material overrides that stock PBR cannot express cleanly. The skill is intermediate: you should already import Three.js and understand meshes and render loops; it does not replace learning GLSL fundamentals but gives copy-paste structure so an agent does not hallucinate wrong uniform names or skip the projectionMatrix multiply in vertex main. Outcome is working custom materials you can tune per mesh or swap at runtime.4.5kinstalls4Threejs GeometryThree.js Geometry is a phase-specific frontend agent skill that teaches how to create 3D shapes with Three.js built-in geometries, custom BufferGeometry, and instanced rendering when performance matters. Solo builders shipping WebGL demos, product configurators, data visualizations, or indie games use it whenever the task is defining vertices, assembling meshes, or choosing the right primitive instead of hand-rolling math from scratch. The readme emphasizes practical snippets—dimensioned boxes, segmented spheres, planes, circles, cylinders—and points toward advanced paths like hemispheres, open-ended cylinders, and GPU-friendly instancing for large object counts. It assumes a standard Three.js ES module setup and pairs naturally with material, lighting, and animation skills elsewhere in the same stack. Complexity sits at intermediate because segment counts, draw calls, and custom attributes affect both visual quality and frame time.4.2kinstalls5Threejs Interactionthreejs-interaction is a focused Three.js agent skill for raycasting, camera controls, and pointer input. Indie builders shipping 3D demos, configurators, or lightweight games use it when scenes render but lack picking, orbit navigation, or touch-friendly controls. The readme centers a minimal working loop: damped OrbitControls, a Raycaster synced to mouse coordinates, and a click handler that logs or acts on the first intersected object. It expands into ray setup alternatives and the structure of intersection results so agents do not guess API fields. Tagged phase-specific under Build frontend because interaction is implemented alongside meshes, lights, and renderers—not as a launch or SEO concern. Pair with other Three.js skills in the same hub for materials or animation when the experience grows beyond click-and-orbit.4kinstalls6Threejs Materialsthreejs-materials is procedural reference knowledge for Three.js rendering: when to use each built-in material, how PBR properties behave, and how to reach for custom shaders or performance tweaks. Solo and indie builders shipping browser-based 3D—product demos, games, data viz, or creative tools—invoke it while styling meshes and debugging why lighting or textures look wrong. The skill anchors on MeshStandardMaterial as the default realistic choice and maps unlit, toon, and debug materials to concrete use cases so agents do not guess wrong types. It fits Claude Code, Cursor, and similar agents whenever the task mentions textures, metalness, wireframes, or shader edits rather than scene graph or animation plumbing.3.8kinstalls7Threejs PostprocessingThreejs-postprocessing is a focused agent skill for solo builders shipping interactive 3D in the browser. Install it when your Three.js scene works but looks flat—you want bloom, depth of field, color grading, or custom full-screen shaders without reverse-engineering the addons API from scattered docs. The skill walks through EffectComposer wiring, RenderPass ordering, UnrealBloomPass tuning, and the critical habit of calling composer.render() in your animation loop. It is for Build-phase frontend work on games, demos, SaaS visualizations, and marketing 3D—not for backend APIs or automated perf audits. Pair it with your existing scene, camera, and renderer setup; it accelerates polish that otherwise eats days of trial and error.3.5kinstalls8Threejs Texturesthreejs-textures is a procedural reference skill for solo and indie builders shipping browser 3D with Three.js. It walks through loading images with TextureLoader, applying maps to MeshStandardMaterial, and the details that usually break first-time scenes: wrong color space on albedo vs data textures, async loading order, and environment or cubemap setups for believable lighting. Use it when you are wiring color, normal, and roughness maps, debugging UV coordinates, or swapping in HDR environments without guessing which settings belong on which map type. The skill is aimed at developers using Claude Code, Cursor, or similar agents to implement frontend rendering—not a generic art pipeline or a hosted asset service. It stays in the Build phase because textures are part of the product surface users see; pairing it with broader Three.js scene or perf skills is natural before you ship heavy assets.3.4kinstalls9Threejs LightingThree.js Lighting is a focused agent skill for solo builders shipping interactive 3D on the web—landing heroes, product viewers, lightweight games, or creative portfolios. It walks through light types from cheap Ambient and Hemisphere fills through shadow-casting Directional, Point, and Spot lights, including cost notes so indie devs do not tank mobile GPUs. Triggers align with adding lights, turning on shadow maps, setting image-based lighting, or squeezing frame time when scenes feel muddy or blown out. Copy-paste JavaScript snippets use the standard THREE namespace imports your Vite or Next client bundle already expects. The skill does not replace art direction; it gives procedural recipes so your coding agent implements consistent baseline illumination and knows which lights actually support shadows versus needing custom RectArea workarounds.3.3kinstalls10Threejs Loadersthreejs-loaders is an agent skill that teaches Three.js asset loading for solo builders shipping WebGL experiences in games, product viewers, or marketing 3D. It documents quick-start GLTF and texture loads, then centers LoadingManager so multiple textures and models finish before you call startGame or reveal the canvas. Use it when an agent must wire model.glb imports, texture.jpg maps, HDR environments, or progress UI without guessing addon import paths. The skill fits Claude Code, Cursor, and Codex workflows where procedural knowledge beats one-off Stack Overflow snippets. Pair it with other Three.js skills in the same repo for materials, lighting, and performance after assets are on the scene graph.3.3kinstalls