gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

insert slide 9 "A horse. A model." — bare-horse teaser for the harness reveal

Browse Source 
New slide plants the model-as-horse metaphor before the LLM mechanics arc
(slides 10–13: tokens, autoregression, IDs, statelessness). Stripped-down
version of the existing harness slide: horse body only, no harness elements,
no callouts. Two text lines:

  "A horse. A model."
  "The model is the horse. Raw power, no direction." (red)

The full harness reveal with all 5 callouts (Control loop, Tool allowlist,
Context management, Evaluator, State persistence) and etymology footnote
remains intact at its later position.

Mechanical changes:
- viewBox tightened to "110 25 340 345" (was wider to accommodate callouts)
- <defs> block dropped (no arrow markers needed without callouts)
- former slides 9–54 renumbered to 10–55 (the original harness slide moved
  from position 18 to 19)
- Total slide count: 54 → 55. data-level distribution preserved.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
2026-05-07 12:21:48 +05:00
parent 27df7ce8d0
commit 6b93c44806
1 changed files with 123 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/claude-code-best-practice/index.html
+123 -65
View File
@@ -419,9 +419,67 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 9: How LLMs Generate Text — Autoregressive Loop -->
<!-- SLIDE 9: A horse. A model. (teaser for slide 19 harness reveal) -->
<!-- ============================================================ -->
<div class="slide" data-slide="9">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- SVG Horse body only — harness and callouts stripped for teaser -->
<!-- viewBox tightened to horse body bounds (no expanded callout margins) -->
<svg viewBox="110 25 340 345" width="680" height="345" xmlns="http://www.w3.org/2000/svg" aria-label="Horse illustration — the model is the horse, raw power, no direction" style="display: block; max-width: 100%; height: auto;">
<!-- === HORSE BODY (warm brown silhouette) === -->
<!-- Torso -->
<ellipse cx="260" cy="210" rx="120" ry="68" fill="#8B6340"/>
<!-- Neck -->
<path d="M175 175 Q165 130 185 100 Q200 80 220 90 Q230 100 225 130 Q220 155 205 170 Z" fill="#8B6340"/>
<!-- Head -->
<ellipse cx="198" cy="78" rx="32" ry="22" fill="#8B6340" transform="rotate(-20 198 78)"/>
<!-- Muzzle/snout -->
<ellipse cx="173" cy="88" rx="18" ry="12" fill="#A07850" transform="rotate(-20 173 88)"/>
<!-- Ear -->
<path d="M210 60 L218 44 L225 61 Z" fill="#8B6340"/>
<!-- Eye -->
<circle cx="186" cy="72" r="4" fill="#2a1a0a"/>
<circle cx="185" cy="71" r="1.5" fill="#fff"/>
<!-- Nostril -->
<ellipse cx="165" cy="91" rx="4" ry="2.5" fill="#5a3a1a" transform="rotate(-20 165 91)"/>
<!-- Front legs -->
<rect x="195" y="270" width="22" height="68" rx="8" fill="#7A5530"/>
<rect x="228" y="270" width="22" height="68" rx="8" fill="#7A5530"/>
<!-- Hooves front -->
<rect x="193" y="330" width="26" height="14" rx="5" fill="#3a2a18"/>
<rect x="226" y="330" width="26" height="14" rx="5" fill="#3a2a18"/>
<!-- Rear legs -->
<rect x="295" y="268" width="22" height="70" rx="8" fill="#7A5530"/>
<rect x="325" y="268" width="22" height="70" rx="8" fill="#7A5530"/>
<!-- Hooves rear -->
<rect x="293" y="330" width="26" height="14" rx="5" fill="#3a2a18"/>
<rect x="323" y="330" width="26" height="14" rx="5" fill="#3a2a18"/>
<!-- Tail -->
<path d="M378 195 Q420 185 430 210 Q440 235 415 255 Q400 265 385 255" stroke="#5a3a1a" stroke-width="8" fill="none" stroke-linecap="round"/>
<path d="M385 255 Q370 270 375 288" stroke="#5a3a1a" stroke-width="6" fill="none" stroke-linecap="round"/>
<!-- Mane -->
<path d="M215 88 Q208 100 205 115 Q203 128 207 140" stroke="#5a3a1a" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M222 85 Q215 97 212 112 Q210 125 213 136" stroke="#5a3a1a" stroke-width="5" fill="none" stroke-linecap="round"/>
</svg>
<!-- Two-line caption — teaser framing only, no harness -->
<p style="font-size: 1.8rem; font-weight: 700; color: #1a1a1a; margin: 12px 0 6px; letter-spacing: -0.02em; line-height: 1.2;">A horse. A model.</p>
<p style="font-size: 1.2rem; font-weight: 400; color: #C0392B; margin: 0; letter-spacing: 0.01em;">The model is the horse. Raw power, no direction.</p>
</div>
</div>
<!-- ============================================================ -->
<!-- SLIDE 10: How LLMs Generate Text — Autoregressive Loop -->
<!-- ============================================================ -->
<div class="slide" data-slide="10">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- Title -->
@@ -444,9 +502,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 10: What's a Token? -->
<!-- SLIDE 11: What's a Token? -->
<!-- ============================================================ -->
<div class="slide" data-slide="10">
<div class="slide" data-slide="11">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- Title -->
@@ -469,9 +527,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 11: Tokens In, Tokens Out — Full Picture -->
<!-- SLIDE 12: Tokens In, Tokens Out — Full Picture -->
<!-- ============================================================ -->
<div class="slide" data-slide="11">
<div class="slide" data-slide="12">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- Title -->
@@ -494,9 +552,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 12: What the Model Actually Sees — Integer Token IDs -->
<!-- SLIDE 13: What the Model Actually Sees — Integer Token IDs -->
<!-- ============================================================ -->
<div class="slide" data-slide="12">
<div class="slide" data-slide="13">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- Title -->
@@ -519,9 +577,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 13: Models are stateless -->
<!-- SLIDE 14: Models are stateless -->
<!-- ============================================================ -->
<div class="slide" data-slide="13">
<div class="slide" data-slide="14">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- Title -->
@@ -578,9 +636,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 14: "Stochastic Parrots" -->
<!-- SLIDE 15: "Stochastic Parrots" -->
<!-- ============================================================ -->
<div class="slide" data-slide="14">
<div class="slide" data-slide="15">
<!-- Headline -->
<div style="text-align: center; margin-bottom: 36px;">
@@ -648,9 +706,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 15: Temperature = 0 ≠ Deterministic -->
<!-- SLIDE 16: Temperature = 0 ≠ Deterministic -->
<!-- ============================================================ -->
<div class="slide" data-slide="15">
<div class="slide" data-slide="16">
<!-- Headline -->
<div style="text-align: center; margin-bottom: 32px;">
@@ -719,9 +777,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 16: Model Limitations &mdash; Real-time access -->
<!-- SLIDE 17: Model Limitations &mdash; Real-time access -->
<!-- ============================================================ -->
<div class="slide" data-slide="16">
<div class="slide" data-slide="17">
<h1>&#x1F9E0; Models &mdash; e.g. Opus, GPT, Gemini</h1>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0;">
<div class="col-card" style="border-left: 4px solid #4caf50;">
@@ -758,9 +816,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 17: Limitations -->
<!-- SLIDE 18: Limitations -->
<!-- ============================================================ -->
<div class="slide" data-slide="17">
<div class="slide" data-slide="18">
<h1>&#x1F9E0; Limitations</h1>
<p>The raw model has <strong>no real-time access</strong> &mdash; no internet, no files, no clock.</p>
<div style="text-align: center; margin: 24px 0;">
@@ -769,9 +827,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 18: Horse Harness — The Pivot Analogy -->
<!-- SLIDE 19: Horse Harness — The Pivot Analogy -->
<!-- ============================================================ -->
<div class="slide" data-slide="18">
<div class="slide" data-slide="19">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
<!-- SVG Horse with Harness — annotated callout version -->
@@ -934,9 +992,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 19: Tool Calling &mdash; how the harness reaches the world -->
<!-- SLIDE 20: Tool Calling &mdash; how the harness reaches the world -->
<!-- ============================================================ -->
<div class="slide" data-slide="19">
<div class="slide" data-slide="20">
<h1>&#x26A1; Tool Calling &mdash; how the harness reaches the world</h1>
<div style="text-align: center; margin: 24px 0;">
<img src="../assets/harness/tool-calling.png"
@@ -957,9 +1015,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 20: Harness (1 of 2) &mdash; mind, methods, memory -->
<!-- SLIDE 21: Harness (1 of 2) &mdash; mind, methods, memory -->
<!-- ============================================================ -->
<div class="slide" data-slide="20">
<div class="slide" data-slide="21">
<h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #009688; text-align: center;">
@@ -1002,9 +1060,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 21: Harness (2 of 2) &mdash; senses, rules, reflexes -->
<!-- SLIDE 22: Harness (2 of 2) &mdash; senses, rules, reflexes -->
<!-- ============================================================ -->
<div class="slide" data-slide="21">
<div class="slide" data-slide="22">
<h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #4caf50; text-align: center;">
@@ -1039,9 +1097,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 22: Problem solved with harness &mdash; success case -->
<!-- SLIDE 23: Problem solved with harness &mdash; success case -->
<!-- ============================================================ -->
<div class="slide" data-slide="22">
<div class="slide" data-slide="23">
<h1>&#x1F389; Yayyyyy! Problem solved with harness</h1>
<p>The harness reaches out via <strong>WebSearch</strong> and fetches a real answer from live sources.</p>
<div style="text-align: center; margin: 24px 0;">
@@ -1050,9 +1108,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 23: Suspense / transition &mdash; But...? -->
<!-- SLIDE 24: Suspense / transition &mdash; But...? -->
<!-- ============================================================ -->
<div class="slide" data-slide="23">
<div class="slide" data-slide="24">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75vh; text-align: center;">
<div style="font-size: 12rem; color: #3f51b5; line-height: 1; font-weight: 700;">?</div>
<p style="font-size: 1.6rem; color: #555; margin: 24px 0 0; max-width: 900px; font-weight: 600;">Really?</p>
@@ -1060,9 +1118,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 24: Non-determinism 1 &mdash; Refuses to use tools -->
<!-- SLIDE 25: Non-determinism 1 &mdash; Refuses to use tools -->
<!-- ============================================================ -->
<div class="slide" data-slide="24">
<div class="slide" data-slide="25">
<h1>&#x1F4AA; Non-determinism &mdash; Doesn&rsquo;t always use its tools</h1>
<p>Similar prompt &mdash; but this time <strong>the model decided not to use the tool</strong>.</p>
<div style="text-align: center; margin: 24px 0;">
@@ -1071,9 +1129,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 25: Non-determinism 2 &mdash; Tools can fail -->
<!-- SLIDE 26: Non-determinism 2 &mdash; Tools can fail -->
<!-- ============================================================ -->
<div class="slide" data-slide="25">
<div class="slide" data-slide="26">
<h1>&#x1F4AA; Non-determinism &mdash; Tools can fail</h1>
<p>The model first tried <strong>one source</strong> &mdash; it <strong>failed (403)</strong> &mdash; so it fell back to <strong>another</strong>.</p>
<div style="text-align: center; margin: 24px 0;">
@@ -1082,9 +1140,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 26: The Two Problems &mdash; what we're solving -->
<!-- SLIDE 27: The Two Problems &mdash; what we're solving -->
<!-- ============================================================ -->
<div class="slide" data-slide="26">
<div class="slide" data-slide="27">
<h1>&#x1F6A8; Problem Statement</h1>
<ol style="padding-left: 32px; margin: 40px 0 0 0; line-height: 2;">
<li style="font-size: 1.25rem; color: #444; margin-bottom: 24px;">
@@ -1099,9 +1157,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 27: Vibe Coding &mdash; Karpathy&rsquo;s original tweet -->
<!-- SLIDE 28: Vibe Coding &mdash; Karpathy&rsquo;s original tweet -->
<!-- ============================================================ -->
<div class="slide" data-slide="27">
<div class="slide" data-slide="28">
<h1>Vibe Coding</h1>
<div style="text-align: center; margin: 16px 0;">
<img src="../assets/concepts/vibe-coding.jpg" alt="Andrej Karpathy's Feb 3 2025 tweet coining 'vibe coding' — 'fully give in to the vibes, embrace exponentials, and forget that the code even exists'" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -1111,9 +1169,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 28: Vibe Coding vs Agentic Engineering -->
<!-- SLIDE 29: Vibe Coding vs Agentic Engineering -->
<!-- ============================================================ -->
<div class="slide" data-slide="28">
<div class="slide" data-slide="29">
<h1>Vibe Coding vs Agentic Engineering</h1>
<div class="two-col">
<div>
@@ -1182,7 +1240,7 @@ todoapp/
<!-- ============================================================ -->
<!-- Slide 8: Agents Section Divider -->
<div class="slide section-slide" data-slide="29" data-level="agents">
<div class="slide section-slide" data-slide="30" data-level="agents">
<div class="slide-viewport-content">
<h1>👤 Agents</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
@@ -1240,7 +1298,7 @@ todoapp/
</div>
<!-- Slide 9: The Restaurant Kitchen -->
<div class="slide" data-slide="30">
<div class="slide" data-slide="31">
<div style="min-height: calc(100vh - 120px);">
<h1>Create your first agent &mdash; <code>/agents</code></h1>
<div style="max-width: 600px;">
@@ -1294,7 +1352,7 @@ todoapp/
</div>
<!-- Slide 10: Prompting vs Agent table -->
<div class="slide" data-slide="31">
<div class="slide" data-slide="32">
<div style="min-height: calc(100vh - 120px);">
<h1>Demo</h1>
<video
@@ -1345,7 +1403,7 @@ todoapp/
</div>
<!-- Slide: Agent Created (image only) -->
<div class="slide" data-slide="32" data-level="agents">
<div class="slide" data-slide="33" data-level="agents">
<h1>&#x1F389; Yayyyyy! Problem solved with agents</h1>
<div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
<img src="../assets/concepts/agents/agent-created.png" alt="Agent created" style="max-width: 1200px; max-height: 80vh; width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);" />
@@ -1390,7 +1448,7 @@ todoapp/
</div>
<!-- Slide 27: Skeptical counter-beat (mirrors slide 17) -->
<div class="slide" data-slide="33" data-level="agents">
<div class="slide" data-slide="34" data-level="agents">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center;">
<div style="font-size: 12rem; color: #3f51b5; line-height: 1; font-weight: 700;">?</div>
<p style="font-size: 1.6rem; color: #555; margin: 24px 0 0; max-width: 900px; font-weight: 600;">Not so fast...</p>
@@ -1435,7 +1493,7 @@ todoapp/
</div>
<!-- Slide 28: Callback to problem statement — agents solve half -->
<div class="slide" data-slide="34" data-level="agents">
<div class="slide" data-slide="35" data-level="agents">
<h1>&#x1F6A8; Problem Statement</h1>
<div style="min-height: calc(100vh - 120px);">
<ol style="padding-left: 32px; margin: 40px 0 0 0; line-height: 2;">
@@ -1489,7 +1547,7 @@ todoapp/
</div>
<!-- Slide 13: Agent Config Fields -->
<div class="slide" data-slide="35" data-level="agents">
<div class="slide" data-slide="36" data-level="agents">
<h1>Agent config fields with frontmatter</h1>
<div style="margin: 24px 0;">
<div class="field-row" style="padding-bottom: 6px; border-bottom: 2px solid #ddd;">
@@ -1579,7 +1637,7 @@ todoapp/
</div>
<!-- Slide 30: Agent tips and tricks — part 1 -->
<div class="slide" data-slide="36" data-level="agents">
<div class="slide" data-slide="37" data-level="agents">
<h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
<div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
<img src="../assets/concepts/agents/agent-tips-1.png" alt="Claude Code tips and tricks — part 1" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1624,7 +1682,7 @@ todoapp/
</div>
<!-- Slide 31: Agent tips and tricks — part 2 -->
<div class="slide" data-slide="37" data-level="agents">
<div class="slide" data-slide="38" data-level="agents">
<h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
<div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
<img src="../assets/concepts/agents/agent-tips-2.png" alt="Claude Code tips and tricks — part 2" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1673,7 +1731,7 @@ todoapp/
<!-- ============================================================ -->
<!-- Slide 32: CLAUDE.md concept intro -->
<div class="slide section-slide" data-slide="38">
<div class="slide section-slide" data-slide="39">
<div class="slide-viewport-content">
<h1>&#x1F4DD; CLAUDE.md</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
@@ -1729,7 +1787,7 @@ todoapp/
</div>
<!-- Slide 33: Create your first CLAUDE.md — /init -->
<div class="slide" data-slide="39" data-level="claude-md">
<div class="slide" data-slide="40" data-level="claude-md">
<div style="min-height: calc(100vh - 120px);">
<h1>Create your first CLAUDE.md &mdash; <code>/init</code></h1>
<div style="max-width: 600px;">
@@ -1783,7 +1841,7 @@ todoapp/
</div>
<!-- Slide 34: CLAUDE.md — the real thing (screenshot) -->
<div class="slide" data-slide="40" data-level="claude-md">
<div class="slide" data-slide="41" data-level="claude-md">
<div style="min-height: calc(100vh - 120px);">
<h1>&#x1F4DD; CLAUDE.md &mdash; the real thing</h1>
<div style="display: flex; align-items: center; justify-content: center;">
@@ -1830,7 +1888,7 @@ todoapp/
</div>
<!-- Slide 35: claude-code-best-practice Tips & Tricks (CLAUDE.md) -->
<div class="slide" data-slide="41" data-level="claude-md">
<div class="slide" data-slide="42" data-level="claude-md">
<h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
<div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
<img src="../assets/concepts/claudemd/claudemd-tips.png" alt="Claude Code tips and tricks for CLAUDE.md" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1875,7 +1933,7 @@ todoapp/
</div>
<!-- Slide 36: CLAUDE.md problem — keep it under 200 lines -->
<div class="slide" data-slide="42" data-level="claude-md">
<div class="slide" data-slide="43" data-level="claude-md">
<div style="min-height: calc(100vh - 120px);">
<h1>&#x26A0;&#xFE0F; CLAUDE.md problem &mdash; keep it under 200 lines</h1>
<div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
@@ -1926,7 +1984,7 @@ todoapp/
<!-- ============================================================ -->
<!-- Slide: Skills -->
<div class="slide section-slide" data-slide="43">
<div class="slide section-slide" data-slide="44">
<div class="slide-viewport-content">
<h1>&#x1F3AF; Skills</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
@@ -1987,7 +2045,7 @@ todoapp/
<!-- NEW SLIDE 38: Create your first skill -->
<!-- ============================================================ -->
<div class="slide" data-slide="44" data-level="skills">
<div class="slide" data-slide="45" data-level="skills">
<div style="min-height: calc(100vh - 120px);">
<h1>Create your first skill</h1>
<div class="two-col" style="margin-top: 28px;">
@@ -2050,7 +2108,7 @@ todoapp/
<!-- Slide 39: Skills — a real one (screenshot) -->
<!-- ============================================================ -->
<div class="slide" data-slide="45" data-level="skills">
<div class="slide" data-slide="46" data-level="skills">
<div style="min-height: calc(100vh - 200px);">
<h1>&#x1F3AF; Skills &mdash; a real one</h1>
<div style="display: flex; align-items: center; justify-content: center;">
@@ -2100,7 +2158,7 @@ todoapp/
<!-- Slide 40: Skill config fields with frontmatter (was 39) -->
<!-- ============================================================ -->
<div class="slide" data-slide="46" data-level="skills">
<div class="slide" data-slide="47" data-level="skills">
<h1>Skill config fields with frontmatter</h1>
<p style="font-style: italic; color: #666; margin: 8px 0 20px 0;">Most fields control how and when the skill loads &mdash; enforced by the harness. Only <code>description</code> lives in prompt-land.</p>
<div style="margin: 0 0 24px 0;">
@@ -2195,7 +2253,7 @@ todoapp/
<!-- ============================================================ -->
<!-- Slide: Context -->
<div class="slide section-slide" data-slide="47">
<div class="slide section-slide" data-slide="48">
<div class="slide-viewport-content">
<h1>&#x1F4AD; Context</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
@@ -2254,7 +2312,7 @@ todoapp/
</div>
<!-- Slide 42: Context — Claude's Brain -->
<div class="slide" data-slide="48" data-level="context">
<div class="slide" data-slide="49" data-level="context">
<div style="min-height: calc(100vh - 120px);">
<h1>&#x1F9E0; Claude's Brain</h1>
<div class="analogy-box">
@@ -2330,7 +2388,7 @@ todoapp/
</div>
<!-- Slide 43: Context — What Loads at Session Start -->
<div class="slide" data-slide="49" data-level="context">
<div class="slide" data-slide="50" data-level="context">
<div style="min-height: calc(100vh - 120px);">
<h1>What Loads at Session Start</h1>
<p>The moment you open Claude Code, certain things land in Claude's brain <strong>before you've typed a word</strong>. The rest waits in the wings &mdash; only loaded when you actually need it. This is called <strong>progressive disclosure</strong>.</p>
@@ -2403,7 +2461,7 @@ todoapp/
</div>
<!-- Slide 44: Context — Lost in the Middle (Liu et al., Stanford 2023) -->
<div class="slide" data-slide="50" data-level="context">
<div class="slide" data-slide="51" data-level="context">
<div style="min-height: calc(100vh - 120px);">
<h1 style="text-align: center;">&#x1F4C4; Lost in the Middle</h1>
<p style="text-align: center; color: #666; font-style: italic; font-size: 1.1rem; margin-top: -20px; margin-bottom: 30px;">by Nelson F. Liu &middot; Stanford University &middot; 2023</p>
@@ -2478,7 +2536,7 @@ todoapp/
</div>
<!-- Slide 45: Workflow concept-intro -->
<div class="slide section-slide" data-slide="51" data-level="workflow">
<div class="slide section-slide" data-slide="52" data-level="workflow">
<div class="slide-viewport-content">
<h1>&#x1F4D8; Workflow</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
@@ -2531,7 +2589,7 @@ todoapp/
</div>
<!-- Slide 46: Orchestration Workflow diagram -->
<div class="slide" data-slide="52" data-level="workflow">
<div class="slide" data-slide="53" data-level="workflow">
<div style="min-height: calc(100vh - 120px);">
<h1>&#x1F4CB; Orchestration Workflow</h1>
<img src="../../orchestration-workflow/orchestration-workflow.svg" alt="Command → Agent → Skill architecture flow"
@@ -2577,7 +2635,7 @@ todoapp/
</div>
<!-- Slide 47: Workflow in action (GIF) -->
<div class="slide" data-slide="53" data-level="workflow">
<div class="slide" data-slide="54" data-level="workflow">
<div style="min-height: calc(100vh - 120px);">
<h1>&#x1F4F9; Workflow in action</h1>
<div style="text-align: center; margin: 24px 0;">
@@ -2626,7 +2684,7 @@ todoapp/
<!-- Slide 50: Thank you -->
<div class="slide section-slide" data-slide="54">
<div class="slide section-slide" data-slide="55">
<div class="slide-viewport-content">
<h1>&#x1F64F; Thank you!</h1>
<div style="margin: 20px auto 28px auto; text-align: center;">