Three.js WebGPU/TSL Skills

Twenty-seven installable agent skills for Three.js r185 WebGPU/TSL work. They cover procedural graphics, rendering systems, motion, final-image ownership, debugging, and falsifiable visual validation.

skills.sh

Website: https://threejs-skills.com/ · LLM overview: llms.txt · Machine-readable index: skills.json

Install

List the available skills, install the complete pack, or select one skill:

npx skills@latest add linegel/threejs-complete-set-of-skill --list
npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*'
npx skills@latest add linegel/threejs-complete-set-of-skill --skill threejs-spectral-ocean

For a specific agent in non-interactive setup:

npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*' -g -a codex -y
npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*' -g -a claude-code -y

The authoritative installable product is skills/. Runtimes without the skills CLI can copy the required skills/<name>/ directories into their local skills directory. A skill may include self-contained references, scripts, examples, assets, or fixtures when reachable from SKILL.md. Statically named local dependencies of linked scripts and examples are included through the same checked closure. Full demos, labs, reviews, and generated media under the top-level threejs-* directories remain repository-only.

For a request spanning several rendering systems, start with threejs-choose-skills. Focused requests can invoke the owning skill directly.

Use $threejs-choose-skills to route an ocean-at-sunset scene with clouds,
a flythrough camera, bloom, exposure, and visual validation.

Skills

Planning and validation

Skill Use it for
threejs-choose-skills Route multi-system work to the smallest causal skill set.
threejs-debugging Reproduce, localize, and contain version-dependent Three.js failures.
threejs-visual-validation Prove visual, numerical, temporal, performance, and lifecycle claims.
threejs-compatibility-fallbacks Derive an explicit unavailable-WebGPU fallback and state the lost guarantees.

Cameras and final image

Skill Use it for
threejs-camera-controls-and-rigs Camera ownership, rigs, controls, framing, large coordinates, and resets.
threejs-scalable-real-time-shadows Single shadows, CSM, tiled shadows, and cached clipmaps.
threejs-ambient-contact-shading AO/GTAO, reconstruction, temporal AO, and bent normals.
threejs-bloom Full-scene or selective HDR glare with explicit alpha and output ownership.
threejs-exposure-color-grading Metering, EV adaptation, tone mapping, LUT grading, and output color.
threejs-image-pipeline Minimal framegraphs, shared signals, histories, and final presentation.

Worlds and environments

Skill Use it for
threejs-sky-atmosphere-and-haze Authored sky/fog or planetary atmosphere and aerial perspective.
threejs-volumetric-clouds Cloud density, bounded transport, shadows, and temporal reconstruction.
threejs-spectral-ocean Periodic offshore FFT oceans, foam, queries, and coastal handoff.
threejs-water-optics Bounded and coastal water, wet/dry flow, caustics, and optics.
threejs-rain-snow-and-wet-surfaces Precipitation, receiver accumulation, snow, wetness, ripples, and splashes.

Procedural content

Skill Use it for
threejs-procedural-fields Shared scalar/vector causes, bakes, filtering, parity, and metric terrain fields.
threejs-procedural-materials Procedural PBR graphs, mapping, filtering, emission, and instance variants.
threejs-procedural-geometry Indexed mesh writers, sweeps, batching, dynamic updates, and contours.
threejs-object-sculptor Reconstruct reference-image objects as procedural Three.js models.
threejs-procedural-buildings-and-cities Building grammars, facades, compilation, city paging, and LOD.
threejs-procedural-planets Body-scale mapping, cube-sphere/clipmap LOD, fields, and atmosphere handoff.
threejs-procedural-vegetation Dense populations, tree growth, terrain ecology, LOD, and rooted wind.
threejs-procedural-creatures Generated bodies, surfaces, rigs, locomotion, and repeated populations.

Motion and effects

Skill Use it for
threejs-procedural-motion-systems Analytic and fixed-step motion, constraints, frames, and quaternions.
threejs-particles-trails-and-effects Analytic/recurrent particles, trails, compaction, and HDR effects.
threejs-dynamic-surface-effects Stateful surface history, sparse/full updates, decay, diffusion, and refraction.
threejs-black-holes-and-space-effects Artistic bending, Ellis wormholes, Schwarzschild lensing, and disk transport.

Product boundary

skills/<name>/                 Installable product
  SKILL.md                     Invocation and common execution path
  agents/openai.yaml           Human-facing name, summary, and default prompt
  references/                  Branch-specific technical guidance
  scripts/                     Invoked helper, only when indispensable
  examples/                    Minimal canonical examples, when clearer than prose
  assets/                      Inputs or templates used by the installed workflow
  fixtures/                    Oracles that distinguish correct and incorrect output
  LICENSE                      License included with the standalone skill

threejs-*/examples/            Full repository demos and labs
threejs-*/assets/              Demo, evidence, and generated media
threejs-*/                     Other repository review and validation material
threejs-physics-integration/   Experimental notes; not an installable skill

Every public skill is model-invoked. Its description names the real invocation branches; common decisions stay in SKILL.md; branch-only equations, API rules, caveats, validation methods, and bundled resources are loaded through explicit context pointers. Unlinked or unreferenced bundled files are rejected from the installed product.

Validation

Validate the roster, frontmatter, real-file product boundary, transitive resource closure, standalone links, licenses, and forbidden repository leakage:

npm run skills:check

Before release, run this manual copy-mode smoke installation from the repository root; it creates and uses a fresh scratch directory:

repo="$(pwd -P)"
scratch="$(mktemp -d)"
(
  cd "$scratch"
  npx skills@latest add "$repo" --skill '*' --copy -a codex -y
)
diff -qr "$repo/skills" "$scratch/.agents/skills"

The smoke passes only when the CLI discovers and installs all 27 skills, every copied skill directory matches its source under skills/, and no top-level repository demo or lab is installed. The scratch check is deliberately manual; npm run skills:check does not claim to run it.

Top-level repository examples and labs have separate validation procedures. They support development but are not installed. A resource becomes part of an installed skill only when it is self-contained under skills/<name>/ and is either linked from reachable Markdown outside fenced code or is a statically named local dependency of a linked script or example. The validator follows JavaScript and TypeScript imports, new URL, fetch, and readFile calls; HTML/SVG href and src attributes plus inline module imports; CSS imports and URLs; and relative Python imports. Dynamically assembled paths require an explicit Markdown pointer.

Quality rules

  • Choose the representation from the workload and truth contract before writing GPU code.
  • Name units, spaces, owners, validity limits, resets, and visible failure signatures.
  • Keep sequential actions in order; every step ends with a checkable completion criterion.
  • Keep each meaning in one place and load branch-only reference material conditionally.
  • Delete prose only when it is irrelevant, duplicated, stale, a behavioral no-op, or relocated.
  • Use one scene render and one final output conversion whenever shared signals permit it.
  • Treat measured evidence as evidence, not as a substitute for understanding the mechanism.

Attribution

threejs-object-sculptor is adapted from Three.js Object Sculptor by Vinh Hiển, pinned at upstream commit 4194e9ad436a0dff4e1ec982fac1ac64dfded241. Its installed directory retains the upstream MIT license. The duplicate Codex plugin bundle is not part of this repository.

Contributing

Edit the authoritative files under skills/<name>/. Bundle a reference, script, example, asset, or fixture only when it is self-contained and reachable from the installed workflow. Keep full demos, labs, and repository validation outside that directory. Run npm run skills:check, then run the directly relevant example or lab validation when implementation evidence changed.