TH

threejs-procedural-geometry

Tools and patterns for generating production-ready procedural geometry in Three.js.

Install

mkdir -p .claude/skills/threejs-procedural-geometry && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16149" && unzip -o skill.zip -d .claude/skills/threejs-procedural-geometry && rm skill.zip

Installs to .claude/skills/threejs-procedural-geometry

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Build production procedural mesh systems in Three.js. Use for sculpted rail and frame profiles, oriented branch rings, semantic mesh writers, deliberate skins and caps, UV density, custom normals, material slots, instancing decisions, and close-inspection geometry budgets.
273 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Advanced

Key capabilities

  • Generate geometry from a semantic plan
  • Define dimensions and semantic segments
  • Build mechanism-appropriate local parameterization
  • Emit vertices with intentional seams
  • Generate UVs from real distance
  • Validate winding, normals, tangents, bounds

How it works

This skill generates Three.js geometry from a semantic plan by defining dimensions, building local parameterization, emitting vertices with intentional seams, and generating UVs from real distance.

Inputs & outputs

You give it
Semantic plan and explicit coordinate frame
You get back
Procedural mesh systems in Three.js with optimized geometry, UVs, and normals

When to use threejs-procedural-geometry

  • Generate sculpted frame profiles
  • Build procedural tree-ring structures
  • Create optimized PBR surface bundles
  • Construct data-driven mesh assemblies

About this skill

Procedural Geometry

Generate geometry from a semantic contract and explicit coordinate frame. Treat polygon operations as the design model and triangle emission as the final compilation step. Do not declare an object complete until its topology, assembly relationships, semantic measurements, and fixed views all pass.

Craft loop

  1. Define units, local/world frames, dimensions, bounds, primary profiles, topology intent, shell thickness, apertures, material slots, and triangle band.
  2. Declare every required contact, support, clearance, penetration, reveal, moving envelope, and interaction datum.
  3. Choose a modeling operation for each visible form: profile extrusion, inset, loft, revolve, sweep, direct-topology aperture, solidify, subdivision, bevel, or fillet.
  4. Keep quads and n-gons through design. Preserve one named mesh per semantic part; do not weld unrelated parts or merge material slots yet.
  5. Apply modifiers in a deliberate order, then clean inside each part, repair winding, assign a part-specific smooth angle, and emit triangles.
  6. Run the polygon topology gate, then audit the named world assembly for coplanar overlap, defects, and substantial solid clashes.
  7. Run builder-owned semantic checks, including support, openings, shell thickness samples, ergonomic clearances, and moving extrema.
  8. Merge by material slot, audit again, and inspect fixed silhouettes, hidden sides, joints, interaction views, wireframe, normals, and grazing light.

Modeling bar

  • Use primitives only for genuinely primitive or hidden structural parts.
  • Give every visible manufactured edge a scale-appropriate bevel or fillet.
  • Build openings into one closed shell; do not stack a dark plane over a solid.
  • Construct thick shells with paired profiles or solidify; never rely on a single surface where an exposed rim reveals thickness.
  • Drive mating parts from the same datum. A late visual nudge is a failed dimension contract.
  • Choose a continuous mesh for a continuous manufactured form. An arrangement of intersecting primitives is not a substitute for modeling.
  • Keep narrow, named allowances only for intersections that are structurally intentional.

Read references/geometry-craft-workflow.md for the polygon-first modeling grammar, modifier order, join floors, detail budgets, fixed visual-review contract, and geometry-craft failure diagnosis.

Read references/geometry-quality-gates.md for exact topology, coplanar, solid-clash, semantic, support, clearance, motion-envelope, and visual gates with metre-scale tolerances.

Portable JavaScript kit

Place the complete assets/geometry-quality-kit/ directory into a Three.js project when the project lacks an equivalent modeling and quality layer. Adjust import paths and scene plumbing as needed; preserve the geometry and audit contracts.

  • procedural-mesh.js provides MeshData, polygon cleanup, winding reconstruction, profiles, offsets, extrusion, loft, revolve, sweeps, solidify, subdivision, bevels, apertures, smooth-angle normals, material-slot builds, and Three.js emission.
  • mesh-topology-audit.js checks loose/duplicate vertices, degenerates, open/non-manifold edges, detached components, signed volume, and emitted positions/normals.
  • geometry-audit.js audits a built Object3D hierarchy for true clipped coplanar overlap, invalid mesh data, missing materials, and substantial triangle-crossing clashes.
  • geometry-contract.js runs object-specific measurements without imposing project-specific shape semantics.
  • assembly.js preserves named parts for auditing, then builds one draw mesh per material slot after gates pass.
  • selftest.js plants known defects and verifies the modeling, topology, contract, assembly, z-fight, and clash paths; run it after placing or adapting the kit.

