The page system itself
This page is the sample: hero, mono-numbered TOC, sectioned layout, figure and lab conventions — all from the shell skill. Below, its two core vocabularies: the semantic token palette (same meaning in every figure on a page) and the standard readout chip.
Five-pixel left border in a semantic color, mono uppercase label, one focused insight. Used for "the core trade", "failure smell", "practical heuristic".
Slider-driven live simulation
The slider→recompute→redraw pattern: a second-order system simulated by forward Euler on every input event, with threshold-colored readouts. Drag damping from underdamped ringing to overdamped crawl.
Algorithm walkthrough with synchronized code
Precomputed immutable snapshots + a pure render function: binary search for 37, with the active window in blue, the probe in orange, eliminated cells faded, and the matching code line highlighted at every step.
Clickable decision flowchart with path walking
Tap any node for detail. Then press Walk scenario to watch a doom-loop diagnosis traced through the chart — the path-walking move that makes flowcharts presentable instead of static.
Scripted state-machine replay
A three-state machine driven by an event script: the current state glows, the firing transition flashes orange, and every event lands in the log — the same transport controls as the step player.
Hover-highlight, layer toggles, tooltips
Hover (or tab to) any block: its connected neighborhood stays lit while everything else dims, and a tooltip follows the pointer. The checkbox toggles a teaching overlay — the fault-injection layer — without reflowing the diagram.
Executive dashboard band
The 3-seconds-from-2-meters discipline: big numbers with meaning-colored deltas, a percent-true gauge (pure SVG, no JS), a sparkline for shape, and same-scale comparison bars. One accent per band, one takeaway sentence.
Takeaway: telemetry-scoped selection cuts recall scope 38% while holding detection coverage above target.
Embedded slide deck
Click the deck once, then drive it with ← → or space (buttons work too). The same engine turns a full monograph into a talk: sections become slides, labs present live, and a print stylesheet exports the deck to PDF.
Animated block diagram
The original skill of the family: hand-coded inline SVG — boxes on a manual grid, one shared arrowhead marker, two-line labels — with the dash-flow animation that makes the signal visibly travel the loop. Three lines of CSS, frozen automatically under reduced-motion.
Radial mind map with collapsible branches
One color per branch family, curved spokes, horizontal labels only — and each first-level branch collapses on click (the −/＋ glyph), keeping portfolio overviews navigable.
Fault tree with cut-set highlighting
FTA conventions in SVG: rects for the top and intermediate events, circles for basic events, the pointed arch for OR and the flat-shouldered dome for AND. The button lights up a minimal cut set — leaves, gate, and connecting path together.
Concept graph with typed edges
Not a tree, not a mind map: arbitrary relations, hand-placed for zero crossings. Solid edges = depends-on, dashed = informs. Hover or tab to any node to isolate its neighborhood.
Live weighted trade study
Raw scores stay visible, weights move on sliders, the ranking recomputes live, and a sensitivity line says whether any single weight could flip the winner — hand a stakeholder the slider instead of an argument.
| Option | Impact | Feasibility | Time-to-demo | Weighted |
|---|---|---|---|---|
| VHM-016 Recall scope opt. | 9 | 6 | 5 | — |
| VHM-007 Adaptive DAQ | 7 | 8 | 7 | — |
| VHM-023 Fleet triage agent | 6 | 9 | 8 | — |
Risk matrix with clickable register chips
Likelihood descending down the side, severity across the bottom, muted band fills with a band letter in every cell (color never carries meaning alone), and risk chips that open their register entry.
Roadmap with swimlanes, milestones, today-marker
Every x-position derives from one date→pixel function: quarter gridlines, phase bars, gold milestone diamonds, and the dashed red today line that keeps a roadmap honest.
Waterfall: baseline → savings → net
Zero-based scale, floating segments tied together by dashed connectors, colors by meaning (savings green), and the value printed at every segment — geometry for shape, numbers for the data.
Scrollytelling: the figure follows your reading
Scroll through the three steps below: the sticky figure shifts emphasis as each step enters view (IntersectionObserver, class toggles, reduced-motion fallback shows everything at once).
1 · Gather. The loop begins by assembling context — the task, the relevant files, the last results. Nothing intelligent has happened yet; this stage decides what the model is even able to know.
2 · Act. The model proposes one action — an edit, a command — and the tool layer executes it against the real environment. Ambition is cheap here; the next stage is where it gets priced.
3 · Verify. Tests, types, and lint judge the result without trusting the model, and their verdict flows back into the next iteration's context. This stage — not the model — bounds the loop's reliability.
Self-check quiz
Retrieval practice, not grading: the reader commits, the correct answer is always revealed, and the explanation — the real payload — cites where the concept was taught.
Zoom & pan an oversized diagram
ViewBox manipulation, so strokes and text stay crisp at any zoom: scroll-wheel zooms toward the cursor, drag pans (one finger on touch, pinch to zoom), and Reset always brings you home.
The 3D foundation
The one place the kit permits a library — with obligations: load on demand (never block the page on 600 KB of engine), pin the version via import map, vendor the module for offline pages, and fall back gracefully. Press the button to load three.js and bring §§20–25 alive; everything else on this page stays zero-dependency.
Data surface with hover readout
A displaced plane with per-vertex token colormap — the pattern behind efficiency maps and flux-linkage surfaces ψ(id, iq). Move the pointer over the surface to read values off it; drag the ripple slider to watch live regeneration (same buffers, no reallocation).
3D system diagram with flow particles
Extruded token-colored blocks on a ground grid, tube connections, and orange particles riding the feedback arc — the 3D dash-flow. (The skill adds crisp HTML labels via CSS2DRenderer; this demo keeps labels in the caption.)
Exploded view on a slider
No glTF asset needed to explain a machine: primitive mockups (shaft, rotor, stator, housing) with stored rest poses and per-part explode directions. Drag the slider; 0 reassembles exactly.
Rotating frames & live vectors
Clock-driven motion (frame-rate independent by construction): gray stator phase axes at 0°/120°/240°, the orange current space vector, and the blue/green d–q frame rotating with it — the Park transform as an animation.
Camera choreography
Named poses + one smoothstep tween that moves position and target together. Fly between views; grab the scene mid-flight and the tween yields to you. Bound to slides or scroll steps, this turns any scene into a guided tour.
Isometric SVG — depth with zero dependencies
The question to ask before reaching for WebGL: does it need to orbit? If not, two lines of projection math give you depth in pure SVG — offline, printable, weightless. Three shaded faces per box, one light direction, painter's draw order.