This chapter gives a working overview of Building the Simulation: Conducting at Full Complexity, focusing on the ideas a reader needs before moving to the next chapter. The chapter moves through Learning outcomes, Opening, Step 1: HTML scaffold, Step 2: CSS with the six DESIGN.md variables, and related ideas. Read it for the main argument, the vocabulary it introduces, and the practical judgment it asks you to develop. The three files are in place. The build begins.

CLAUDE.md was written. DESIGN.md had its six colors and its interaction vocabulary. PROJECT.md's Intent Layer named exactly what the sorting simulator was for and what it refused to do. All three were committed to git. The teacher had slept on the files and made two small edits in the morning. The simulation was about to be built.

Operation: Generate index.html with the page scaffold for the sorting simulator. Invariants: Use only the six DESIGN.md color variables (defined as CSS custom properties in :root). No styling beyond what is needed for the scaffold to render. Context: DESIGN.md interaction vocabulary (single-click, long-click, keyboard arrows, spacebar); accessibility requirements (keyboard-navigable; ARIA labels on all interactive elements; minimum 16px font). Output format: Single index.html file with semantic HTML5 ,

Operation: Generate simulation.css containing only the DESIGN.md six variables defined in :root, plus the minimal rules required to render the Step 1 scaffold with the design system's typography and spacing. Invariants: Exactly six color variables; no additional colors used directly anywhere (every color reference goes through a variable). Typography per DESIGN.md (monospace for numerics, system-ui for labels). Context: DESIGN.md is the source of truth; if the spec contradicts DESIGN.md, DESIGN.md wins; flag the contradiction. Output format: simulation.css linked from index.html; visual matches DESIGN.md's described palette and typography.

Operation: Generate simulation.js with the bubble-sort algorithm as a function that takes an array and returns the sequence of states (each state is {array, comparing: , swapped: boolean}). Invariants: Pure function (no global mutable state). No DOM manipulation in this file (DOM updates are Step 4's concern). Context: PROJECT.md Layer 1 , the simulation visualizes bubble sort step by step; the student controls advancement; the simulation must support stepping forward and backward (which requires the full state sequence).

Operation: Generate the click and keyboard handlers in simulation.js (separate section from the algorithm; clearly bounded). Wire the controls to the state-sequence consumer. Invariants: Single-click steps forward; long-click steps backward; keyboard arrows fine-control; spacebar play/pause. Per DESIGN.md, no drag-and-drop, no hover-only states. Context: The state sequence comes from bubbleSortStates; the consumer maintains a currentStateIndex and updates the DOM when it advances. Output format: Handlers attached on DOMContentLoaded; the simulation is interactive on page load. Negative constraint: No animation faster than 60ms per step.

Operation: Add the CSS media query for mobile breakpoint (max-width: 768px). The array container reflows to vertical orientation; controls stack below; comparison counter moves to a fixed footer. Invariants: DESIGN.md's typography and color rules unchanged at mobile breakpoint. Accessibility unchanged. Context: DESIGN.md says minimum 16px font; mobile should not violate this. Output format: simulation.css extended with the media query; mobile rendering verified on Chrome devtools (iPhone 12 preset). Negative constraint: No horizontal scroll at any breakpoint. No controls below the visible area at the breakpoint.

Apply the chapter's discipline to your own simulation (from Chapter 10's three files). Walk through five steps appropriate to your simulation's domain. Adapt the chapter's specifics. Expect at least one pivotal moment per step (handoff failure, scope creep, or screenshot iteration) on the first build.

Provide a small simulation target , a visualization of a single data structure operation (stack push/pop, queue enqueue/dequeue), a probability tree for a single coin-flip sequence, a sentence-tree for one short sentence. Small enough to fit in a 50-minute class. Each student writes the three files for their target (PROJECT.md Layer 1, DESIGN.md with six colors and an interaction vocabulary, a minimal CLAUDE.md). They execute the build using the per-step gate. They document every pivotal moment in the Generation Log.

"With three files, the build should run itself." No. The three files constrain; the per-step gate remains. Architecture is upstream; the gate is the runtime. "I'll skip explain on familiar commands." Step 3's setTimeout violation is a real example of the failure mode. Even familiar commands have surprises in the simulation domain.

Donald Schön (1930, 1997) , American philosopher and urban planner whose The Reflective Practitioner (1983) introduced the concept of reflection-in-action: the practitioner's capacity to think about what they are doing while they are doing it, adjusting in real time as the work surfaces conditions the upfront plan did not anticipate. Schön's argument was against the technical rationality model , the view that professional work is the mechanical application of pre-formed expertise to standard situations.

Donald Schön (1930, 1997) , American philosopher and urban planner whose The Reflective Practitioner (1983) introduced the concept of reflection-in-action: the practitioner's capacity to think about what they are doing while they are doing it, adjusting in real time as the work surfaces conditions the upfront plan did not anticipate. Schön's argument was against the technical rationality model , the view that professional work is the mechanical application of pre-formed expertise to standard situations.