threejs-architecture-effects: an agent skill that assembles a Three.js building

The output is a runnable site, not a generated code dump

threejs-architecture-effects is a portable Agent Skill, and the README states the deliverable plainly. It builds a real, orbitable Three.js building that assembles itself, with brick courses, timber frame, dougong, layered eaves, procedural PBR materials and close-up cameras. The Chinese summary of the project is more direct about the intent: it is an open source skill for Codex, Claude Code and Cursor, and the output is a runnable three-dimensional architecture website, not a texture reveal, and it needs no API key. That last point matters more than it sounds. Most agent-driven visual work goes through a hosted model service, which means a key, a bill and a network round trip per iteration. This skill produces geometry in the browser from code, so the loop is local. The list of what you get is specific. A solid 3D miniature rather than a video on a plane. Construction driven by one 0 to 1 timeline, so you can play, pause, scrub backward and replay. Procedural brick, wood, plaster, tile, stone and bronze with no paid models. Orbit, zoom and detail cameras for eaves and stone lions. And a Vite, React and Three.js starter you can run with npm ci and npm run dev.

Installing means copying a folder into a skills directory

The install step is deliberately filesystem based. You copy the folder into the agent skills directory and then start a new session. The README gives the paths for each runner, and the three runners are Codex at ~/.codex/skills/threejs-architecture-effects, or the equivalent under $CODEX_HOME/skills/, Claude Code at ~/.claude/skills/threejs-architecture-effects, and Cursor at ~/.cursor/skills/threejs-architecture-effects. The clone and copy are two ordinary shell commands:

git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
cp -R threejs-architecture-effects ~/.cursor/skills/

There is no package to publish and no registry entry, which suits a skill that is meant to be portable. The layout section of the README shows what ends up in that folder. SKILL.md is the agent entry point, LICENSE is the MIT licence with a 2026 Hailey copyright, agents/openai.yaml holds Codex UI metadata, scripts/scaffold.mjs copies the starter into a new project, references/ holds the construction principles, the template map and the verification notes, and assets/ holds the preview files and the starter project itself. The agents/ directory and the openai.yaml file are worth noting for a specific reason: a skill has to be discoverable by the runner, and it is more than prose for the model, and the metadata file is what makes the skill appear in the interface.

You can run the starter without any agent involved

This is the part of the project that makes it useful even if you never use an agent, and the README gives it its own section. The requirements are Node.js 22.13 or newer, npm, and a WebGL2 browser. The sequence is clone, scaffold, install and run:

git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building
cd my-building
npm ci
npm run dev

The scaffold script copies assets/starter/ into the new directory and refuses to overwrite an existing one, which is a sensible guard against the kind of accident that loses work. The README is explicit that the scaffold does not install packages or start a server, so you do not get a half-configured project and no surprises about what ran. The controls in the result are worth knowing before you start clicking. You drag to orbit and scroll to zoom, the timeline scrubs the construction, and there are two close-up cameras, one for the eaves and one for the stone lions. The starter is a clock tower, and the README is careful to say it is a working example rather than a historical reconstruction, and that it is not the only design the skill can make.

One timeline value drives both the geometry and the shading

The construction section of the README is the real specification, and it is four steps rather than a feature list. First, write an assembly plan in order: foundations, then frame, then masonry, then decks, then upper walls, then brackets, eaves and tiles, then ornament. Second, model the finished silhouette first so that parts share dimensions and nothing floats, which is the advice that separates a coherent model from a pile of parts. Third, give every solid piece a start, a duration and a travel, and note the consequence: colour and shadow shaders share one progress value, so seeking is deterministic. That single shared progress value is the mechanism behind the scrub-backward-and-replay claim. A construction animation is usually the most fragile part of a scene to control, because you have per-object animation state scattered across the code, and reversing the timeline means reversing all of it consistently. Driving the shading from the same scalar as the geometry means the lighting state cannot drift out of step with the pieces. The fourth instruction is a warning rather than a technique: author materials separately for colour, roughness and micro-height, and do not hide crude joints with fog or bloom.

Prompts are the interface, and they come in two flavours

How you talk to the skill is the user interface, and the README gives one example prompt and two more. The first is a full specification: use $threejs-architecture-effects to make a Chinese pavilion like the starter, with red walls, dark-green tiles, built storey by storey, orbitable, and with eave close-ups. The second is a refinement: keep the current tower shape and cameras, and only refine eave thickness, timber and the clock faces. The third is a variation: turn the template into a two-storey lakeside pavilion, keeping the timber and tile assembly, and with no clocks or lions. Those three prompts map onto three distinct modes of work, which is the useful part. The first generates, the second edits in place, and the third reuses the assembly approach for a different building. The reference to a starter in the first prompt also tells you the intended workflow, which is to point the skill at the bundled example and modify from there rather than describing a building from scratch. The README describes the skill as portable, and the details for agents are spread across SKILL.md, the construction principles document, the template map and the verification notes, so the model is expected to read those before it starts building.

The limits section says what the output will not do

The README has a Limits section, and it is unusually blunt for a demo repository, which makes it the most useful part of the docs. Geometry is procedural only, with no paid model service and no background music in the starter. Video export is not included, because the template is an interactive site. And the project is desktop oriented, with an explicit instruction not to claim museum quality, historical accuracy or universal 60 FPS from one machine. That last line is a warning about claims rather than about the code, and it is worth taking seriously in a field where generated visuals invite overstatement. A scene that looks convincing on the machine that built it may fall apart on a laptop with an integrated GPU, and the honest position is to say what was observed and where. The fourth limit is a licensing point that matters for anyone shipping the result. The npm packages keep their own licences, and this skill does not vendor node_modules, so the dependency tree is not covered by the skill's own MIT licence and has to be checked separately. The skill itself is MIT licensed, copyright 2026 Hailey, and the repository publishes no GitHub releases, with the last push on 2026-09-22.

Editorial conclusion

threejs-architecture-effects suits a developer who wants a working Three.js architecture scene to read, adapt or extend, and who prefers a scaffolded Vite and React project over a generated blob of code. It is the wrong choice if you need photoreal or scanned assets, since the geometry is entirely procedural, and it is the wrong choice if your deliverable is a video rather than an interactive page, because the project states that video export is not included. Verify first that your machine has Node.js 22.13 or newer and a WebGL2 browser, that the scaffold refuses to overwrite an existing directory as you expect, and that the skill's construction principles match how much control you want over the assembly timeline.

Frequently asked questions

Official sources

1. Issues
2. lhlGitHub/threejs-architecture-effects on GitHub
3. License: MIT
4. README