// Generate interactive 3D zoning envelope viewers from zoning analysis reports. Requires a zoning analysis report as input.
Show all available skills, agents, and how to use them — organized by task.
Demographics and market site analysis — population, income, age, housing market, and employment data from an address.
Climate and environmental site analysis — temperature, precipitation, wind, sun angles, flood zones, seismic risk, soil, and topography from an address.
Neighborhood context and history — adjacent uses, architectural character, landmarks, commercial activity, and planned development from an address.
Transit and mobility site analysis — subway, bus, bike, pedestrian infrastructure, walk scores, and airport access from an address.
Smart router — describe your task and get routed to the right agent or skill. Start here if you don't know which skill to use.
| name | zoning-envelope |
| description | Generate interactive 3D zoning envelope viewers from zoning analysis reports. Requires a zoning analysis report as input. |
| allowed-tools | ["Read","Write","Bash","Glob","Grep","AskUserQuestion"] |
| user-invocable | true |
Generate an interactive 3D axonometric zoning envelope viewer as a self-contained HTML file. Uses Three.js with OrbitControls — opens in any browser, no dependencies.
Requires a zoning analysis report generated by /zoning-analysis-nyc. This skill is a renderer — it does not perform zoning calculations.
/zoning-envelope path/to/zoning-analysis.md
/zoning-envelope 250 hudson
/zoning-envelope
.md path is providedRead the file directly.
Search for matching zoning analysis reports in the current working directory.
Use Glob + Grep to find reports matching the search term. If multiple matches, show the options and ask the user to pick one.
Search for the most recently modified zoning-analysis-*.md file in the current working directory. If found, confirm with the user. If not found, tell the user:
No zoning analysis report found. Run
/zoning-analysis-nycfirst, then come back with/zoning-envelope.
If the report exists but lacks the ## Envelope Data JSON block (older report format), tell the user:
This report was generated before the Envelope Data format was added. Re-run the zoning analysis to get an updated report, or I can attempt to parse the tables (results may be approximate).
Read the ## Envelope Data JSON block from the report — a fenced code block containing:
{
"lot_poly": [[x, y], ...],
"unit": "ft",
"setbacks": { "front": 6, "rear": 3, "lateral1": 3, "lateral2": 2 },
"volumes": [
{ "type": "base", "inset": 20, "h_bottom": 0, "h_top": 85, "label": "base" },
{ "type": "tower", "inset": 10, "h_bottom": 85, "h_top": 290, "label": "tower" }
],
"height_cap": 290,
"info": { "title": "...", "zone": "...", "id": "...", "area": "..." },
"stats": { "key": "value", ... },
"scenarios": null
}
From the parsed JSON, build the internal model:
LOT_POLY — the lot boundary polygon in local unitsUNIT — "ft"VOLUMES — array of volumes to extrude, each with inset distance, height range, labelHEIGHT_CAP — max height for the amber cap planeINFO — title, zone, id, area for the overlay panelsSTATS — key/value pairs for the parameters panelSCENARIOS — if present, multi-scenario toggle dataCompute inset polygons using the insetPolygon(poly, distance) function. For multi-volume envelopes (base + tower), compute the tower inset from the base inset (cumulative), not from the lot polygon — so the tower is always smaller than the base.
Compute volumes by extruding inset polygons between height intervals.
Build a self-contained HTML file following the design system below.
| Element | Color | Opacity |
|---|---|---|
| Background | #f5f3ef | 1.0 |
| Ground (lot) | #dcd7cd | 0.5 |
| Lot boundary | #2c2c2c | 1.0 |
| Setback zones | #c85a50 | 0.2 |
| Base volume faces | #6ba0c5 | 0.08–0.10 |
| Base volume edges | #6ba0c5 | 0.30–0.35 |
| Tower/upper volume | #6ba0c5 | 0.05 |
| Height cap / sky plane | #e8a849 | 0.10–0.15 |
| Labels | #333333 | 1.0 (canvas sprites) |
| Grid | #d0ccc4 | 0.15 |
Typography: Helvetica Neue, 11px for overlay panels, canvas sprites for 3D labels.
Layout:
All materials: transparent: true, depthWrite: false, side: DoubleSide.
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
} }
</script>
Include these in every generated HTML:
signedArea(poly) — Returns signed area. Positive = CCW winding.
insetPolygon(poly, d) — Shrinks polygon inward by distance d along edge-normal bisectors. Each vertex moves along the bisector of its two adjacent edge normals, with distance adjusted for the bisector angle. CRITICAL: The normal direction depends on polygon winding, which varies by data source (WGS84 vs EPSG:3857 produce opposite windings). The function MUST self-correct: after computing the inset, compare abs(signedArea(result)) against abs(signedArea(poly)). If the result is LARGER, negate the offset direction and recompute. This makes the function robust regardless of input winding.
triangulate(poly) — Ear-clipping triangulation for arbitrary simple polygons. Returns index array for BufferGeometry.setIndex().
extrudePolygon(poly, hBottom, hTop, color, opacity) — Returns a THREE.Group containing:
BufferGeometry with triangulated top/bottom faces + side quadsgroundPolygon(poly, color, opacity, yOffset) — Triangulated flat polygon at a given Y height.
centroid(poly) — Returns [cx, cz] for camera targeting and label placement.
createTextSprite(text, options) — Creates a THREE.Sprite with canvas-rendered text. Options: fontSize, color, bgColor.
renderer = WebGLRenderer({ antialias: true })
renderer.setClearColor(0xf5f3ef, 1)
camera = PerspectiveCamera(35, aspect, 1, maxDim * 10)
camera.position = centroid + [maxDim * 1.5, maxDim * 1.0, maxDim * 1.5]
controls = OrbitControls with damping
AmbientLight(0xffffff, 0.75)
DirectionalLight(0xffffff, 0.35) from upper-right
Scale camera distance to the lot's maximum dimension so it works for both small townhouse lots (~25 ft) and large assembled sites (170 ft+).
For each generated file:
signedAreagroundPolygon(lotPoly, ...) + outline + vertex markers (small spheres)createTextSprite at the edge midpoint, offset outwardextrudePolygon(...)groundPolygon(topPoly, amber, ...) at max heightTHREE.GridHelper scaled to lot size, subtle opacityIf SCENARIOS is populated (multi-lot analysis with apareadas, unified, etc.):
THREE.Group per scenario#scenario-bar div (top-left, below title)showScenario(key) function:
.active class (dark background)| File | Pattern |
|---|---|
./zoning-envelope-250-hudson-st.html | NYC exact polygon, contextual base+tower |
Use this as the code baseline.
Save the HTML next to the source report with zoning-envelope- prefix and the same slug:
zoning-analysis-250-hudson-st.md → zoning-envelope-250-hudson-st.htmlOpen the file in the browser after saving.
unit field in the Envelope Data block determines all labels and scaling.PerspectiveCamera(35) with OrbitControls.scenarios, generate toggle buttons. Use simplified rectangles if individual lot polygons are not available in the report.