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

presentation/learning-journey: insert slide 2 AI jargon word-cloud

Browse Source 
New slide 2 "Jargon you'll hear" — 15 scattered pill-chips (vibe coding,
agentic engineering, context engineering, context rot, dumb zone,
hallucination prompt engineering, progressive disclosure, orchestration,
token burn, context bloat, one shot AI slop, harness, MCP, hooks,
compaction) with varied sizes, rotations, and 4 colors (blue/purple/
green/amber). Existing slides 2-38 renumbered to 3-39; all goToSlide
targets and section banner comments updated accordingly. Total: 39 slides.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
2026-04-19 11:27:50 +05:00
parent c86880a227
commit 55c3ca1095
1 changed files with 106 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/learning-journey/index.html
+106 -60
View File
@@ -151,9 +151,55 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 2: Boris Three-Tweets GIF -->
<!-- SLIDE 2: AI Jargon Word Cloud -->
<!-- ============================================================ -->
<div class="slide" data-slide="2">
<h1 style="font-size: 1.6rem; margin-bottom: 8px; color: #888; border-bottom: none; padding-bottom: 0; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;">Jargon you'll hear</h1>
<p style="font-size: 1rem; color: #aaa; margin-bottom: 0; font-style: italic;">I'll unpack each of these as we go &mdash; for now, just let them wash over you.</p>
<div style="position: relative; width: 100%; height: calc(100vh - 200px); min-height: 480px; overflow: hidden;">
<!-- Row 1 (top cluster) -->
<span style="position: absolute; top: 4%; left: 12%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.25rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">vibe coding</span>
<span style="position: absolute; top: 2%; left: 45%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">agentic engineering</span>
<span style="position: absolute; top: 6%; left: 72%; transform: rotate(-6deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination prompt engineering</span>
<!-- Row 2 -->
<span style="position: absolute; top: 18%; left: 3%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context engineering</span>
<span style="position: absolute; top: 20%; left: 35%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context bloat</span>
<span style="position: absolute; top: 17%; left: 60%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
<!-- Row 3 (middle) -->
<span style="position: absolute; top: 35%; left: 8%; transform: rotate(-5deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.15rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context rot</span>
<span style="position: absolute; top: 37%; left: 30%; transform: rotate(6deg); background: #7b1fa2; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 1.4rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">orchestration</span>
<span style="position: absolute; top: 33%; left: 60%; transform: rotate(-4deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">one shot AI slop</span>
<!-- Row 4 -->
<span style="position: absolute; top: 52%; left: 2%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">MCP</span>
<span style="position: absolute; top: 50%; left: 18%; transform: rotate(-6deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.2rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">dumb zone</span>
<span style="position: absolute; top: 54%; left: 42%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">harness</span>
<span style="position: absolute; top: 51%; left: 62%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.25rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">token burn</span>
<!-- Row 5 (bottom cluster) -->
<span style="position: absolute; top: 68%; left: 10%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hooks</span>
<span style="position: absolute; top: 70%; left: 35%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">compaction</span>
</div>
</div>
<!-- ============================================================ -->
<!-- SLIDE 3: Boris Three-Tweets GIF -->
<!-- ============================================================ -->
<div class="slide" data-slide="3">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; text-align: center;">
<figure style="max-width: 900px; width: 100%;">
<img src="../../!/root/boris-slider.gif" alt="Boris Cherny slides showing the spectrum of Claude Code usage styles" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -166,9 +212,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 3: What is Claude Code? -->
<!-- SLIDE 4: What is Claude Code? -->
<!-- ============================================================ -->
<div class="slide" data-slide="3">
<div class="slide" data-slide="4">
<h1>What is Claude Code?</h1>
<p>Claude Code isn't just Claude. It's Claude (the model) wrapped in a <strong>harness</strong> with a set of <strong>tools</strong> &mdash; and that wrapper is what turns a chatbot into an agent.</p>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 32px 0;">
@@ -196,9 +242,9 @@
</div>
<!-- ============================================================ -->
<!-- SLIDE 4: Vibe Coding vs Agentic Engineering -->
<!-- SLIDE 5: Vibe Coding vs Agentic Engineering -->
<!-- ============================================================ -->
<div class="slide" data-slide="4">
<div class="slide" data-slide="5">
<h1>Vibe Coding vs Agentic Engineering</h1>
<div class="two-col">
<div>
@@ -265,9 +311,9 @@ todoapp/
</div>
<!-- ============================================================ -->
<!-- SLIDE 5: What is Vibe Coding? -->
<!-- SLIDE 6: What is Vibe Coding? -->
<!-- ============================================================ -->
<div class="slide" data-slide="5">
<div class="slide" data-slide="6">
<h1>What is Vibe Coding?</h1>
<div class="two-col" style="margin-top: 28px;">
<div class="col-card bad">
@@ -294,9 +340,9 @@ todoapp/
</div>
<!-- ============================================================ -->
<!-- SLIDE 6: Good vs Bad Prompts -->
<!-- SLIDE 7: Good vs Bad Prompts -->
<!-- ============================================================ -->
<div class="slide" data-slide="6">
<div class="slide" data-slide="7">
<h1>Good vs Bad Prompts</h1>
<p>Even before you set up any structure, <strong>how you prompt</strong> matters. Specific beats vague. Context beats assumption.</p>
<div class="two-col" style="margin-top: 28px;">
@@ -330,41 +376,41 @@ todoapp/
</div>
<!-- ============================================================ -->
<!-- SLIDE 7: Meet the Person — TOC -->
<!-- SLIDE 8: Meet the Person — TOC -->
<!-- ============================================================ -->
<div class="slide" data-slide="7">
<div class="slide" data-slide="8">
<h1>Meet the Person</h1>
<p>We're going to learn five concepts using <strong>one running example</strong>: a weather reporter agent that fetches Dubai's temperature and renders a weather card. Same person &mdash; five different angles.</p>
<div class="toc-vertical">
<div class="toc-item" onclick="goToSlide(8)">
<div class="toc-item" onclick="goToSlide(9)">
<span class="toc-number">1</span>
<div style="flex: 1;">
<div class="toc-name">&#x1F464; Agents &mdash; The Person</div>
<div class="toc-sub">A specialist with a job title: the weather reporter</div>
<div class="toc-name">&#x1F464; Agents &mdash; The Person (job title: weather reporter)</div>
<div class="toc-sub">A specialist hired for a specific role &mdash; same Claude, different hat</div>
</div>
</div>
<div class="toc-item" onclick="goToSlide(14)">
<div class="toc-item" onclick="goToSlide(15)">
<span class="toc-number">2</span>
<div style="flex: 1;">
<div class="toc-name">&#x1F393; Skills &mdash; What the Person Knows</div>
<div class="toc-sub">fetch temperature &bull; render SVG card &bull; write the script</div>
<div class="toc-name">&#x1F393; Skills &mdash; What the Person Can Do</div>
<div class="toc-sub">do reporting on weather &bull; play a game &bull; read a book</div>
</div>
</div>
<div class="toc-item" onclick="goToSlide(20)">
<div class="toc-item" onclick="goToSlide(21)">
<span class="toc-number">3</span>
<div style="flex: 1;">
<div class="toc-name">&#x1F9E0; Context &mdash; The Person's Brain</div>
<div class="toc-sub">finite working memory &mdash; ~1M tokens, resets each session</div>
<div class="toc-name">&#x1F9E0; Context &mdash; The Person's Brain (storage &mdash; the 1M-token space)</div>
<div class="toc-sub">where knowledge gets loaded in &mdash; resets each session</div>
</div>
</div>
<div class="toc-item" onclick="goToSlide(25)">
<div class="toc-item" onclick="goToSlide(26)">
<span class="toc-number">4</span>
<div style="flex: 1;">
<div class="toc-name">&#x1F4CB; CLAUDE.md &mdash; The Pocket Rulebook</div>
<div class="toc-sub">standing instructions read at the start of every shift</div>
</div>
</div>
<div class="toc-item" onclick="goToSlide(31)">
<div class="toc-item" onclick="goToSlide(32)">
<span class="toc-number">5</span>
<div style="flex: 1;">
<div class="toc-name">&#x1F3BC; Workflow &mdash; The Trigger</div>
@@ -375,18 +421,18 @@ todoapp/
</div>
<!-- ============================================================ -->
<!-- TOPIC 1: AGENTS (Slides 8-13) -->
<!-- TOPIC 1: AGENTS (Slides 9-14) -->
<!-- ============================================================ -->
<!-- Slide 8: Agents Section Divider -->
<div class="slide section-slide" data-slide="8" data-level="agents">
<div class="slide section-slide" data-slide="9" data-level="agents">
<div class="section-number">Topic 1</div>
<h1>&#x1F464; Agents &mdash; The Weather Reporter</h1>
<p class="section-desc">An agent is Claude playing a specific role. Meet the <strong>weather reporter</strong> &mdash; a specialist hired to fetch and report weather data for Dubai. Same Claude, different hat.</p>
</div>
<!-- Slide 9: The Restaurant Kitchen -->
<div class="slide" data-slide="9">
<div class="slide" data-slide="10">
<h1>The Restaurant Kitchen</h1>
<div class="analogy-box">
<h4>Think of it like this</h4>
@@ -409,7 +455,7 @@ todoapp/
</div>
<!-- Slide 10: Prompting vs Agent table -->
<div class="slide" data-slide="10">
<div class="slide" data-slide="11">
<h1>Prompting vs. Agent &mdash; Side by Side</h1>
<p>The difference in one picture: <strong>prompting is asking a stranger on the street; using an agent is asking your dedicated specialist.</strong></p>
<table>
@@ -450,7 +496,7 @@ todoapp/
</div>
<!-- Slide 11: Agents Get Their Own Brain -->
<div class="slide" data-slide="11">
<div class="slide" data-slide="12">
<h1>Agents Get Their Own Brain</h1>
<div class="info-box">
<h4>Tip from Thariq (Anthropic) &mdash; Apr 16, 2026</h4>
@@ -483,7 +529,7 @@ todoapp/
</div>
<!-- Slide 12: How to Create an Agent -->
<div class="slide" data-slide="12">
<div class="slide" data-slide="13">
<h1>How to Create Your Own Agent</h1>
<p>You don't write an agent from scratch &mdash; Claude helps you build one. Type <code>/agents</code> inside Claude Code and a guided menu opens.</p>
<div class="how-to-trigger">
@@ -526,7 +572,7 @@ todoapp/
</div>
<!-- Slide 13: Agent Config Fields -->
<div class="slide" data-slide="13">
<div class="slide" data-slide="14">
<h1>Agent Config Fields</h1>
<p>The config block at the top of an agent file controls its identity and capabilities. Here's what the real <code>weather-agent.md</code> uses:</p>
<div style="margin: 24px 0;">
@@ -570,18 +616,18 @@ todoapp/
</div>
<!-- ============================================================ -->
<!-- TOPIC 2: SKILLS (Slides 14-19) -->
<!-- TOPIC 2: SKILLS (Slides 15-20) -->
<!-- ============================================================ -->
<!-- Slide 14: Skills Section Divider -->
<div class="slide section-slide" data-slide="14" data-level="skills">
<div class="slide section-slide" data-slide="15" data-level="skills">
<div class="section-number">Topic 2</div>
<h1>&#x1F393; Skills &mdash; What the Weather Reporter Knows</h1>
<p class="section-desc">Skills are the specific things the reporter has been trained to do. Our reporter has two: <strong>fetch the data</strong>, and <strong>render it as a card</strong>.</p>
</div>
<!-- Slide 15: The Training Manual -->
<div class="slide" data-slide="15">
<div class="slide" data-slide="16">
<h1>The Training Manual</h1>
<div class="analogy-box">
<h4>Think of it like this</h4>
@@ -608,7 +654,7 @@ todoapp/
</div>
<!-- Slide 16: When to Turn Something Into a Skill -->
<div class="slide" data-slide="16">
<div class="slide" data-slide="17">
<h1>When to Turn Something Into a Skill</h1>
<div class="info-box">
<h4>Tip from Boris Cherny (creator of Claude Code) &mdash; Feb 1, 2026</h4>
@@ -645,7 +691,7 @@ todoapp/
</div>
<!-- Slide 17: Why Separate Agents and Skills? -->
<div class="slide" data-slide="17">
<div class="slide" data-slide="18">
<h1>Why Separate Agents and Skills?</h1>
<div class="two-col">
<div>
@@ -671,7 +717,7 @@ todoapp/
</div>
<!-- Slide 18: How to Create Your Own Skill -->
<div class="slide" data-slide="18">
<div class="slide" data-slide="19">
<h1>How to Create Your Own Skill</h1>
<p>Skills are plain markdown files. If you can write a recipe, you can write a skill.</p>
<div class="how-to-trigger">
@@ -724,7 +770,7 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- Slide 19: Skill Config Fields -->
<div class="slide" data-slide="19">
<div class="slide" data-slide="20">
<h1>Skill Config Fields</h1>
<p>The small config block at the top of a SKILL.md (the "frontmatter") controls how the skill behaves:</p>
<div style="margin: 24px 0;">
@@ -760,18 +806,18 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- ============================================================ -->
<!-- TOPIC 3: CONTEXT (Slides 20-24) -->
<!-- TOPIC 3: CONTEXT (Slides 21-25) -->
<!-- ============================================================ -->
<!-- Slide 20: Context Section Divider -->
<div class="slide section-slide" data-slide="20" data-level="context">
<div class="slide section-slide" data-slide="21" data-level="context">
<div class="section-number">Topic 3</div>
<h1>&#x1F9E0; Context &mdash; The Reporter's Brain</h1>
<p class="section-desc">Now that you've met the reporter and know their skills, let's understand what they can actually hold in mind at once. Every agent &mdash; including the weather reporter &mdash; gets its own fresh brain.</p>
</div>
<!-- Slide 21: Claude's Brain -->
<div class="slide" data-slide="21">
<div class="slide" data-slide="22">
<h1>Claude's Brain</h1>
<div class="analogy-box">
<h4>Think of it like this</h4>
@@ -809,7 +855,7 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- Slide 22: What Loads at Session Start -->
<div class="slide" data-slide="22">
<div class="slide" data-slide="23">
<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>
<img src="../assets/context.jpg" alt="Diagram showing what loads into Claude's context window at session start" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
@@ -843,7 +889,7 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- Slide 23: Keep the Brain Clear -->
<div class="slide" data-slide="23">
<div class="slide" data-slide="24">
<h1>Keep the Brain Clear</h1>
<p>The more stuff crammed into Claude's brain, the harder it is to focus on what matters. This is called <strong>context rot</strong> &mdash; performance drops as the brain gets crowded.</p>
<div class="info-box">
@@ -887,7 +933,7 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- Slide 24: How to Manage Your Context -->
<div class="slide" data-slide="24">
<div class="slide" data-slide="25">
<h1>How to Manage Your Context</h1>
<p>You can't <em>create</em> the context &mdash; it's just there, the moment you open a chat. But you can <strong>see</strong> how full it is, <strong>trim</strong> it down, or <strong>wipe</strong> it clean. Three commands give you full control.</p>
<div class="how-to-trigger">
@@ -928,18 +974,18 @@ Fetch the current temperature for Dubai, UAE.
</div>
<!-- ============================================================ -->
<!-- TOPIC 4: CLAUDE.md (Slides 25-30) -->
<!-- TOPIC 4: CLAUDE.md (Slides 26-31) -->
<!-- ============================================================ -->
<!-- Slide 25: CLAUDE.md Section Divider -->
<div class="slide section-slide" data-slide="25" data-level="claude-md">
<div class="slide section-slide" data-slide="26" data-level="claude-md">
<div class="section-number">Topic 4</div>
<h1>&#x1F4CB; CLAUDE.md &mdash; The Reporter's Pocket Rulebook</h1>
<p class="section-desc">The weather reporter consults this at the start of every shift &mdash; even though their brain resets overnight. It's the standing instructions pinned in that brain before you've said a word.</p>
</div>
<!-- Slide 26: The Employee Handbook -->
<div class="slide" data-slide="26">
<div class="slide" data-slide="27">
<h1>The Employee Handbook</h1>
<div class="analogy-box">
<h4>Think of it like this</h4>
@@ -967,7 +1013,7 @@ This is the Q2 marketing campaign brief &mdash; targeting small business owners.
</div>
<!-- Slide 27: How to Create CLAUDE.md -->
<div class="slide" data-slide="27">
<div class="slide" data-slide="28">
<h1>How to Create Your CLAUDE.md</h1>
<p>You don't need to write CLAUDE.md by hand. Claude can look at your project and draft one for you.</p>
<div class="how-to-trigger">
@@ -1012,7 +1058,7 @@ open, edit, save <span class="comment"># Tweak it like any doc</span><
</div>
<!-- Slide 28: Grow CLAUDE.md With Every Mistake -->
<div class="slide" data-slide="28">
<div class="slide" data-slide="29">
<h1>Grow CLAUDE.md With Every Mistake</h1>
<div class="info-box">
<h4>Tip from Boris Cherny (creator of Claude Code) &mdash; Feb 1, 2026</h4>
@@ -1049,7 +1095,7 @@ open, edit, save <span class="comment"># Tweak it like any doc</span><
</div>
<!-- Slide 29: What Goes in CLAUDE.md -->
<div class="slide" data-slide="29">
<div class="slide" data-slide="30">
<h1>What Goes in CLAUDE.md</h1>
<div class="code-block"><span class="comment"># CLAUDE.md</span>
@@ -1077,7 +1123,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- Slide 30: How CLAUDE.md Loads -->
<div class="slide" data-slide="30">
<div class="slide" data-slide="31">
<h1>How CLAUDE.md Loads</h1>
<p>Claude Code uses two mechanisms to find CLAUDE.md files:</p>
<div class="two-col">
@@ -1106,18 +1152,18 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- ============================================================ -->
<!-- TOPIC 5: COMMANDS (Slides 31-33) -->
<!-- TOPIC 5: COMMANDS (Slides 32-34) -->
<!-- ============================================================ -->
<!-- Slide 31: Commands Section Divider -->
<div class="slide section-slide" data-slide="31" data-level="commands">
<div class="slide section-slide" data-slide="32" data-level="commands">
<div class="section-number">Topic 5</div>
<h1>&#x26A1; Commands &mdash; The Trigger</h1>
<p class="section-desc">One word kicks off the whole chain. <code>/weather-orchestrator</code> &rarr; agent &rarr; skill &rarr; SVG card. Commands are the entry point into any workflow.</p>
</div>
<!-- Slide 32: Commands — The Entry Point -->
<div class="slide" data-slide="32">
<div class="slide" data-slide="33">
<h1>Commands &mdash; The Entry Point</h1>
<div class="analogy-box">
<h4>Think of it like this</h4>
@@ -1161,7 +1207,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- Slide 33: How to Create Your Own Command -->
<div class="slide" data-slide="33">
<div class="slide" data-slide="34">
<h1>How to Create Your Own Command</h1>
<p>Commands are markdown files too. If you can write a recipe, you can write a command.</p>
<div class="how-to-trigger">
@@ -1212,18 +1258,18 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- ============================================================ -->
<!-- TOPIC 6: WORKFLOW (Slides 34-37) -->
<!-- TOPIC 6: WORKFLOW (Slides 35-38) -->
<!-- ============================================================ -->
<!-- Slide 34: Workflow Sub-Section (Putting It All Together) -->
<div class="slide section-slide" data-slide="34" data-level="workflow">
<div class="slide section-slide" data-slide="35" data-level="workflow">
<div class="section-number">Putting It All Together</div>
<h1>&#x1F3BC; Workflow &mdash; All Five Pieces Together</h1>
<p class="section-desc">Watch the weather reporter example run from one keystroke to SVG card output. Five concepts, one orchestrated flow.</p>
</div>
<!-- Slide 35: Command → Agent → Skill -->
<div class="slide" data-slide="35">
<div class="slide" data-slide="36">
<h1>Command &rarr; Agent &rarr; Skill</h1>
<p>This is the <strong>core architecture pattern</strong> of Claude Code workflows &mdash; demonstrated in this very repo by the weather example:</p>
<div class="code-block"><span class="comment">The Orchestration Flow</span>
@@ -1250,7 +1296,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- Slide 36: Two Ways Skills Are Used -->
<div class="slide" data-slide="36">
<div class="slide" data-slide="37">
<h1>Two Ways Skills Are Used</h1>
<p>The weather workflow demonstrates both skill patterns in a single flow:</p>
<div class="two-col">
@@ -1273,7 +1319,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- Slide 37: How to Wire Your Own Workflow -->
<div class="slide" data-slide="37">
<div class="slide" data-slide="38">
<h1>How to Wire Your Own Workflow</h1>
<p>A workflow isn't a separate file type. It <em>emerges</em> when one command calls agents and skills in sequence.</p>
<div class="how-to-trigger">
@@ -1322,9 +1368,9 @@ This is a TodoApp with a FastAPI backend and React frontend.
</div>
<!-- ============================================================ -->
<!-- SLIDE 38: Closing -->
<!-- SLIDE 39: Closing -->
<!-- ============================================================ -->
<div class="slide title-slide" data-slide="38">
<div class="slide title-slide" data-slide="39">
<h1>Journey So Far</h1>
<p class="subtitle">Five concepts, one running example</p>
<p style="margin-top: 20px; font-size: 1.1rem; color: #666; max-width: 640px;">From meeting the weather reporter to wiring the full <strong>Command &rarr; Agent &rarr; Skill</strong> chain. The same five pieces compose every workflow you'll ever build.</p>