Diorama skill
A skill that builds rotatable Three.js dioramas in three looks, asking about style and model sourcing before the first mesh.
- 418 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent downloads the repository and external models, runs QA scripts and writes scene files.
- The licenses of downloaded models still have to be confirmed by you.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/dioramaDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent downloads the repository and external models, runs QA scripts and writes scene files.
- The licenses of downloaded models still have to be confirmed by you.
This is third-party code. Review the repository files before installing.
What it does
Diorama is a playbook and code kit for small Three.js scenes: a flat cut-out composition on white paper, a three-quarter camera with free orbit, a 64-colour palette with dither and ink contour, and toy-scale figures with real joint animation. The whole scene is a function of time `t`, so any frame can be frozen and compared. Before the first mesh the agent asks two questions. The first is the look: `pixel` by default, `stroked-toon` or `pixel-stroke`. The second is where models come from: licensed libraries, a hybrid (the default) or fully self-made. Then comes subject research, a pipeline build and frame checks with QA scripts.
Who it is for. Creative developers and designers building game and educational scenes in Three.js with Claude Code, Codex or Cursor.
Good fit when
- A diorama of a pool, night market or arena is wanted in pixel style with an orbiting camera.
- The scene has to be assembled from licensed models, with sources recorded in `SOURCES.md` and `CREDITS.md`.
- An explanatory scene about how a mechanism works needs a separate educational panel.
- Animation frames should pass script checks instead of an eyeball test.
Not a fit when
- A full 3D game with physics and levels is wanted.
- The project does not use Three.js.
- Ready models of any license are fine and no license check is wanted.
Example request
Build a night market diorama in stroked-toon style, source models in hybrid mode and record sources in `SOURCES.md`.Limitations
Scenes are built on Three.js, and the README names version r170. External model licenses must allow commercial use and redistribution, with sources recorded in `refs/SOURCES.md`. The reference set is large, so the agent reads `SKILL.md` and the index in full before work, which takes time and tokens. An unanswered style question stays open. Because the guide is large, small scene edits are best driven by the relevant file in `references/`. The repository video samples show results but do not replace script checks.
How to disable. Delete the `diorama` skill folder from the skills directory or working folder. Scenes already built remain separate project files.
FAQ
Which looks does Diorama support?
Three: classic `pixel`, `stroked-toon` and `pixel-stroke`. An answer like “old pixel style” or silence gives `pixel`, and camera orbit works in all looks.
Where do models come from?
Three modes: `internet-full`, `hybrid` (the default) and `authored-only`. The first two need commercial-use licenses with evidence in `refs/SOURCES.md`.
Does the skill add an educational panel?
Only for explanatory scenes. An ordinary diorama stays clean, with no Explore panel, lesson steps or floating labels.
How do I update an installed Diorama?
The README has an update prompt: the agent saves your local patch, pulls the newest `main` and reports what changed before touching any project.
What is a deterministic scene?
The scene is a pure function of `t`, so any frame can be frozen, screenshotted and compared. A screenshot is evidence rather than a lucky capture.
Discussion
No questions or reviews yet.
Related
SkillsTen reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
Eight skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, exploded machine views
Three.js Architecture Effects
threejs-architecture-effects
A skill building an orbitable Three.js building that assembles itself: brick, frame, procedural materials. The result is a working Vite and React site
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
A skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Diorama (this card) | no | 418 | |
| Three.js Skills | no | 4,168 | gives a reference for Three.js APIs and techniques; Diorama drives a finished scene build with look, model sourcing and QA |
| Pixel Art Studio | no | 113 | draws pixel graphics; Diorama assembles a 3D scene in pixel style with an orbiting camera |
README in short
The repository holds `SKILL.md` with the full guide, a `references/` folder of topic files, templates, QA scripts and worked examples. Installation runs through a prompt that makes the agent download the whole repository and read it before working.
README badge
Original SKILL.md
--- name: diorama description: "Full long-form guide for detailed rotatable Three.js dioramas. Narrative scenes are scene-first with no educational UI unless requested. Classic pixel, stroked-toon and pixel+stroke are rendering choices, not educational modes. Explanatory commissions use the separate educational contract. Includes composition, cast, animation, craft, sourcing and construction." version: 5.7.0 author: Nehal Kanak (sloemo) license: MIT platforms: [linux, macos, windows] --- # Diorama ## Current intake contract (5.7.0 — authoritative) For a new commission, ask **look first, model sourcing second**, using the two gates below. These gates override older three-preset lists, automatic internet-first instructions and one-prompt assumptions elsewhere in this long guide and its references. Do not ask setup questions when merely editing the skill. Explicit answers in the brief skip the corresponding question; existing-project repairs retain recorded choices. An unanswered question is pending, not consent. Rendering and sourcing are independent of narrative/educational purpose. Three looks are available: `pixel` (Classic Pixel Art; recommended), `stroked-toon`, `pixel-stroke`. Generic “pixel art”, “classic”, “old pixel style” and explicit delegation (“you choose”) resolve to `pixel`. All looks preserve free orbit. An unanswered style gate waits. Three sourcing modes are available: `internet-full`, `hybrid` (recommended), `authored-only`. Generic “use internet models” resolves to `hybrid` unless the user requests downloaded models throughout. Older `internet-first` records map to `hybrid` on repairs. Sourcing requirements below apply only to modes that acquire external assets; authored-only skips model acquisition, not subject research, quality or geometry/contact checks.