Claude Code skills for building interactive, simulation-driven three.js explainers and living 3D worlds. Each skill is a method distilled from a real build: contracts first, parallel builder agents on disjoint files, integration, then adversarial review and screenshot QA. The skills include reference code, harness scripts and the lessons that cost real time.
| Skill | Builds | Distilled from |
|---|---|---|
living-anatomy |
A living, physiologically simulated organ or body system (an eye that follows you, a beating heart, breathing lungs) with cutaways, readouts and medical-aid explainers | "The Living Eye" |
living-diorama |
A self-running isometric low-poly miniature world (station, harbour, hospital ward, factory) with day/night, weather or shifts, and scheduled vehicles and people | trainstation |
photo-freeze-frame |
An explorable 3D freeze-frame of the moment in a photo (launch, eruption, wave), camera-calibrated to the photo, with terrain from OpenStreetMap and an optional physics explainer | starship-launch |
science-visualiser |
A "how it works" explainer of a mechanism (engine, rifle action, clock escapement) with a Blender-scripted model, a physics simulation driving the animation, cutaway/x-ray/exploded views and live charts | engine and rifle builds |
In Claude Code:
/plugin marketplace add joonsp/threejs-skills
/plugin install threejs-skills@threejs-skills
Then ask for what you want ("make a 3D beating heart that reacts to exercise", "a living isometric harbour") and the
right skill triggers, or invoke one directly, such as /threejs-skills:living-diorama. Update with
/plugin marketplace update threejs-skills.
Without the plugin system, copy or symlink a folder from skills/ into ~/.claude/skills/. opencode reads skills from
that same path.
- Node.js and npm or pnpm. The skills scaffold Vite + TypeScript + three.js projects.
- Playwright Chromium for the headless screenshot and QA scripts.
- A GPU. The screenshot scripts render through ANGLE/Vulkan by default;
SW=1(or--swin living-diorama) forces SwiftShader software rendering, which is very slow and pins the CPU. Never make performance decisions from it. science-visualiser: Blender, run headless (scripts/blender_run.sh). Previews render with Cycles on the first available GPU backend;CYCLES_CPU=1allows the CPU. Without Blender, the skill builds geometry in three.js instead.photo-freeze-frame: Python 3 with numpy for camera calibration, sun position and the OpenStreetMap fetch.- The full builds are orchestrated with Claude Code's
Workflowtool (multi-agent workflows).living-dioramaalso documents running the phases by hand in harnesses without it (references/opencode.md). The other skills can be scaled down to a single agent for small demos.
These are large builds. A flagship living-anatomy run took about 4M subagent tokens and 5–6 hours; a
photo-freeze-frame build with polish took about 8M tokens and 10+ hours. The skills tell Claude to state the cost and
get a go-ahead before starting, and to scale down for small requests.
photo-freeze-frameworks from someone else's photo. Keep the reference photo out of anything you publish unless its licence allows it. OpenStreetMap-derived data is ODbL and needs attribution, which the starter includes.- Each skill's
references/lessons.mdrecords the pitfalls from its source build. Read it before changing the method.
MIT. See LICENSE.