encapsulated-mockup-builderlisted

# Encapsulated Mockup Builder A prototype earns its keep by being *looked at*. A folder of `index.html` + `styles.css` + `app.js` + an `images/hero.png` that needs a dev server, or a JSX snippet that needs a bundler, delays that moment and usually breaks on the way. One HTML file that opens from a double-click, works offline, and renders exactly the same on the reviewer's laptop as it did in yours is the most reliable way to get a design in front of someone — and it's trivially shareable, diffable, and versionable. So: everything in one file. Not as a constraint to work around, but as the unit of delivery. ## The structure Start every artifact from `assets/boilerplate.html` and keep its four zones in order: ``` <head> <meta charset> <meta viewport> <title> <style> 1. :root tokens — colours, type scale, spacing, radius, motion. The only place raw values live. (+ .theme-inverted or [data-theme] blocks that re-map the same tokens) 2. Reset, base, layout, components — everything references var(--token) </style> </head> <body> (inline SVG sprite, if icons repeat) 3. Semantic markup — <main>, <section>, <nav>, <button>, real headings; #app-root if JS renders <script> 4. One IIFE: state object, event delegation on the root, init on DOMContentLoaded </script> </body> ``` Why tokens first: a reviewer's most common request is "can we see it in the brand green / with more breathing room". If every colour and spacing value is a `:root` variable, th