Skip to content
Image Generation
Skill

/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 mesh compilation, deterministic variants, and procedural city assets.

BOOST
From plugin
threejs-awesome-graphics-agent-skills
91124 skills
Install
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-procedural-architecture --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/threejs-procedural-architecture

Context preview

The summary Claude sees to decide when to auto-load this skill.

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 mesh compilation, deterministic variants, and procedural city assets.

SKILL.md

threejs-procedural-architecture.SKILL.md
name: threejs-procedural-architecture
description: 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 mesh compilation, deterministic variants, and procedural city assets.

Procedural Architecture

Separate design planning from mesh emission. A building generator should produce an inspectable plan before it produces triangles.

This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.

Required architecture

settings
  → mass grammar
  → exposed-surface graph
  → façade/roof placements
  → module registry
  → material-slot mesh writer
  → geometries

Read [references/grammar-and-mesh-compiler.md](references/grammar-and-mesh-compiler.md) before implementing the generator.

Read the [procedural financial tower compiler](examples/procedural-financial-tower/building-system.js) for seeded tier planning, semantic façade placement, reserved zones, material-slot BufferGeometry output, projected detail, and mechanism-specific diagnostics.

Rules

  • Massing, façade rhythm, and detail modules are separate layers.
  • Resolve exposed edges before façade placement. Do not decorate hidden internal faces.
  • Modules own semantic anchors and construction depth, not global building coordinates.
  • Compile by material slot to reduce draw calls without destroying material separation.
  • Preserve real dimensions for floor height, bay width, trim projection, and texture density.
  • Randomness may select among valid designs; it must not repair invalid geometry.
  • Provide topology, façade ownership, material/geometry, and shadow diagnostics

appropriate to the renderer path.

Acceptance

The generated building must survive:

  • silhouette-only view;
  • flat untextured material;
  • grazing light;
  • close inspection of corners and roof transitions;
  • seed variation without broken bays, overlapping ownership, or floating ornament;
  • triangle and module-count reporting.

Routing boundary

Use `$threejs-procedural-geometry` for a reusable profile, sweep, ring, or mesh writer without a building grammar. This skill owns massing, façade semantics, architectural modules, and building-plan compilation.

Read more
Ships withthreejs-awesome-graphics-agent-skills

Example gallery to visually inspect included examples This is a Three.js agent skills pack for producing awesome graphics.

Get the whole plugin