Mechanism references and implementations

Read references/profile-sweeps-and-mesh-writers.md for the exact sculpted-frame profile, rail emission, tree rings, semantic mesh writer, and their observed scaling limits.

Read the sculpted gallery frame geometry for profile sweeps, miter-like rail mapping, deliberate cap ownership, PBR surface bundles, grazing highlights, selective bloom, and geometry diagnostics.

Read references/complete-submarine-assembly.md for the exact dimensioned object contract, shared loft/sweep kernel, UV-owned apertures, semantic subassemblies, generated fittings, and model diagnostics.

Read the porcelain-and-brass submarine model for a complete assembly with a tilted-collar hull loft, parallel-transport trim, furnished glass cabin, shrouded propeller, lens-section fins, and per-part triangle evidence.

Read references/vehicle-loft-and-projector-contract.md for parameter-curve section tracks, recess-opening sections, superellipse volumes, spanwise airfoil lofts, warped plates, projector ownership, load-deflected tyres, and measured limits.

Read the Formula One race car model for one continuous body loft, section-owned cockpit recess, real inlet aperture, spanwise wing lofts, livery projection, and contact-deflected tyres.

Read the sport motorcycle model for slot-tagged emission, revolve and upright-frame sweeps, offset panel shells, spoked wheels, a hanging chain path, and a volume-audited assembly.

Read references/procedural-optimus-humanoid-assembly.md for the exact coordinate, polygon/modifier, curve, loft, spine, pillow, CSG, bevel, semantic assembly, filtered material, emission, limitation, and diagnostic contracts of a complete human-scale robot.

Read the procedural Optimus humanoid entry and its complete geometry and material system for a 176-object torso/head/arm/hand/hip/leg/foot assembly with five-finger hands, 891,809 emitted triangles, fourteen PBR identities, exact polygon cuts, angle-limited bevels, split corner normals, and derivative-filtered object-space roughness and bump.

Read the procedural financial tower compiler for semantic placement compilation and material-slot instancing at building scale.

Failure conditions

  • same-facing coplanar triangles survive at a visible scale;
  • a loose vertex, degenerate face, open solid, non-manifold edge, detached component, invalid normal, or inward closed volume reaches emission;
  • substantial unrelated solids intersect, or a placed part lacks a declared support/contact relationship;
  • an exposed shell is paper-thin or an aperture is a visual overlay;
  • a visible primitive keeps razor edges or joins another primitive without a designed transition;
  • profile frames flip, caps share smooth side normals, or UV density changes with segment count;
  • material merging happens before named-part auditing;
  • triangle count is the only complexity evidence;
  • a script passes but fixed-view inspection still finds implausible modeling.
  • a complete humanoid is reduced to intersecting capsules and boxes;
  • mirrored hands or limbs keep inward winding;
  • high-frequency object-space material noise is emitted without footprint filtering.

Routing boundary

This skill owns reusable mesh construction and geometry quality. Use $threejs-procedural-materials when surface identity is primary, $threejs-procedural-architecture for a building grammar, and $threejs-procedural-vegetation for a growth hierarchy; those subject skills may then apply these geometry mechanisms.

When not to use it

  • When surface identity is primary (use $threejs-procedural-materials)
  • When building grammar for architecture (use $threejs-procedural-architecture)
  • When creating a growth hierarchy for vegetation (use $threejs-procedural-vegetation)

Limitations

  • Profile orientation may flip along a curve
  • Caps may reuse side vertices creating averaged edge normals
  • UV scale may change with segment count

How it compares

This skill provides a structured build order for procedural geometry, ensuring deliberate control over mesh properties and optimization, unlike manual 3D modeling.

Compared to similar skills

threejs-procedural-geometry side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
threejs-procedural-geometry (this skill)01moNo flagsAdvanced
scroll-experience1016moNo flagsIntermediate
threejs-postprocessing17moNo flagsIntermediate
3d-web-experience356moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

scroll-experience

davila7

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

101142

threejs-postprocessing

CloudAI-X

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

17

3d-web-experience

davila7

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

3570

threejs-shaders

CloudAI-X

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

430

anthropic-frontend-design

chaibuilder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

1237

snapdom

2025Emma

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.

14

Search skills

Search the agent skills registry