Improve complex mechanical/illustrative diagram quality

Expands the agent's skill files to produce higher-quality mechanical
and illustrative diagrams (cars, airplanes, engines, etc.):

1. Expand illustrative diagram rules in svg-diagram-skill.txt:
   - Composition grid zones (illustration, annotation margin, sub-diagram)
   - Depth layering order for proper visual stacking
   - Shape construction from geometric primitives (not freehand paths)
   - Force/motion arrow conventions with color coding
   - Annotation hierarchy (primary/secondary/tertiary tiers)
   - Cross-section vs side-view guidance

2. Add diagram planning protocol (pre-generation thinking step):
   - Subject decomposition, educational priority, spatial layout
   - Composition sketch, shape fidelity check, control-to-visual mapping

3. Add progressive rendering pattern for interactive diagrams:
   - Centralized state-and-render JS architecture
   - Element ID convention (viz-{component}-{property})
   - Preset button pattern with slider sync

4. Create mechanical-illustration-skill.txt:
   - Shape construction method with worked car/airplane examples
   - Spatial accuracy rules with grid overlay technique
   - Sub-diagram quality standards (no placeholder rectangles)
   - Interactive control binding template with compute/render pattern

5. Add svg-shape-library.txt with reusable path fragments:
   - Vehicle profiles (sedan, airplane)
   - Mechanical parts (gear, piston, wheel)
   - Physics shapes (airfoil, force arrows)
   - Annotation elements (zoom callout, dimension lines)
   - Control surfaces (rudder, aileron, elevator)

All changes mirrored to both agent and MCP skill directories.

https://claude.ai/code/session_0116PYmVGknEBVfUU8xZT78B

Author: claude

apps/agent/skills/master-agent-playbook.txt

@@ -218,6 +218,106 @@ render();
 }
 ```
 
+### Architecture: Progressive Rendering for Complex Interactive Diagrams
+
+When building interactive diagrams with controls (sliders, buttons, presets), use this structured architecture instead of scattered inline handlers. This ensures controls and visuals stay connected.
+
+**HTML Section Structure** — organize your HTML in explicit, commented sections:
+
+```html
+<!-- SECTION 1: Main illustration SVG -->
+<svg id="viz-main" width="100%" viewBox="0 0 680 400" xmlns="http://www.w3.org/2000/svg">
+  <!-- Use viz- prefixed IDs for all dynamic elements -->
+  <rect id="viz-engine-fill" .../>
+  <text id="viz-speed-text" ...>0 rpm</text>
+  <line id="viz-force-arrow" .../>
+</svg>
+
+<!-- SECTION 2: Sub-diagram(s) -->
+<div style="display:flex;gap:16px;margin:12px 0">
+  <svg id="viz-sub-controls" viewBox="0 0 200 120">...</svg>
+  <div id="viz-stats">
+    <div>Engine speed: <strong id="viz-rpm">0</strong> rpm</div>
+    <div>Wheel force: <strong id="viz-force">0</strong></div>
+  </div>
+</div>
+
+<!-- SECTION 3: Interactive controls -->
+<div class="controls">
+  <label>Throttle
+    <input type="range" min="0" max="100" value="30"
+           oninput="updateState('throttle', +this.value)">
+  </label>
+  <label>Gear
+    <input type="range" min="1" max="6" value="2"
+           oninput="updateState('gear', +this.value)">
+  </label>
+  <button onclick="applyPreset('city')">City</button>
+  <button onclick="applyPreset('highway')">Highway</button>
+</div>
+
+<!-- SECTION 4: JavaScript state + bindings -->
+<script>
+// Centralized state — single source of truth
+const state = { throttle: 30, gear: 2, mode: 'city' };
+
+// Single update function — all controls call this
+function updateState(key, value) {
+  state[key] = value;
+  render();
+}
+
+// Presets — just state objects applied at once
+const presets = {
+  city:    { throttle: 30, gear: 2 },
+  highway: { throttle: 70, gear: 5 },
+  braking: { throttle: 0,  gear: 3 }
+};
+function applyPreset(name) {
+  Object.assign(state, presets[name]);
+  state.mode = name;
+  // Also update slider positions to match
+  document.querySelectorAll('input[type=range]').forEach(el => {
+    const key = el.closest('label')?.textContent.trim().toLowerCase();
+    if (key && state[key] !== undefined) el.value = state[key];
+  });
+  render();
+}
+
+// Render — reads state, updates ALL visual elements
+function render() {
+  const rpm = Math.round(state.throttle * 40 + state.gear * 200);
+  const force = Math.round(state.throttle * (7 - state.gear) * 0.5);
+
+  // Update SVG elements by ID
+  document.getElementById('viz-rpm').textContent = rpm.toLocaleString();
+  document.getElementById('viz-force').textContent = force;
+  document.getElementById('viz-speed-text').textContent = rpm + ' rpm';
+
+  // Visual feedback — change fills, transforms, etc.
+  const el = document.getElementById('viz-engine-fill');
+  if (el) el.setAttribute('opacity', 0.3 + state.throttle * 0.007);
+}
+
+// Initial render
+render();
+</script>
+```
+
+**Element ID Convention**: `viz-{component}-{property}`
+- `viz-engine-fill` — engine block fill color/opacity
+- `viz-speed-text` — speed readout text content
+- `viz-force-arrow` — force arrow being resized
+- `viz-rpm` — RPM stat display
+
+This convention makes it trivial to trace which control affects which visual element. Every `updateState` call triggers `render()`, which updates every dynamic element from the centralized state.
+
+**Key rules**:
+- Never use anonymous `oninput="document.getElementById(...)"` handlers. Always go through `updateState` → `render`.
+- Every slider/button must produce a visible change in the SVG — if a control doesn't update anything visual, remove it.
+- Preset buttons must also update slider positions to stay in sync.
+- The `render()` function should be idempotent — calling it twice with the same state produces the same output.
+
 ---
 
 ## Part 3: Skill — Data Visualization