scottstts/Threejs-Awesome-Graphics-Agent-Skills

What it is. Scott Sun's 24 three.js skills for producing high-quality 3D graphics with a coding agent: a router skill picks among bloom, water optics, particles, post-processing, materials, lighting, and scene-composition skills. Use it when an agent has to build a WebGL scene or a visual effect rather than a UI.

Install

• npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills installs everything for whichever agent you use, or npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill <name> for one skill; or copy a <skill>/SKILL.md folder into ~/.claude/skills/.

Skills

• threejs-atmosphere-aerial-perspective — Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based... (SKILL.md)
• threejs-bloom — Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive... (SKILL.md)
• threejs-camera-direction — Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating... (SKILL.md)
• threejs-exposure-color-grading — Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map... (SKILL.md)
• threejs-image-pipeline — Build a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO or bent normals; bloom; eye adaptation; tone mapping; 3D LUT... (SKILL.md)
• threejs-parallax-occlusion-mapping — Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs, clipped flat or curved silhouettes, inflated shells, self-shadowing,... (SKILL.md)
• threejs-precipitation-surfaces — Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain... (SKILL.md)
• threejs-procedural-animation — Build advanced procedural animation in Three.js. Use for launch kinematics, gravity turns, staging, spin docking, target-frame decomposition, spring-follow motion, rotating-frame alignment,... (SKILL.md)
• threejs-procedural-architecture — Build authored procedural buildings and architectural kits in Three.js. Use for massing grammars, exposed-edge analysis, façade bays, profiles, arches, cornices, roofs, ornaments, material-slot... (SKILL.md)
• threejs-procedural-fields — Build coherent procedural scalar and vector fields for Three.js materials and geometry. Use for terrain, planets, wear, biomes, clouds, water masks, displacement, roughness, normals, domain... (SKILL.md)
• threejs-procedural-geometry — Build well-crafted production procedural meshes in Three.js. Use for complete hard-surface assemblies and humanoid robots, profile extrusion, parameter-curve and spine lofts, pillow panels, exact... (SKILL.md)
• threejs-procedural-materials — Author production procedural materials in Three.js. Use for hybrid texture-backed PBR soil and moss with procedural displacement and masks, upward-facing model moss accumulation, atlas filtering,... (SKILL.md)
• threejs-procedural-planets — Author procedural planetary bodies in Three.js. Use for spherical terrain, continents, ridges, craters, biome masks, coastlines, material variation, analytic normals, altitude LOD, and bodies that... (SKILL.md)
• threejs-procedural-vegetation — Generate authored procedural trees, grass, ivy, flowers, and vegetation in Three.js or raw WebGPU. Use for surface-following vines, painted ivy paths, stylized or GPU grass, GPU-culled virtual... (SKILL.md)
• threejs-procedural-vfx — Author production real-time VFX in Three.js. Use for filmic HDR lens-flare compositors, highlight-derived ghosts, field-angle pupil deformation, localized glare and bloom, raymarched aurora... (SKILL.md)
• threejs-raymarched-space-effects — Build raymarched space phenomena in Three.js. Use for black-hole lensing, accretion disks, wormhole throat transits, curved-ray and null-geodesic integration, lensed celestial spheres, procedural... (SKILL.md)
• threejs-screen-space-ambient-occlusion — Implement a production GTAO path in Three.js. Use for half-resolution horizon sampling, reversed-depth reconstruction, bent-normal encoding, full-resolution bilateral reconstruction,... (SKILL.md)
• threejs-shadow-systems — Implement stable, scalable directional-shadow systems for Three.js. Use for large procedural worlds, city scenes, terrain, moving cameras, WebGPU/TSL shadow nodes, cascades, cached clipmaps, texel... (SKILL.md)
• threejs-skill-router — Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials,... (SKILL.md)
• threejs-spectral-ocean — Build large procedural oceans and coast transitions in Three.js. Use for WebGPU/TSL FFT oceans, multi-cascade wavelength bands, hybrid FFT plus Gerstner clear-water oceans, coastal breakers,... (SKILL.md)
• threejs-temporal-surfaces — Build view-aligned and screen-space surface effects in Three.js. Use for touch-history frost and thaw, ping-pong accumulation, reduced-resolution blur, crystalline masks, two-scale refraction, and... (SKILL.md)
• threejs-visual-validation — Validate advanced Three.js graphics as authored systems rather than subjective screenshots. Use for fixed-view visual contracts, field and pass diagnostics, no-post baselines, seed sweeps,... (SKILL.md)
• threejs-volumetric-clouds — Implement volumetric cloud systems in Three.js. Use for weather-driven density, bounded raymarching, shape/detail erosion, vertical profiles, lighting cones, silver lining, temporal... (SKILL.md)
• threejs-water-optics — Build production analytic and bounded water in Three.js. Use for shared multi-wave displacement and normals, bounded RGBA heightfield pool simulation, local drops, object-driven ripples,... (SKILL.md)

Back to Agent skills.