added presentation

2026-03-05 13:00:11 +05:00
parent 99949d47dd
commit f467c65daa
8 changed files with 909 additions and 192 deletions
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="../../!/claude-jumping.svg">
+    <title>Claude Code Workflows — Best Practice</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fff; color: #1a1a1a; line-height: 1.6; }
+        .slide { display: none; min-height: 100vh; padding: 60px 80px; max-width: 1200px; margin: 0 auto; }
+        .slide.active { display: block; }
+        h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 40px; color: #1a1a1a; border-bottom: 2px solid #e5e5e5; padding-bottom: 20px; }
+        h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 24px; color: #2a2a2a; }
+        h3 { font-size: 1.3rem; font-weight: 600; margin: 24px 0 12px 0; color: #333; }
+        p { font-size: 1.1rem; margin-bottom: 16px; color: #444; }
+        code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.95rem; }
+        .slide.title-slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }
+        .title-slide h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; border-bottom: none; padding-bottom: 0; }
+        .title-slide .subtitle { font-size: 1.4rem; color: #555; margin-bottom: 50px; font-weight: 400; }
+        .slide.section-slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }
+        .section-slide h1 { font-size: 3rem; font-weight: 700; border-bottom: none; padding-bottom: 0; margin-bottom: 16px; }
+        .section-slide .section-number { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 3px; color: #999; margin-bottom: 20px; }
+        .section-slide .section-desc { font-size: 1.2rem; color: #666; max-width: 600px; }
+        .trigger-box { background: #f8f9fa; border-left: 4px solid #1a1a1a; padding: 20px 24px; margin: 24px 0; }
+        .trigger-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 8px; }
+        .trigger-box p { font-size: 1.05rem; color: #333; margin: 0; }
+        .how-to-trigger { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 20px 24px; margin: 16px 0 24px 0; }
+        .how-to-trigger h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #2e7d32; margin-bottom: 8px; }
+        .how-to-trigger p { font-size: 1.05rem; color: #1b5e20; margin: 0; }
+        .how-to-trigger code { background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.95rem; }
+        .warning-box { background: #fff3e0; border-left: 4px solid #ff9800; padding: 20px 24px; margin: 16px 0 24px 0; }
+        .warning-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #e65100; margin-bottom: 8px; }
+        .warning-box p { font-size: 1.05rem; color: #bf360c; margin: 0; }
+        .code-block { background: #1a1a1a; color: #e5e5e5; padding: 20px 24px; border-radius: 8px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.9rem; overflow-x: auto; margin: 20px 0; white-space: pre; line-height: 1.7; }
+        .code-block .comment { color: #6a9955; }
+        .code-block .key { color: #9cdcfe; }
+        .code-block .string { color: #ce9178; }
+        .code-block .cmd { color: #dcdcaa; }
+        .code-block .claude-file { color: #ff5252; }
+        .use-cases { margin: 24px 0; }
+        .use-case-item { display: flex; align-items: flex-start; margin-bottom: 12px; padding: 14px 20px; background: #fafafa; border-radius: 8px; }
+        .use-case-icon { font-size: 1.5rem; margin-right: 16px; min-width: 32px; }
+        .use-case-text { flex: 1; }
+        .use-case-text strong { display: block; font-size: 1.05rem; color: #1a1a1a; margin-bottom: 4px; }
+        .use-case-text span { font-size: 0.95rem; color: #666; }
+        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
+        .col-card { background: #f8f9fa; padding: 24px; border-radius: 8px; }
+        .col-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; }
+        .col-card.good { border-left: 4px solid #4caf50; }
+        .col-card.bad { border-left: 4px solid #f44336; }
+        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
+        .info-card { background: #f8f9fa; padding: 24px; border-radius: 8px; }
+        .info-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; }
+        .matcher-tag { display: inline-block; padding: 4px 10px; background: #e9ecef; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; margin: 4px 4px 4px 0; color: #495057; }
+        .toc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
+        .toc-item { display: flex; align-items: center; padding: 16px 20px; background: #f8f9fa; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
+        .toc-item:hover { background: #eee; }
+        .toc-number { width: 28px; height: 28px; background: #1a1a1a; color: #fff; border-radius: 50%; text-align: center; line-height: 28px; font-size: 0.85rem; margin-right: 12px; font-weight: 600; flex-shrink: 0; }
+        .toc-name { font-size: 1rem; color: #1a1a1a; }
+        .step-number { display: inline-block; width: 36px; height: 36px; background: #1a1a1a; color: #fff; border-radius: 50%; text-align: center; line-height: 36px; font-weight: 600; font-size: 1rem; margin-right: 12px; }
+        .feature-list { list-style: none; margin: 24px 0; }
+        .feature-list li { padding: 12px 0; border-bottom: 1px solid #eee; font-size: 1.05rem; }
+        .feature-list li:last-child { border-bottom: none; }
+        .navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 12px; z-index: 100; }
+        .nav-btn { width: 50px; height: 50px; border: 2px solid #1a1a1a; background: #fff; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
+        .nav-btn:hover { background: #1a1a1a; color: #fff; }
+        .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+        .progress { position: fixed; top: 0; left: 0; height: 4px; background: #1a1a1a; transition: width 0.3s; z-index: 100; }
+        .slide-counter { position: fixed; bottom: 40px; left: 40px; font-size: 0.9rem; color: #999; }
+        .keyboard-hint { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 0.85rem; color: #999; }
+        .keyboard-hint kbd { background: #f0f0f0; padding: 4px 8px; border-radius: 4px; border: 1px solid #ddd; font-family: inherit; }
+        .header-logo { position: fixed; top: 20px; right: 40px; width: 100px; height: 65px; z-index: 50; }
+        .header-logo img { width: 100%; height: 100%; }
+        .title-logo { width: 200px; height: 130px; margin-bottom: 40px; }
+        .title-logo img { width: 100%; height: 100%; }
+        /* Journey Bar — vertical, right side below mascot */
+        .journey-bar { position: fixed; top: 95px; right: 62px; display: flex; flex-direction: column; align-items: center; z-index: 99; gap: 6px; }
+        .journey-bar.hidden { display: none; }
+        .journey-track-wrap { position: relative; display: flex; align-items: stretch; gap: 4px; }
+        .journey-track { width: 20px; height: 280px; background: #e5e5e5; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; }
+        .journey-fill { position: absolute; bottom: 0; width: 100%; border-radius: 10px; transition: height 0.4s ease, background-color 0.4s ease; height: 0%; }
+        .journey-level-label { font-size: 0.65rem; color: #777; font-weight: 400; }
+        /* Level tick marks beside the journey track */
+        .journey-ticks { display: flex; flex-direction: column; justify-content: space-between; height: 280px; padding: 2px 0; }
+        .journey-tick { font-size: 0.45rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #999; white-space: nowrap; line-height: 1; }
+        /* Level badge shown on level-transition slides */
+        .level-badge { display: inline-block; background: #e8f5e9; color: #2e7d32; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: 12px; vertical-align: middle; }
+        /* Shimmer text effect */
+        .shimmer-text { background: linear-gradient(90deg, #888 0%, #444 40%, #ccc 50%, #444 60%, #888 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s ease-in-out infinite; }
+        @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+        /* Celebration slide */
+        .celebration { font-size: 4rem; margin-bottom: 24px; }
+        /* Reference table */
+        .ref-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 1rem; }
+        .ref-table th { background: #1a1a1a; color: #fff; padding: 12px 16px; text-align: left; font-weight: 600; }
+        .ref-table td { padding: 12px 16px; border-bottom: 1px solid #e5e5e5; color: #333; }
+        .ref-table tr:last-child td { border-bottom: none; }
+        .ref-table tr:nth-child(even) td { background: #f8f9fa; }
+        .ref-table code { background: #f0f0f0; }
+    </style>
+</head>
+<body>
+    <div class="progress" id="progress"></div>
+    <div class="journey-bar hidden" id="journeyBar">
+        <div class="journey-track-wrap">
+            <div class="journey-track"><div class="journey-fill" id="journeyFill"></div></div>
+            <div class="journey-ticks">
+                <span class="journey-tick">Pro</span>
+                <span class="journey-tick">High</span>
+                <span class="journey-tick">Med</span>
+                <span class="journey-tick">Low</span>
+            </div>
+        </div>
+        <span class="journey-level-label" id="journeyLevelLabel">Current = <strong>Low</strong></span>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- TITLE SLIDE                                                   -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 1: Title -->
+    <div class="slide active title-slide" data-slide="1">
+        <div class="title-logo">
+            <img src="../../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
+        </div>
+        <h1>Claude Code Workflows - Best Practice</h1>
+        <p class="subtitle">From Vibe Coding to Agentic Engineering</p>
+        <p class="shimmer-text" style="margin-top: 60px; font-size: 0.95rem;">Shayan Rais</p>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- INTRO — THE PROBLEM (0:00 – 0:45)                           -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 2: The Problem -->
+    <div class="slide section-slide" data-slide="2" data-level="low">
+        <p class="section-number">Intro &mdash; 0:00</p>
+        <h1>The Problem</h1>
+        <p class="section-desc">You're doing vibe coding &mdash; and only using a fraction of what Claude Code can do.</p>
+    </div>
+
+    <!-- Slide 3: Vibe Coding vs Agentic Engineering -->
+    <div class="slide" data-slide="3">
+        <h1>Vibe Coding vs Agentic Engineering</h1>
+        <div class="two-col">
+            <div class="col-card bad">
+                <h4>Vibe Coding</h4>
+                <p>Type prompts, get results, repeat.</p>
+                <p>It works &mdash; but Claude is just <strong>responding to you</strong>.</p>
+                <p>No structure. No repeatability. No workflow.</p>
+                <p style="margin-top: 16px; color: #c62828;">You're always in the loop. Claude never runs on its own.</p>
+            </div>
+            <div class="col-card good">
+                <h4>Agentic Engineering</h4>
+                <p>Define a workflow once.</p>
+                <p>Claude <strong>runs it for you</strong> &mdash; every time, the same way.</p>
+                <p>Commands, Agents, and Skills chain together.</p>
+                <p style="margin-top: 16px; color: #2e7d32;">You kick it off and walk away. Claude handles the rest.</p>
+            </div>
+        </div>
+        <div class="trigger-box">
+            <h4>This Video</h4>
+            <p>Covers the foundation: <strong>Commands, Agents, and Skills</strong> &mdash; and how they chain together into repeatable workflows.</p>
+        </div>
+    </div>
+
+    <!-- Slide 4: Agenda -->
+    <div class="slide" data-slide="4">
+        <h1>What We'll Cover</h1>
+        <div class="toc-list" style="margin-top: 24px;">
+            <div class="toc-item" onclick="goToSlide(5)"><span class="toc-number">1</span><span class="toc-name">The Ad-Hoc Way (0:45)</span></div>
+            <div class="toc-item" onclick="goToSlide(7)"><span class="toc-number">2</span><span class="toc-name">The Workflow Way (2:00)</span></div>
+            <div class="toc-item" onclick="goToSlide(9)"><span class="toc-number">3</span><span class="toc-name">How It Works (3:15)</span></div>
+            <div class="toc-item" onclick="goToSlide(14)"><span class="toc-number">4</span><span class="toc-name">Why This Matters (4:30)</span></div>
+        </div>
+        <div class="trigger-box" style="margin-top: 32px;">
+            <h4>Demo Project</h4>
+            <p>We'll use the <strong>weather workflow</strong> from this repo as our running example throughout the video.</p>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- PART 1 — THE AD-HOC WAY (0:45 – 2:00)                      -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 5: Section Divider -->
+    <div class="slide section-slide" data-slide="5">
+        <p class="section-number">Part 1 &mdash; 0:45</p>
+        <h1>The Ad-Hoc Way</h1>
+        <p class="section-desc">Vibe coding the weather task &mdash; it works once, but is it a workflow you can trust?</p>
+    </div>
+
+    <!-- Slide 6: The Inconsistency Problem -->
+    <div class="slide" data-slide="6">
+        <h1>The Inconsistency Problem</h1>
+        <div class="how-to-trigger">
+            <h4>The Prompt</h4>
+            <p>Type into a fresh Claude Code terminal:</p>
+        </div>
+        <div class="code-block"><span class="cmd">&gt;</span> What is the weather in Dubai? Write it to an output file and create an SVG card for it.</div>
+        <div class="two-col" style="margin-top: 24px;">
+            <div class="col-card bad">
+                <h4>Run 1 &mdash; SVG Result</h4>
+                <p>Blue gradient background</p>
+                <p>Large serif font, centered layout</p>
+                <p>Output saved to <code>weather.svg</code></p>
+                <p style="margin-top: 12px; color: #666; font-size: 0.9rem;">Looks fine... until you run it again.</p>
+            </div>
+            <div class="col-card bad">
+                <h4>Run 2 &mdash; SVG Result</h4>
+                <p>Orange card-style background</p>
+                <p>Small sans-serif, left-aligned layout</p>
+                <p>Output saved to <code>output/card.svg</code></p>
+                <p style="margin-top: 12px; color: #c62828;">Different design. Different file path. Every time.</p>
+            </div>
+        </div>
+        <div class="warning-box">
+            <h4>The Vibe Coding Problem</h4>
+            <p>It works once. But it's not repeatable. It's not a workflow you can trust. You had to sit and watch it work &mdash; and you'll get a completely different result tomorrow.</p>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- PART 2 — THE WORKFLOW WAY (2:00 – 3:15)                     -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 7: Section Divider -->
+    <div class="slide section-slide" data-slide="7" data-level="medium">
+        <p class="section-number">Part 2 &mdash; 2:00</p>
+        <h1>The Workflow Way</h1>
+        <p class="section-desc">The same task &mdash; but as a repeatable, autonomous workflow.</p>
+    </div>
+
+    <!-- Slide 8: /weather-orchestrator Demo -->
+    <div class="slide" data-slide="8">
+        <h1>/weather-orchestrator</h1>
+        <div class="how-to-trigger">
+            <h4>The Command</h4>
+            <p>Instead of a freeform prompt, type a slash command:</p>
+        </div>
+        <div class="code-block"><span class="cmd">&gt;</span> /weather-orchestrator</div>
+        <h3>What Happens on Screen</h3>
+        <div class="use-cases">
+            <div class="use-case-item"><span class="use-case-icon">1&#65039;&#8419;</span><div class="use-case-text"><strong>It asks you: Celsius or Fahrenheit?</strong><span>Structured user interaction &mdash; not freeform guessing</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">2&#65039;&#8419;</span><div class="use-case-text"><strong>It spawns a weather-agent</strong><span>You see the green agent indicator in the terminal &mdash; a dedicated worker</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">3&#65039;&#8419;</span><div class="use-case-text"><strong>It invokes the SVG skill</strong><span>weather-svg-creator creates a consistent card layout</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">4&#65039;&#8419;</span><div class="use-case-text"><strong>Output: same files, same layout, every time</strong><span><code>orchestration-workflow/weather.svg</code> + <code>orchestration-workflow/output.md</code></span></div></div>
+        </div>
+        <div class="trigger-box">
+            <h4>Run it again tomorrow</h4>
+            <p>Same SVG layout. Same file structure. Same clean result. You can kick this off and walk away &mdash; it runs autonomously.</p>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- PART 3 — HOW IT WORKS (3:15 – 4:30)                        -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 9: Section Divider -->
+    <div class="slide section-slide" data-slide="9">
+        <p class="section-number">Part 3 &mdash; 3:15</p>
+        <h1>How It Works</h1>
+        <p class="section-desc">Command &rarr; Agent &rarr; Skill &mdash; the three building blocks.</p>
+    </div>
+
+    <!-- Slide 10: The Flow Diagram -->
+    <div class="slide" data-slide="10">
+        <h1>Command &rarr; Agent &rarr; Skill</h1>
+        <p>The weather workflow chains three building blocks together:</p>
+        <div class="code-block"><span class="comment"># The full orchestration flow</span>
+
+<span class="cmd">/weather-orchestrator</span> (Command)
+    &rarr; <span class="comment">AskUser: C&deg; or F&deg;?</span>
+    &rarr; <span class="key">weather-agent</span> (Agent + weather-fetcher skill)
+    &rarr; <span class="string">weather-svg-creator</span> (Skill)
+    &rarr; <span class="comment">Output: weather.svg + output.md</span></div>
+        <div class="info-grid">
+            <div class="info-card">
+                <h4>Command</h4>
+                <p>The entry point &mdash; the conductor. Asks the user a question, calls an agent, then calls a skill.</p>
+            </div>
+            <div class="info-card">
+                <h4>Agent</h4>
+                <p>A specialized worker with one job: fetch the temperature. Has a preloaded skill for API knowledge.</p>
+            </div>
+            <div class="info-card">
+                <h4>Agent Skill (preloaded)</h4>
+                <p><code>weather-fetcher</code> is baked into the agent at startup &mdash; domain knowledge about which API to call.</p>
+            </div>
+            <div class="info-card">
+                <h4>Invoked Skill</h4>
+                <p><code>weather-svg-creator</code> is called independently via the Skill tool &mdash; creates a consistent SVG card.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Slide 11: Commands -->
+    <div class="slide" data-slide="11">
+        <h1>Building Block 1: Commands</h1>
+        <div class="trigger-box">
+            <h4>What Is a Command?</h4>
+            <p>A command is the entry point &mdash; like a script. It's a markdown file that tells Claude <strong>what steps to follow</strong>. Think of it as the conductor.</p>
+        </div>
+        <div class="code-block"><span class="comment"># .claude/commands/weather-orchestrator.md</span>
+---
+<span class="key">description</span>: <span class="string">Fetch weather and create an SVG card</span>
+---
+
+<span class="comment"># Weather Orchestrator</span>
+
+1. Ask the user: Celsius or Fahrenheit? (AskUserQuestion)
+2. Invoke weather-agent to fetch the temperature
+   - Task(subagent_type=<span class="string">"weather-agent"</span>, ...)
+3. Invoke weather-svg-creator skill with the result
+   - Skill(<span class="string">"weather-svg-creator"</span>, ...)
+4. Confirm output files are written</div>
+        <h3>How to Use</h3>
+        <div class="use-cases">
+            <div class="use-case-item"><span class="use-case-icon">&#128193;</span><div class="use-case-text"><strong>Location</strong><span><code>.claude/commands/</code> &mdash; one <code>.md</code> file per command</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">&#9881;</span><div class="use-case-text"><strong>Invocation</strong><span>Shows up as a <code>/slash-command</code> in your terminal</span></div></div>
+        </div>
+    </div>
+
+    <!-- Slide 12: Agents -->
+    <div class="slide" data-slide="12">
+        <h1>Building Block 2: Agents</h1>
+        <div class="trigger-box">
+            <h4>What Is an Agent?</h4>
+            <p>An agent is a specialized worker. Our <code>weather-agent</code> has one job: fetch the temperature. It has its own tools, model, and permissions &mdash; an isolated worker.</p>
+        </div>
+        <div class="code-block"><span class="comment"># .claude/agents/weather-agent.md</span>
+---
+<span class="key">name</span>: <span class="string">weather-agent</span>
+<span class="key">description</span>: <span class="string">Fetches weather data using wttr.in API</span>
+<span class="key">tools</span>: <span class="string">Bash, WebFetch</span>
+<span class="key">model</span>: <span class="string">haiku</span>
+<span class="key">skills</span>:
+  - weather-fetcher
+---
+You are a weather data fetcher.
+Use the weather-fetcher skill for API details.
+Return the temperature and conditions only.</div>
+        <h3>Key Properties</h3>
+        <div class="use-cases">
+            <div class="use-case-item"><span class="use-case-icon">&#128295;</span><div class="use-case-text"><strong>Isolated context</strong><span>Runs independently, returns a result, context is discarded</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">&#128218;</span><div class="use-case-text"><strong>Preloaded skills</strong><span><code>weather-fetcher</code> is injected at startup &mdash; it already knows the API</span></div></div>
+        </div>
+    </div>
+
+    <!-- Slide 13: Skills -->
+    <div class="slide" data-slide="13">
+        <h1>Building Block 3: Skills</h1>
+        <div class="trigger-box">
+            <h4>What Is a Skill?</h4>
+            <p>A skill is a reusable set of instructions. Think of it as a recipe. Skills can be background knowledge <em>or</em> standalone actions.</p>
+        </div>
+        <div class="two-col">
+            <div class="col-card">
+                <h4>Agent Skill (Preloaded)</h4>
+                <p><code>weather-fetcher</code> is baked into the <code>weather-agent</code>.</p>
+                <p>It's domain knowledge &mdash; which API endpoint to call, how to parse the JSON response.</p>
+                <div class="code-block" style="font-size: 0.8rem;"><span class="key">skills</span>:
+  - weather-fetcher</div>
+            </div>
+            <div class="col-card">
+                <h4>Invoked Skill (Standalone)</h4>
+                <p><code>weather-svg-creator</code> is called via the Skill tool.</p>
+                <p>It creates the SVG card with a consistent template &mdash; same layout every time.</p>
+                <div class="code-block" style="font-size: 0.8rem;">Skill(<span class="string">"weather-svg-creator"</span>, ...)</div>
+            </div>
+        </div>
+        <div class="how-to-trigger">
+            <h4>Location</h4>
+            <p>Skills live in <code>.claude/skills/&lt;name&gt;/SKILL.md</code></p>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- PART 4 — WHY THIS MATTERS (4:30 – 5:00)                    -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 14: Section Divider -->
+    <div class="slide section-slide" data-slide="14">
+        <p class="section-number">Part 4 &mdash; 4:30</p>
+        <h1>Why This Matters</h1>
+        <p class="section-desc">The difference between vibe coding and agentic engineering is structure.</p>
+    </div>
+
+    <!-- Slide 15: The Core Difference -->
+    <div class="slide" data-slide="15">
+        <h1>Structure Is the Difference</h1>
+        <div class="two-col">
+            <div class="col-card bad">
+                <h4>Vibe Coding</h4>
+                <p>You type.</p>
+                <p>You hope.</p>
+                <p>You get something.</p>
+                <p style="margin-top: 12px; color: #c62828;">Inconsistent. You're always in the loop. Doesn't scale.</p>
+            </div>
+            <div class="col-card good">
+                <h4>Agentic Engineering</h4>
+                <p>You define a workflow once.</p>
+                <p>It runs the same way every time.</p>
+                <p>You kick it off and walk away.</p>
+                <p style="margin-top: 12px; color: #2e7d32;">Consistent. Autonomous. Repeatable. Trustworthy.</p>
+            </div>
+        </div>
+        <div class="trigger-box">
+            <h4>The Building Blocks</h4>
+            <p>Commands, Agents, and Skills are the three building blocks. Once you understand these, you can build any workflow.</p>
+        </div>
+    </div>
+
+    <!-- Slide 16: What's Next -->
+    <div class="slide" data-slide="16">
+        <h1>What's Next</h1>
+        <p>This repo has more patterns &mdash; we'll cover them in upcoming videos:</p>
+        <div class="use-cases">
+            <div class="use-case-item"><span class="use-case-icon">&#128279;</span><div class="use-case-text"><strong>Hooks</strong><span>Custom scripts at lifecycle events &mdash; PreToolUse, PostToolUse, Stop, and more</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">&#128101;</span><div class="use-case-text"><strong>Multi-Agent Teams</strong><span>Commands that orchestrate multiple specialized agents working in parallel</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">&#128203;</span><div class="use-case-text"><strong>CLAUDE.md Configuration</strong><span>Project memory, path-scoped rules, and keeping instructions under 150 lines</span></div></div>
+            <div class="use-case-item"><span class="use-case-icon">&#128295;</span><div class="use-case-text"><strong>MCP Servers</strong><span>Connect Claude to databases, browsers, and external APIs</span></div></div>
+        </div>
+        <div class="how-to-trigger">
+            <h4>Get Started</h4>
+            <p>Link in the description. Star it, clone it, and start building your own workflows.</p>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- QUICK REFERENCE                                              -->
+    <!-- ============================================================ -->
+
+    <!-- Slide 17: Quick Reference -->
+    <div class="slide" data-slide="17">
+        <h1>Quick Reference</h1>
+        <table class="ref-table">
+            <thead>
+                <tr>
+                    <th>Concept</th>
+                    <th>Location</th>
+                    <th>Purpose</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><strong>Command</strong></td>
+                    <td><code>.claude/commands/</code></td>
+                    <td>Entry point, orchestration, <code>/slash-command</code></td>
+                </tr>
+                <tr>
+                    <td><strong>Agent</strong></td>
+                    <td><code>.claude/agents/</code></td>
+                    <td>Specialized worker with own tools &amp; model</td>
+                </tr>
+                <tr>
+                    <td><strong>Skill</strong></td>
+                    <td><code>.claude/skills/</code></td>
+                    <td>Reusable instructions (preloaded or invoked)</td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="info-grid" style="margin-top: 32px;">
+            <div class="info-card">
+                <h4>Two Skill Patterns</h4>
+                <p><strong>Preloaded</strong> &mdash; baked into agent via <code>skills:</code> frontmatter</p>
+                <p><strong>Invoked</strong> &mdash; called via <code>Skill()</code> tool at runtime</p>
+            </div>
+            <div class="info-card">
+                <h4>The Chain</h4>
+                <p><code>/command</code> &rarr; orchestrates</p>
+                <p><code>agent</code> + preloaded skill &rarr; executes</p>
+                <p>invoked <code>skill</code> &rarr; produces output</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Slide 18: Thank You -->
+    <div class="slide title-slide" data-slide="18">
+        <div class="title-logo">
+            <img src="../../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
+        </div>
+        <h1>Thank You!</h1>
+        <p class="subtitle">Questions?</p>
+        <p style="margin-top: 40px; font-size: 1rem; color: #666;">github.com/shanraisshan/claude-code-best-practice</p>
+    </div>
+
+    <!-- Header Logo -->
+    <div class="header-logo">
+        <img src="../../!/claude-jumping.svg" alt="Claude Code mascot" />
+    </div>
+
+    <div class="navigation">
+        <button class="nav-btn" id="prevBtn" onclick="prevSlide()">&#8592;</button>
+        <button class="nav-btn" id="nextBtn" onclick="nextSlide()">&#8594;</button>
+    </div>
+    <div class="slide-counter" id="slideCounter">1 / --</div>
+    <div class="keyboard-hint"><kbd>&#8592;</kbd> <kbd>&#8594;</kbd> or <kbd>Space</kbd> to navigate</div>
+
+    <script>
+        let currentSlide = 1;
+        const slides = document.querySelectorAll('[data-slide]');
+        const totalSlides = slides.length;
+
+        // Level definitions (order 1=bottom, 4=top)
+        const LEVELS = {
+            'low':    { order: 1, color: 'hsl(0, 70%, 45%)',   height: '25%',  label: 'Low' },
+            'medium': { order: 2, color: 'hsl(40, 70%, 45%)',  height: '50%',  label: 'Medium' },
+            'high':   { order: 3, color: 'hsl(80, 70%, 45%)',  height: '75%',  label: 'High' },
+            'pro':    { order: 4, color: 'hsl(120, 70%, 45%)', height: '100%', label: 'Pro' }
+        };
+
+        // Build slide-to-level map: inherit level from previous data-level slide
+        const SLIDE_LEVELS = {};
+        let lastLevel = null;
+        slides.forEach((s) => {
+            const num = parseInt(s.dataset.slide);
+            if (s.dataset.level) { lastLevel = s.dataset.level; }
+            SLIDE_LEVELS[num] = lastLevel;
+        });
+
+        let prevDisplayedLevel = null;
+
+        function updateJourneyBar(slideNum) {
+            const bar = document.getElementById('journeyBar');
+            const fill = document.getElementById('journeyFill');
+            const labelEl = document.getElementById('journeyLevelLabel');
+            if (slideNum <= 1) { bar.classList.add('hidden'); prevDisplayedLevel = null; return; }
+            bar.classList.remove('hidden');
+            const levelKey = SLIDE_LEVELS[slideNum];
+            if (!levelKey || !LEVELS[levelKey]) {
+                fill.style.height = '0%';
+                if (labelEl) { labelEl.innerHTML = ''; }
+                return;
+            }
+            const lvl = LEVELS[levelKey];
+            fill.style.height = lvl.height;
+            fill.style.backgroundColor = lvl.color;
+            if (labelEl) { labelEl.innerHTML = 'Current = <strong style="color:' + lvl.color + '">' + lvl.label + '</strong>'; }
+
+            // Show level badge when level changes
+            document.querySelectorAll('.level-badge').forEach(b => b.remove());
+            const slideEl = document.querySelector(`[data-slide="${slideNum}"]`);
+            if (slideEl && slideEl.dataset.level && slideEl.dataset.level !== prevDisplayedLevel) {
+                const h1 = slideEl.querySelector('h1');
+                if (h1) {
+                    const badge = document.createElement('span');
+                    badge.className = 'level-badge';
+                    badge.textContent = '\u2192 ' + lvl.label;
+                    h1.appendChild(badge);
+                }
+            }
+            prevDisplayedLevel = levelKey;
+        }
+
+        function showSlide(n) {
+            slides.forEach(s => s.classList.remove('active'));
+            if (n > totalSlides) currentSlide = totalSlides;
+            if (n < 1) currentSlide = 1;
+            document.querySelector(`[data-slide="${currentSlide}"]`).classList.add('active');
+            document.getElementById('slideCounter').textContent = `${currentSlide} / ${totalSlides}`;
+            document.getElementById('progress').style.width = `${(currentSlide / totalSlides) * 100}%`;
+            document.getElementById('prevBtn').disabled = currentSlide === 1;
+            document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
+            updateJourneyBar(currentSlide);
+        }
+        function nextSlide() { currentSlide++; showSlide(currentSlide); }
+        function prevSlide() { currentSlide--; showSlide(currentSlide); }
+        function goToSlide(n) { currentSlide = n; showSlide(currentSlide); }
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
+            else if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
+        });
+        let touchStartX = 0;
+        document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
+        document.addEventListener('touchend', (e) => {
+            const diff = touchStartX - e.changedTouches[0].clientX;
+            if (Math.abs(diff) > 50) { if (diff > 0) nextSlide(); else prevSlide(); }
+        });
+        showSlide(currentSlide);
+    </script>
+</body>
+</html>
@@ -0,0 +1,100 @@
+# Video 1: From Vibe Coding to Agentic Engineering — Workflows with Claude Code
+
+**Total duration: ~5 minutes**
+
+---
+
+## INTRO — The Problem (0:00 – 0:45)
+
+- "If you've just started with Claude Code, chances are you're doing vibe coding — typing prompts, getting results, repeating. That works, but you're only using a fraction of what Claude Code can do."
+- "This repo is a curated collection of best practices that takes you from vibe coding to agentic engineering — where Claude doesn't just respond to you, it runs workflows for you."
+- "In this first video, I'm covering the foundation: **Commands, Agents, and Skills** — and how they chain together into repeatable workflows."
+
+---
+
+## PART 1 — The Ad-Hoc Way (0:45 – 2:00)
+
+**Demo: Vibe coding approach**
+
+- Open a fresh Claude Code terminal
+- Type: *"What is the weather in Dubai? Write it to an output file and create an SVG card for it."*
+- Show the result — it works, but point out:
+  - The SVG design is different every time (random colors, layout, fonts)
+  - You had to sit and watch it work
+  - If you run it again tomorrow, you'll get a completely different looking card
+- **Open a second terminal, run the same prompt again**
+  - Show the SVG side-by-side — they look different
+- "This is the problem with vibe coding. It works once. But it's not repeatable. It's not a workflow you can trust."
+
+---
+
+## PART 2 — The Workflow Way (2:00 – 3:15)
+
+**Demo: `/weather-orchestrator` command**
+
+- "Now let me show you the same task, but as a workflow."
+- Type: `/weather-orchestrator`
+- Walk through what happens on screen:
+  1. It **asks you** Celsius or Fahrenheit (structured user interaction)
+  2. It **spawns a weather-agent** to fetch the temperature (you see the green agent in the terminal)
+  3. It **invokes a skill** to create the SVG card
+  4. Output: `orchestration-workflow/weather.svg` + `orchestration-workflow/output.md`
+- "Run it again — same SVG layout, same file structure, same clean result. Every time."
+- "You can kick this off and walk away. It runs autonomously."
+
+---
+
+## PART 3 — How It Works: Command → Agent → Skill (3:15 – 4:30)
+
+**Explain the three building blocks**
+
+### Commands (`.claude/commands/`)
+
+- "A command is the entry point — like a script. It's a markdown file that tells Claude *what steps to follow*."
+- "Our `weather-orchestrator` is the conductor. It asks the user a question, calls an agent, then calls a skill."
+- Commands live in `.claude/commands/` and show up as `/slash-commands`
+
+### Agents (`.claude/agents/`)
+
+- "An agent is a specialized worker. Our `weather-agent` has one job: fetch the temperature."
+- "It has a **preloaded skill** called `weather-fetcher` — that skill is injected into the agent's context at startup, so it knows exactly which API to call and how to parse the response."
+- Agents have their own tools, models, and permissions. They're isolated workers.
+
+### Skills (`.claude/skills/`)
+
+- "A skill is a reusable set of instructions. Think of it as a recipe."
+- "We have two skill patterns here:"
+  - **Agent skill** (preloaded): `weather-fetcher` is baked into the agent — it's domain knowledge
+  - **Invoked skill**: `weather-svg-creator` is called independently via the Skill tool — it creates the SVG card
+- Skills can be background knowledge OR standalone actions
+
+### Flow Diagram (optionally show on screen)
+
+```
+/weather-orchestrator (Command)
+    → AskUser: C° or F°?
+    → weather-agent (Agent + weather-fetcher skill)
+    → weather-svg-creator (Skill)
+    → Output: weather.svg + output.md
+```
+
+---
+
+## PART 4 — Why This Matters / Wrap-up (4:30 – 5:00)
+
+- "The difference between vibe coding and agentic engineering is **structure**."
+  - Vibe coding: you type, you hope, you get something.
+  - Agentic engineering: you define a workflow once, and it runs the same way every time.
+- "Commands, Agents, and Skills are the three building blocks. Once you understand these, you can build any workflow."
+- "This repo has more patterns — hooks, multi-agent teams, CLAUDE.md configuration — we'll cover those in upcoming videos."
+- "Link to the repo is in the description. Star it, clone it, and start building your own workflows."
+
+---
+
+## Quick Reference
+
+| Concept | Location | Purpose |
+|---------|----------|---------|
+| Command | `.claude/commands/` | Entry point, orchestration, `/slash-command` |
+| Agent | `.claude/agents/` | Specialized worker with own tools & model |
+| Skill | `.claude/skills/` | Reusable instructions (preloaded or invoked) |
@@ -23,8 +23,8 @@ Apply the requested changes to the presentation while maintaining structural int
 ### Step 1: Understand Current State (presentation-structure skill)

 Follow the presentation-structure skill to understand:
- The slide format (`data-slide` and `data-weight` attributes)
- The journey bar system and weight requirements
+- The slide format (`data-slide` and `data-level` attributes)
+- The journey bar level system (Low/Medium/High/Pro — 4 discrete levels)
 - The section structure (Parts 0-6 + Appendix)
 - How slide numbering works

@@ -34,7 +34,7 @@ Based on the request:
 - **Content changes**: Edit slide HTML within existing `<div class="slide">` elements
 - **New slides**: Insert new slide divs with correct `data-slide` numbering
 - **Reorder**: Move slide divs and renumber all `data-slide` attributes sequentially
- **Weight changes**: Update `data-weight` attributes ensuring they sum to 100%
+- **Level changes**: Update `data-level` attributes on section-divider slides (3 transition points in main presentation: Low at slide 10, Medium at slide 18, High at slide 29; Part 6 at slide 34 also uses `high` — the presentation caps at High, not Pro)
 - **Styling changes**: Update CSS within the `<style>` block, matching existing patterns

 ### Step 3: Match Styling (presentation-styling skill)
@@ -48,14 +48,14 @@ Follow the presentation-styling skill to ensure:

 After changes, verify:
 1. All `data-slide` attributes are sequential (1, 2, 3, ...)
-2. All `data-weight` values sum to exactly 100
+2. `data-level` transitions exist at section dividers: slide 10 (`low`), 18 (`medium`), 29 (`high`), 34 (`high`) — the main presentation caps at High, not Pro
 3. No duplicate slide numbers exist
 4. The `totalSlides` JS variable matches the actual count (it's auto-computed from DOM)
 5. Any `goToSlide()` calls in the TOC point to correct slide numbers
-6. Weighted slide titles in `vibe-to-agentic-framework` match actual `<h1>` titles in `presentation/index.html`
+6. Level transition slides in `vibe-to-agentic-framework` match actual `<h1>` titles in `presentation/index.html`
 7. Agent identifiers are consistent across examples (use `frontend-engineer` / `backend-engineer`; do not introduce aliases like `frontend-eng`)
 8. Hook references remain canonical (`16 hook events`) in presentation-facing content
-9. Do not manually insert `.weight-badge` markup in slide HTML (badges are JS-injected)
+9. Do not manually insert `.level-badge` or `.weight-badge` markup in slide HTML (badges are JS-injected)
 10. Settings precedence text must separate user-writable override order from enforced policy (`managed-settings.json`)
 11. If slide 32 is touched, ensure skill frontmatter coverage includes `context: fork`
 12. Keep the framework skill identity canonical: `presentation/vibe-to-agentic-framework` (do not rename to variants)
@@ -68,17 +68,17 @@ After completing changes to the presentation, you MUST update your own knowledge

 Read the actual current state of `presentation/index.html` and update `.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md`:

- **Weight Reference Table**: If any slides were added, removed, renamed, or reweighted, update the table at the bottom of the skill to reflect the actual `data-weight` attributes and `<h1>` titles in the HTML. The table must always match reality.
+- **Level Transition Table**: If any level transitions were added, removed, or changed, update the table to reflect actual `data-level` attributes and their slide numbers. The table must always match reality.
 - **Section ranges**: If slide numbering changed (e.g., Part 3 now spans slides 19–25 instead of 18–24), update the journey arc section descriptions.
- **Journey percentages**: If section dividers have new journey percentages in their `section-desc`, update the corresponding Part descriptions.
- **New concepts**: If a new weighted slide introduces a concept not yet described in the journey arc, add a bullet explaining what it is, why it has its weight, and how it fits the Vibe Coding → Agentic Engineering narrative.
- **Removed concepts**: If a weighted slide was removed, remove its entry from both the journey arc and the weight table.
+- **Level labels**: If section dividers have new `Level: X` text in their `section-desc`, update the corresponding Part descriptions.
+- **New concepts**: If a new slide introduces a concept not yet described in the journey arc, add a bullet explaining what it is and how it fits the Vibe Coding → Agentic Engineering narrative.
+- **Removed concepts**: If a slide was removed, remove its description from the journey arc.

 #### 5b. Update the Structure Skill

 Update `.claude/skills/presentation/presentation-structure/SKILL.md`:

- **Weight Distribution table**: Update section slide ranges and total weights to match the current presentation.
+- **Level Transitions table**: Update section slide ranges and level assignments to match the current presentation.
 - **Section divider examples**: If section divider format changed, update the example HTML.

 #### 5c. Cross-Doc Consistency (when claims change)
@@ -99,14 +99,17 @@ _Findings from previous executions are recorded here. Add new entries as bullet

 - Hook-event references drifted across files. Treat `16 hook events` as canonical and sync all docs in the same run.
 - Do not use shorthand agent names in examples (`frontend-eng`). Keep identifiers exactly aligned with agent definitions.
- Never hardcode `.weight-badge` in slide HTML; badges are runtime-injected.
+- Never hardcode `.weight-badge` or `.level-badge` in slide HTML; badges are runtime-injected by JS.
 - Keep the framework skill name stable as `vibe-to-agentic-framework` to avoid broken skill references.
 - When updating slide 2 (TodoApp structure) to show before/after comparison, the `.two-col` layout works well with centered h3 headers using inline styles for red/green color coding. Update framework skill's Part 0 description and TodoApp example section to reflect the new before/after structure.
+- The journey bar was refactored from a percentage-based system (`data-weight` attributes summing to 100%) to a 4-level system (`data-level` attributes: low/medium/high/pro). The `.journey-track-wrap` wrapper div is required to display the ticks column alongside the bar without being clipped by `overflow: hidden`. The level transitions in the main presentation are at section dividers only (slides 10, 18, 29, 34). The video presentation (`!/video-presentation-transcript/1-video-workflow.html`) uses the same system with its own level transitions at slides 2 (low) and 7 (medium).
+- The main presentation caps at **High** level (not Pro). Slide 34 uses `data-level="high"`. The Pro tick on the journey bar remains as a visual scale marker showing the theoretical ceiling, but the fill never reaches it. Do not assign `data-level="pro"` to any slide in the main presentation.
+- Journey bar top/bottom labels (`journey-label-top` / `journey-label-bottom`) were removed from both presentation files. The current-level indicator now uses the format `Current = <strong>Level</strong>` rendered via `innerHTML` in the JS `updateJourneyBar` function. The `journey-level-label` CSS class was updated to use lighter, smaller styling (font-weight: 400, font-size: 0.65rem, color: #777) since the label word is now light and only the bold `<strong>` element is accented.

 ## Critical Requirements

 1. **Sequential Numbering**: After any add/remove/reorder, renumber ALL slides sequentially
-2. **Weight Integrity**: Weighted slides must sum to exactly 100%
+2. **Level Integrity**: The main presentation has `data-level` transitions at slides 10 (low), 18 (medium), 29 (high), 34 (high). It caps at High — `data-level="pro"` is NOT used in the main presentation. The Pro tick mark on the bar is a visual reference marker only.
 3. **Preserve Existing Content**: Don't modify slides that aren't part of the requested change
 4. **Match Patterns**: Use the same HTML patterns as existing slides (see skills)

@@ -115,5 +118,5 @@ _Findings from previous executions are recorded here. Add new entries as bullet
 After completing changes, report:
 - What slides were changed
 - Current total slide count
- Current weight sum (should be 100%)
+- Current level transitions (which slides carry `data-level`)
 - Any renumbering that occurred
@@ -13,19 +13,19 @@ Knowledge about how the presentation at `presentation/index.html` is structured.

 ## Slide Format

-Each slide is a div with `data-slide` (sequential number) and optional `data-weight` (journey percentage):
+Each slide is a div with `data-slide` (sequential number) and optional `data-level` (journey level at transition points):

 ```html
-<!-- Regular slide -->
-<div class="slide" data-slide="12" data-weight="5">
+<!-- Regular slide — inherits level from previous data-level slide -->
+<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
 </div>

-<!-- Section divider slide -->
-<div class="slide section-slide" data-slide="10">
+<!-- Level transition slide — sets new level for this slide and all following -->
+<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
-    <p class="section-desc">Description of this section</p>
+    <p class="section-desc">Level: Low — description of this section</p>
 </div>

 <!-- Title slide (centered) -->
@@ -35,26 +35,29 @@ Each slide is a div with `data-slide` (sequential number) and optional `data-wei
 </div>
 ```

-## Journey Bar Weight System
+## Journey Bar Level System

- Slides with `data-weight="N"` contribute N% to the journey progress bar
- All weights across the entire presentation MUST sum to exactly 100
- The journey bar reads weights at page load and pre-computes cumulative sums
- Slides without `data-weight` contribute 0% (informational slides, appendix)
- The bar is hidden on slide 1 (title slide)
+The presentation uses a 4-level system instead of cumulative percentages:

-### Weight Distribution by Section
+- Levels are set via `data-level` attribute on key transition slides (section dividers)
+- All slides after a `data-level` slide inherit that level until the next transition
+- The journey bar fills to 25% / 50% / 75% / 100% for Low / Medium / High / Pro respectively
+- The bar is hidden on slide 1 (title slide); from slide 2 onward the bar is shown
+- Slides before the first `data-level` (slides 2–9) show an empty bar (no level yet set)
+- A `.level-badge` is JS-injected on the `<h1>` of slides that carry `data-level` — do NOT hardcode in HTML

-| Section | Range | Total Weight |
-|---------|-------|-------------|
-| Part 0: Introduction | Slides 1-4 | 0% |
-| Part 1: Prerequisites | Slides 5-9 | 0% |
-| Part 2: Better Prompting | Slides 10-17 | 20% |
-| Part 3: Project Memory | Slides 18-24 | 20% |
-| Part 4: Structured Workflows | Slides 25-28 | 10% |
-| Part 5: Domain Knowledge | Slides 29-33 | 15% |
-| Part 6: Agentic Engineering | Slides 34-46 | 35% |
-| Appendix | Slides 47+ | 0% |
+### Level Transitions by Section
+
+| Section | Slide Range | data-level | Bar Height |
+|---------|-------------|------------|------------|
+| Part 0: Introduction | Slides 1-4 | (none) | hidden / empty |
+| Part 1: Prerequisites | Slides 5-9 | (none) | empty |
+| Part 2: Better Prompting | Slides 10-17 | `low` | 25% |
+| Part 3: Project Memory | Slides 18-24 | `medium` | 50% |
+| Part 4: Structured Workflows | Slides 25-28 | (inherits medium) | 50% |
+| Part 5: Domain Knowledge | Slides 29-33 | `high` | 75% |
+| Part 6: Agentic Engineering | Slides 34-46 | `high` | 75% |
+| Appendix | Slides 47+ | (inherits high) | 75% |

 ## Navigation System

@@ -73,12 +76,14 @@ After adding, removing, or reordering slides:

 ## Section Divider Format

-Section dividers use the `section-slide` class and show the current journey percentage:
+Section dividers use the `section-slide` class. Level-transition section dividers carry `data-level` and show the level name in the description:

 ```html
-<div class="slide section-slide" data-slide="10">
+<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
-    <p class="section-desc">Journey: 0% — effective prompting for real results.</p>
+    <p class="section-desc">Level: Low — effective prompting for real results.</p>
 </div>
 ```
+
+The JS will inject a `.level-badge` (e.g., "→ Low") into the `<h1>` at runtime when the level transitions — do not add these manually in HTML.
@@ -5,16 +5,29 @@ description: The conceptual framework behind the presentation — what "Vibe Cod

 # The "Vibe Coding to Agentic Engineering" Framework

-This skill teaches the **conceptual model** behind the presentation. Every slide, section, and weight exists to tell a single story: how a developer incrementally moves from unstructured "vibe coding" (0%) to fully agentic engineering (100%).
+This skill teaches the **conceptual model** behind the presentation. Every slide and section exists to tell a single story: how a developer incrementally moves from unstructured "vibe coding" (Low level) to high-level agentic engineering (High level).

 ## Core Concept

-**Vibe Coding (0%)** is when a developer uses Claude Code with no structure — no project context, no conventions, no reusable knowledge. Every prompt is a coin flip. Claude might create random endpoints, ignore existing patterns, skip tests, and produce inconsistent code. The codebase drifts toward entropy with every interaction.
+**Vibe Coding (Low level)** is when a developer uses Claude Code with no structure — no project context, no conventions, no reusable knowledge. Every prompt is a coin flip. Claude might create random endpoints, ignore existing patterns, skip tests, and produce inconsistent code. The codebase drifts toward entropy with every interaction.

-**Agentic Engineering (100%)** is when Claude Code operates as a fully configured engineering system. It knows the project architecture (CLAUDE.md), follows scoped conventions (Rules), loads domain expertise on demand (Skills), delegates to specialized workers (Agents), orchestrates multi-step workflows (Commands), automates lifecycle events (Hooks), and connects to external tools (MCP Servers). Every prompt produces consistent, tested, production-quality code.
+**Agentic Engineering (High level)** is when Claude Code operates as a fully configured engineering system. It knows the project architecture (CLAUDE.md), follows scoped conventions (Rules), loads domain expertise on demand (Skills), delegates to specialized workers (Agents), orchestrates multi-step workflows (Commands), automates lifecycle events (Hooks), and connects to external tools (MCP Servers). Every prompt produces consistent, tested, production-quality code.

 The journey between these two extremes is **incremental and cumulative**. Each best practice builds on the previous ones, and the presentation teaches them in the order a developer should adopt them.

+## The 4-Level Journey System
+
+The presentation uses a 4-level scoring system instead of a percentage bar:
+
+| Level | Order | Color | Journey Bar Height | Description |
+|-------|-------|-------|--------------------|-------------|
+| Low | 1 | Red/orange (`hsl(0, 70%, 45%)`) | 25% | Vibe coding territory — no structure |
+| Medium | 2 | Yellow (`hsl(40, 70%, 45%)`) | 50% | Structured workflows, some automation |
+| High | 3 | Light green (`hsl(80, 70%, 45%)`) | 75% | Domain knowledge, skills, custom agents |
+| Pro | 4 | Deep green (`hsl(120, 70%, 45%)`) | 100% | Full agentic engineering, multi-agent teams |
+
+The journey bar is hidden on slide 1 (title slide) and appears from slide 2 onward. Levels are set via `data-level` attributes on key transition slides and inherited by subsequent slides until the next level change. A `.level-badge` is JS-injected on the slide's `h1` when the level changes (do not hardcode these in HTML).
+
 ## The Running Example: TodoApp Monorepo

 Every technique is demonstrated on a realistic full-stack project. The presentation shows the transformation from a plain project (vibe coding) to one with full Claude Code configuration (agentic engineering):
@@ -73,50 +86,50 @@ The presentation follows a deliberate pedagogical sequence. Each section unlocks
 - No weight because knowing how to install a tool doesn't improve code quality
 - The "first session" IS vibe coding — this is intentional, so the developer experiences the 0% state firsthand

-### Part 2: Better Prompting (Slides 10–17, journey 0% → 20%)
+### Part 2: Better Prompting (Slides 10–17, Level: Low)
 **Purpose:** The first real improvement. Better inputs produce better outputs, even without any project configuration.
- **Good vs Bad Prompts (+5%):** Specific, scoped prompts vs vague requests. The simplest possible improvement.
- **Providing Context (+5%):** Using `@files` to give Claude the code it needs. Reduces hallucination immediately.
- **Context Window & /compact (+5%):** Understanding the finite context window prevents degraded responses in long sessions.
- **Plan Mode (+5%):** `/plan` forces thinking before coding. Prevents wasted effort on wrong approaches.
+- **Good vs Bad Prompts:** Specific, scoped prompts vs vague requests. The simplest possible improvement.
+- **Providing Context:** Using `@files` to give Claude the code it needs. Reduces hallucination immediately.
+- **Context Window & /compact:** Understanding the finite context window prevents degraded responses in long sessions.
+- **Plan Mode:** `/plan` forces thinking before coding. Prevents wasted effort on wrong approaches.

-**Why 20% total:** Prompting is foundational but limited. It improves individual interactions but doesn't create lasting project knowledge. Each session starts from zero.
+**Why Low level:** Prompting is foundational but limited. It improves individual interactions but doesn't create lasting project knowledge. Each session starts from zero.

-### Part 3: Project Memory (Slides 18–24, journey 20% → 40%)
+### Part 3: Project Memory (Slides 18–24, Level: Medium)
 **Purpose:** The leap from session-level to project-level knowledge. Claude now remembers across sessions.
- **CLAUDE.md & /init (+5%):** The project's "README for Claude." Establishes architecture, tech stack, and conventions. This is the single most impactful file.
- **What to Include (+5%):** Practical guidance on writing effective CLAUDE.md content (keep under 150 lines, focus on what Claude needs to know).
- **Rules (+10%):** Path-scoped conventions in `.claude/rules/`. This gets **double weight** because rules are a multiplier — they apply automatically to every matching file, enforcing consistency without developer effort. A single `backend-testing.md` rule ensures every test follows the same pattern forever.
+- **CLAUDE.md & /init:** The project's "README for Claude." Establishes architecture, tech stack, and conventions. This is the single most impactful file.
+- **What to Include:** Practical guidance on writing effective CLAUDE.md content (keep under 150 lines, focus on what Claude needs to know).
+- **Rules:** Path-scoped conventions in `.claude/rules/`. Rules are a multiplier — they apply automatically to every matching file, enforcing consistency without developer effort. A single `backend-testing.md` rule ensures every test follows the same pattern forever.

-**Why 20% total:** Project memory transforms Claude from a stateless tool into a context-aware collaborator. But knowledge alone doesn't create workflows.
+**Why Medium level:** Project memory transforms Claude from a stateless tool into a context-aware collaborator. But knowledge alone doesn't create workflows.

-### Part 4: Structured Workflows (Slides 25–28, journey 40% → 50%)
+### Part 4: Structured Workflows (Slides 25–28, Level: Medium)
 **Purpose:** Systematic approaches that prevent wasted effort and improve execution quality.
- **Task Lists (+5%):** Breaking complex work into trackable steps. Prevents scope drift and ensures completeness.
- **Model Selection (+5%):** Choosing the right model (Opus for architecture, Sonnet for implementation, Haiku for quick tasks) optimizes cost and quality.
+- **Task Lists:** Breaking complex work into trackable steps. Prevents scope drift and ensures completeness.
+- **Model Selection:** Choosing the right model (Opus for architecture, Sonnet for implementation, Haiku for quick tasks) optimizes cost and quality.

-**Why 10% total:** Workflows are important but relatively simple concepts. They're enablers for the more powerful systems that follow.
+**Why still Medium level:** Workflows are important but relatively simple concepts. They build on Part 3's project memory and use it more systematically. The step up to High comes with domain knowledge.

-### Part 5: Domain Knowledge (Slides 29–33, journey 50% → 65%)
+### Part 5: Domain Knowledge (Slides 29–33, Level: High)
 **Purpose:** Reusable, on-demand expertise. Skills are the bridge between static memory (CLAUDE.md/Rules) and dynamic agents.
- **What Are Skills (+5%):** Skills as packaged domain knowledge that Claude loads when relevant. The concept of progressive disclosure.
- **Creating Skills (+5%):** Hands-on: building a `frontend-conventions` skill for the TodoApp that teaches Tailwind tokens, component patterns, and sidebar integration.
- **Skill Frontmatter & Invocation (+5%):** The technical details: YAML frontmatter, manual vs auto-discovery invocation, the `context: fork` option.
+- **What Are Skills:** Skills as packaged domain knowledge that Claude loads when relevant. The concept of progressive disclosure.
+- **Creating Skills:** Hands-on: building a `frontend-conventions` skill for the TodoApp that teaches Tailwind tokens, component patterns, and sidebar integration.
+- **Skill Frontmatter & Invocation:** The technical details: YAML frontmatter, manual vs auto-discovery invocation, the `context: fork` option.

-**Why 15% total:** Skills are the first "multiplier" concept — one skill definition improves every future interaction in its domain. But skills are passive knowledge; they need agents to become active.
+**Why High level:** Skills are the first "multiplier" concept — one skill definition improves every future interaction in its domain. But skills are passive knowledge; they need agents to become active.

-### Part 6: Agentic Engineering (Slides 34–46, journey 65% → 100%)
-**Purpose:** The destination. Autonomous, specialized agents that coordinate to build features end-to-end.
- **What Are Agents (+5%):** The concept of specialized subagents with constrained tools and preloaded skills.
- **Frontend Engineer Agent (+5%):** A concrete agent that uses the TodoApp's frontend conventions, adds routes to sidebar, follows design tokens. Before/after comparison shows the transformation.
- **Backend Engineer Agent (+5%):** Parallel agent for the backend — follows FastAPI route patterns, SQLAlchemy models, writes tests matching existing style.
- **Commands & Orchestration (+10%):** Double weight because commands are the **capstone pattern**: Command → Agent → Skills. A single `/add-feature` command coordinates frontend + backend agents, each with their own skills, to deliver a complete feature. This is the architectural pinnacle.
- **Hooks & MCP (+5%):** Lifecycle automation (pre-commit checks, sound notifications) and external tool integration. The final automation layer.
- **Command → Agent → Skills (+5%):** The full architecture diagram. Shows how all pieces connect: commands invoke agents, agents load skills, skills provide knowledge. This is the "100% understanding" slide.
+### Part 6: Agentic Engineering (Slides 34–46, Level: High)
+**Purpose:** The destination covered in this presentation. Autonomous, specialized agents that coordinate to build features end-to-end.
+- **What Are Agents:** The concept of specialized subagents with constrained tools and preloaded skills.
+- **Frontend Engineer Agent:** A concrete agent that uses the TodoApp's frontend conventions, adds routes to sidebar, follows design tokens. Before/after comparison shows the transformation.
+- **Backend Engineer Agent:** Parallel agent for the backend — follows FastAPI route patterns, SQLAlchemy models, writes tests matching existing style.
+- **Commands & Orchestration:** The capstone pattern: Command → Agent → Skills. A single `/add-feature` command coordinates frontend + backend agents, each with their own skills, to deliver a complete feature. This is the architectural pinnacle.
+- **Hooks & MCP:** Lifecycle automation (pre-commit checks, sound notifications) and external tool integration. The final automation layer.
+- **Command → Agent → Skills:** The full architecture diagram. Shows how all pieces connect: commands invoke agents, agents load skills, skills provide knowledge. This is the "High level" understanding slide.

-**Why 35% total:** This section is the entire point of the presentation. Everything before it was building toward this. The heavy weighting (especially 10% on Commands) reflects that orchestration is the highest-value capability.
+**Why High level:** This section covers the highest-value practices taught in this presentation. Everything before it was building toward this. Orchestration and agentic workflows represent the ceiling of what this course covers — full Pro (multi-agent teams, advanced orchestration patterns) is beyond this presentation's scope.

-### The 100% Slide (Slide 44)
+### The High Level Slide (Slide 44)
 The celebration moment. Shows the complete TodoApp configuration:
 - CLAUDE.md for project context
 - Rules for path-scoped conventions
@@ -133,36 +146,25 @@ The celebration moment. Shows the complete TodoApp configuration:

 When creating or modifying slides, consider:

-1. **Where does this concept sit on the journey?** A slide about "better error messages in prompts" belongs in Part 2 (prompting). A slide about "agent memory scopes" belongs in Part 6 (agentic).
+1. **Where does this concept sit on the journey?** A slide about "better error messages in prompts" belongs in Part 2 (prompting, Low level). A slide about "agent memory scopes" belongs in Part 6 (agentic, High level).

-2. **What's the before/after?** Every weighted slide should implicitly or explicitly show the contrast: what happens at 0% (vibe coding) vs what happens with this technique. Use the TodoApp to make it concrete.
+2. **What's the before/after?** Every significant slide should implicitly or explicitly show the contrast: what happens at Low level (vibe coding) vs what happens with this technique. Use the TodoApp to make it concrete.

-3. **Does the weight feel right?** Foundational but simple concepts get +5%. Multiplier concepts that affect everything downstream get +10%. The total must stay at 100%.
+3. **Does the level assignment feel right?** Level transitions happen at Part section boundaries. Individual slides within a section inherit the section's level.

 4. **Does it build on what came before?** Skills assume the developer already knows about CLAUDE.md and Rules. Agents assume they know about Skills. Commands assume they know about Agents. Never reference a concept before its section.

 5. **Use the TodoApp.** Abstract explanations lose the audience. Show the actual `routes/todos.py` code, the actual `Sidebar.tsx` component, the actual `CLAUDE.md` content. The running example is what makes the framework tangible.

-## Weight Reference Table
+## Level Transition Reference Table

-| # | Slide Name | Section | Weight |
-|---|-----------|---------|--------|
-| 12 | Good vs Bad Prompts | Part 2: Better Prompting | +5% |
-| 13 | Providing Context | Part 2: Better Prompting | +5% |
-| 14 | Context Window & /compact | Part 2: Better Prompting | +5% |
-| 15 | /plan — Plan Before Code | Part 2: Better Prompting | +5% |
-| 19 | CLAUDE.md & /init | Part 3: Project Memory | +5% |
-| 20 | What to Include in CLAUDE.md | Part 3: Project Memory | +5% |
-| 22 | Rules (.claude/rules/) | Part 3: Project Memory | +10% |
-| 26 | Task Lists | Part 4: Structured Workflows | +5% |
-| 27 | /model — Model Selection | Part 4: Structured Workflows | +5% |
-| 30 | What Are Skills? | Part 5: Domain Knowledge | +5% |
-| 31 | Creating Skills: TodoApp Frontend | Part 5: Domain Knowledge | +5% |
-| 32 | Skill Frontmatter & Invocation | Part 5: Domain Knowledge | +5% |
-| 35 | What Are Agents? | Part 6: Agentic Engineering | +5% |
-| 36 | Frontend Engineer Agent | Part 6: Agentic Engineering | +5% |
-| 37 | Backend Engineer Agent | Part 6: Agentic Engineering | +5% |
-| 41 | Commands & Orchestration | Part 6: Agentic Engineering | +10% |
-| 42 | Hooks & MCP Servers | Part 6: Agentic Engineering | +5% |
-| 43 | Command → Agent → Skills | Part 6: Agentic Engineering | +5% |
-| | | **Total** | **100%** |
+| Slide | Slide Name | data-level | Level Label |
+|-------|-----------|------------|-------------|
+| 10 | Better Prompting (section divider) | `data-level="low"` | Low |
+| 18 | Project Memory (section divider) | `data-level="medium"` | Medium |
+| 29 | Domain Knowledge (section divider) | `data-level="high"` | High |
+| 34 | Agentic Engineering (section divider) | `data-level="high"` | High |
+
+All other slides inherit the level from the last `data-level` attribute set before them. Slides 1–9 (Intro + Prerequisites) have no level and keep the bar hidden until slide 2 shows "Low" (slides 2–9 are below the first level transition at slide 10, so the bar shows empty/zero until slide 10).
+
+**Note:** The main presentation (`presentation/index.html`) caps at **High** level — `data-level="pro"` is not used. The Pro tick mark remains visible on the journey bar as the theoretical ceiling, but the fill never reaches it. The video presentation (`1-video-workflow.html`) caps at **Medium** level.
@@ -1,7 +1,7 @@
 # Weather Result

 ## Temperature
-26.8°C
+30.8°C

 ## Location
 Dubai, UAE
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
  <rect width="300" height="160" rx="12" fill="#1a1a2e"/>
  <text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: Celsius</text>
-  <text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">26.8°C</text>
+  <text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">30.8°C</text>
  <text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
 </svg>
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="../!/claude-jumping.svg">
    <title>Claude Code — From Vibe Coding to Agentic Engineering</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -76,13 +77,15 @@
        /* Journey Bar — vertical, right side below mascot */
        .journey-bar { position: fixed; top: 95px; right: 62px; display: flex; flex-direction: column; align-items: center; z-index: 99; gap: 6px; }
        .journey-bar.hidden { display: none; }
-        .journey-label { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
-        .journey-label-top { color: #2e7d32; }
-        .journey-label-bottom { color: #c62828; }
-        .journey-track { width: 20px; height: 280px; background: #e5e5e5; border-radius: 10px; overflow: hidden; position: relative; }
+        .journey-track-wrap { position: relative; display: flex; align-items: stretch; gap: 4px; }
+        .journey-track { width: 20px; height: 280px; background: #e5e5e5; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; }
        .journey-fill { position: absolute; bottom: 0; width: 100%; border-radius: 10px; transition: height 0.4s ease, background-color 0.4s ease; height: 0%; }
-        .journey-percent { font-weight: 700; font-size: 0.75rem; color: #333; }
-        .weight-badge { display: inline-block; background: #e8f5e9; color: #2e7d32; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: 12px; vertical-align: middle; }
+        .journey-level-label { font-size: 0.65rem; color: #777; font-weight: 400; }
+        /* Level tick marks beside the journey track */
+        .journey-ticks { display: flex; flex-direction: column; justify-content: space-between; height: 280px; padding: 2px 0; }
+        .journey-tick { font-size: 0.45rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #999; white-space: nowrap; line-height: 1; }
+        /* Level badge shown on level-transition slides */
+        .level-badge { display: inline-block; background: #e8f5e9; color: #2e7d32; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: 12px; vertical-align: middle; }
        /* Celebration slide */
        .celebration { font-size: 4rem; margin-bottom: 24px; }
    </style>
@@ -90,10 +93,16 @@
 <body>
    <div class="progress" id="progress"></div>
    <div class="journey-bar hidden" id="journeyBar">
-        <span class="journey-label journey-label-top">Agentic</span>
-        <div class="journey-track"><div class="journey-fill" id="journeyFill"></div></div>
-        <span class="journey-label journey-label-bottom">Vibe</span>
-        <span class="journey-percent" id="journeyPercent">0%</span>
+        <div class="journey-track-wrap">
+            <div class="journey-track"><div class="journey-fill" id="journeyFill"></div></div>
+            <div class="journey-ticks">
+                <span class="journey-tick">Pro</span>
+                <span class="journey-tick">High</span>
+                <span class="journey-tick">Med</span>
+                <span class="journey-tick">Low</span>
+            </div>
+        </div>
+        <span class="journey-level-label" id="journeyLevelLabel">Current = <strong>Low</strong></span>
    </div>

    <!-- ============================================================ -->
@@ -187,7 +196,7 @@ todoapp/
        <p>This is where everyone starts. The question is: how fast can you move beyond it?</p>
        <div class="two-col">
            <div class="col-card bad">
-                <h4>What Happens (0%)</h4>
+                <h4>What Happens (Low Level)</h4>
                <p><code>&gt; add a notes feature</code></p>
                <p>Claude creates <code>/api/notes</code> with a random schema</p>
                <p>Frontend gets a standalone page with no sidebar nav</p>
@@ -195,7 +204,7 @@ todoapp/
                <p style="margin-top: 16px; color: #c62828;">Every new feature is a coin flip. Code entropy increases with every prompt.</p>
            </div>
            <div class="col-card good">
-                <h4>What We Want (100%)</h4>
+                <h4>What We Want (High Level)</h4>
                <p>Claude knows the TodoApp architecture</p>
                <p>New routes follow existing patterns in <code>routes/todos.py</code></p>
                <p>Frontend uses <code>Sidebar.tsx</code> nav and Tailwind tokens</p>
@@ -209,16 +218,16 @@ todoapp/
    <div class="slide" data-slide="4">
        <h1>The Journey</h1>
        <div class="trigger-box">
-            <h4>From 0% to 100%</h4>
+            <h4>From Low to High</h4>
            <p>Each section adds techniques that move you from vibe coding toward fully agentic engineering.</p>
        </div>
        <div class="toc-list" style="margin-top: 24px;">
            <div class="toc-item" onclick="goToSlide(5)"><span class="toc-number">1</span><span class="toc-name">Prerequisites</span></div>
-            <div class="toc-item" onclick="goToSlide(10)"><span class="toc-number">2</span><span class="toc-name">Better Prompting (0%&rarr;20%)</span></div>
-            <div class="toc-item" onclick="goToSlide(18)"><span class="toc-number">3</span><span class="toc-name">Project Memory (20%&rarr;40%)</span></div>
-            <div class="toc-item" onclick="goToSlide(25)"><span class="toc-number">4</span><span class="toc-name">Structured Workflows (40%&rarr;50%)</span></div>
-            <div class="toc-item" onclick="goToSlide(29)"><span class="toc-number">5</span><span class="toc-name">Domain Knowledge (50%&rarr;65%)</span></div>
-            <div class="toc-item" onclick="goToSlide(34)"><span class="toc-number">6</span><span class="toc-name">Agentic Engineering (65%&rarr;100%)</span></div>
+            <div class="toc-item" onclick="goToSlide(10)"><span class="toc-number">2</span><span class="toc-name">Better Prompting &mdash; Low</span></div>
+            <div class="toc-item" onclick="goToSlide(18)"><span class="toc-number">3</span><span class="toc-name">Project Memory &mdash; Medium</span></div>
+            <div class="toc-item" onclick="goToSlide(25)"><span class="toc-number">4</span><span class="toc-name">Structured Workflows &mdash; Medium</span></div>
+            <div class="toc-item" onclick="goToSlide(29)"><span class="toc-number">5</span><span class="toc-name">Domain Knowledge &mdash; High</span></div>
+            <div class="toc-item" onclick="goToSlide(34)"><span class="toc-number">6</span><span class="toc-name">Agentic Engineering &mdash; High</span></div>
        </div>
    </div>

@@ -347,7 +356,7 @@ todoapp/
            <p>Claude Code scans your project structure, reads CLAUDE.md (if it exists), and opens an interactive REPL where you can type prompts.</p>
        </div>
        <h3>This IS Vibe Coding</h3>
-        <p>Right now, with no CLAUDE.md, no skills, no agents — you're at <strong>0%</strong>. Claude will guess at everything. That's okay. We'll fix it step by step.</p>
+        <p>Right now, with no CLAUDE.md, no skills, no agents — you're at the <strong>Low</strong> level. Claude will guess at everything. That's okay. We'll fix it step by step.</p>
    </div>

    <!-- Slide 9: The Interface -->
@@ -374,10 +383,10 @@ todoapp/
    <!-- ============================================================ -->

    <!-- Slide 10: Section Divider - Better Prompting -->
-    <div class="slide section-slide" data-slide="10">
+    <div class="slide section-slide" data-slide="10" data-level="low">
        <p class="section-number">Part 2</p>
        <h1>Better Prompting</h1>
-        <p class="section-desc">Journey: 0% &mdash; effective prompting that produces real, production-quality results.</p>
+        <p class="section-desc">Level: Low &mdash; effective prompting that produces real, production-quality results.</p>
    </div>

    <!-- Slide 11: Your First Prompt -->
@@ -397,8 +406,8 @@ todoapp/
        </div>
    </div>

-    <!-- Slide 12: Good vs Bad Prompts (+5%) -->
-    <div class="slide" data-slide="12" data-weight="5">
+    <!-- Slide 12: Good vs Bad Prompts -->
+    <div class="slide" data-slide="12">
        <h1>Good vs Bad Prompts</h1>
        <p>The difference between vibe coding and professional usage &mdash; shown on our TodoApp:</p>
        <div class="two-col">
@@ -420,8 +429,8 @@ todoapp/
        </div>
    </div>

-    <!-- Slide 13: Providing Context (+5%) -->
-    <div class="slide" data-slide="13" data-weight="5">
+    <!-- Slide 13: Providing Context -->
+    <div class="slide" data-slide="13">
        <h1>Providing Context</h1>
        <div class="trigger-box">
            <h4>Key Rule</h4>
@@ -441,8 +450,8 @@ todoapp/
        </div>
    </div>

-    <!-- Slide 14: Context Window & /compact (+5%) [MERGED] -->
-    <div class="slide" data-slide="14" data-weight="5">
+    <!-- Slide 14: Context Window & /compact -->
+    <div class="slide" data-slide="14">
        <h1>Context Window &amp; /compact</h1>
        <div class="trigger-box">
            <h4>Key Concept</h4>
@@ -468,8 +477,8 @@ todoapp/
        </div>
    </div>

-    <!-- Slide 15: /plan mode (+5%) [MERGED with Why Plan First] -->
-    <div class="slide" data-slide="15" data-weight="5">
+    <!-- Slide 15: /plan mode -->
+    <div class="slide" data-slide="15">
        <h1>/plan &mdash; Plan Before Code</h1>
        <div class="how-to-trigger">
            <h4>Try This</h4>
@@ -537,14 +546,14 @@ todoapp/
    <!-- ============================================================ -->

    <!-- Slide 18: Section Divider - Project Memory -->
-    <div class="slide section-slide" data-slide="18">
+    <div class="slide section-slide" data-slide="18" data-level="medium">
        <p class="section-number">Part 3</p>
        <h1>Project Memory</h1>
-        <p class="section-desc">Journey: 20% &mdash; make Claude remember your project, conventions, and preferences.</p>
+        <p class="section-desc">Level: Medium &mdash; make Claude remember your project, conventions, and preferences.</p>
    </div>

-    <!-- Slide 19: CLAUDE.md & /init (+5%) [MERGED] -->
-    <div class="slide" data-slide="19" data-weight="5">
+    <!-- Slide 19: CLAUDE.md & /init -->
+    <div class="slide" data-slide="19">
        <h1>CLAUDE.md &amp; /init</h1>
        <div class="trigger-box">
            <h4>Key Concept</h4>
@@ -577,8 +586,8 @@ TodoApp monorepo: FastAPI backend + Next.js frontend.
 - Always add tests for new endpoints</div>
    </div>

-    <!-- Slide 20: What to Include in CLAUDE.md (+5%) -->
-    <div class="slide" data-slide="20" data-weight="5">
+    <!-- Slide 20: What to Include in CLAUDE.md -->
+    <div class="slide" data-slide="20">
        <h1>What to Include in CLAUDE.md</h1>
        <div class="two-col">
            <div class="col-card good">
@@ -620,8 +629,8 @@ TodoApp monorepo: FastAPI backend + Next.js frontend.
        </div>
    </div>

-    <!-- Slide 22: Rules (+10%) -->
-    <div class="slide" data-slide="22" data-weight="10">
+    <!-- Slide 22: Rules -->
+    <div class="slide" data-slide="22">
        <h1>Rules (.claude/rules/)</h1>
        <div class="trigger-box">
            <h4>What Are Rules?</h4>
@@ -683,11 +692,11 @@ When writing tests for the backend:
    <div class="slide section-slide" data-slide="25">
        <p class="section-number">Part 4</p>
        <h1>Structured Workflows</h1>
-        <p class="section-desc">Journey: 40% &mdash; systematic approaches that prevent wasted effort.</p>
+        <p class="section-desc">Level: Medium &mdash; systematic approaches that prevent wasted effort.</p>
    </div>

-    <!-- Slide 26: Task Lists (+5%) -->
-    <div class="slide" data-slide="26" data-weight="5">
+    <!-- Slide 26: Task Lists -->
+    <div class="slide" data-slide="26">
        <h1>Task Lists</h1>
        <p>For complex tasks, Claude creates a <strong>task list</strong> to track progress:</p>
        <div class="code-block"><span class="cmd">&gt;</span> Add user authentication to the TodoApp:
@@ -703,8 +712,8 @@ When writing tests for the backend:
        </div>
    </div>

-    <!-- Slide 27: /model Selection (+5%) -->
-    <div class="slide" data-slide="27" data-weight="5">
+    <!-- Slide 27: /model Selection -->
+    <div class="slide" data-slide="27">
        <h1>/model &mdash; Model Selection</h1>
        <div class="how-to-trigger">
            <h4>Try This</h4>
@@ -739,14 +748,14 @@ When writing tests for the backend:
    <!-- ============================================================ -->

    <!-- Slide 29: Section Divider - Domain Knowledge -->
-    <div class="slide section-slide" data-slide="29">
+    <div class="slide section-slide" data-slide="29" data-level="high">
        <p class="section-number">Part 5</p>
        <h1>Domain Knowledge</h1>
-        <p class="section-desc">Journey: 50% &mdash; reusable knowledge that Claude loads on-demand.</p>
+        <p class="section-desc">Level: High &mdash; reusable knowledge that Claude loads on-demand.</p>
    </div>

-    <!-- Slide 30: What Are Skills (+5%) -->
-    <div class="slide" data-slide="30" data-weight="5">
+    <!-- Slide 30: What Are Skills -->
+    <div class="slide" data-slide="30">
        <h1>What Are Skills?</h1>
        <div class="trigger-box">
            <h4>Key Concept</h4>
@@ -764,8 +773,8 @@ When writing tests for the backend:
        </div>
    </div>

-    <!-- Slide 31: Creating Skills - TodoApp (+5%) -->
-    <div class="slide" data-slide="31" data-weight="5">
+    <!-- Slide 31: Creating Skills - TodoApp -->
+    <div class="slide" data-slide="31">
        <h1>Creating Skills: TodoApp Frontend</h1>
        <h3>Frontend Conventions Skill</h3>
        <div class="code-block"><span class="comment"># .claude/skills/frontend-conventions/SKILL.md</span>
@@ -795,8 +804,8 @@ When creating or modifying frontend components:
 - Base URL: process.env.NEXT_PUBLIC_API_URL</div>
    </div>

-    <!-- Slide 32: Skill Frontmatter & Invocation (+5%) -->
-    <div class="slide" data-slide="32" data-weight="5">
+    <!-- Slide 32: Skill Frontmatter & Invocation -->
+    <div class="slide" data-slide="32">
        <h1>Skill Frontmatter &amp; Invocation</h1>
        <h3>Frontmatter Options</h3>
        <div class="use-cases">
@@ -849,18 +858,18 @@ When creating or modifying frontend components:
    </div>

    <!-- ============================================================ -->
-    <!-- PART 6: AGENTIC ENGINEERING (Slides 34-46, 65% -> 100%)     -->
+    <!-- PART 6: AGENTIC ENGINEERING (Slides 34-46, 65% -> 75%)      -->
    <!-- ============================================================ -->

    <!-- Slide 34: Section Divider - Agentic Engineering -->
-    <div class="slide section-slide" data-slide="34">
+    <div class="slide section-slide" data-slide="34" data-level="high">
        <p class="section-number">Part 6</p>
        <h1>Agentic Engineering</h1>
-        <p class="section-desc">Journey: 65% &mdash; custom agents that know your codebase and follow your patterns.</p>
+        <p class="section-desc">Level: High &mdash; custom agents that know your codebase and follow your patterns.</p>
    </div>

-    <!-- Slide 35: What Are Agents (+5%) -->
-    <div class="slide" data-slide="35" data-weight="5">
+    <!-- Slide 35: What Are Agents -->
+    <div class="slide" data-slide="35">
        <h1>What Are Agents?</h1>
        <div class="trigger-box">
            <h4>Key Concept</h4>
@@ -884,8 +893,8 @@ When creating or modifying frontend components:
        </div>
    </div>

-    <!-- Slide 36: Frontend Engineer Agent (+5%) -->
-    <div class="slide" data-slide="36" data-weight="5">
+    <!-- Slide 36: Frontend Engineer Agent -->
+    <div class="slide" data-slide="36">
        <h1>Frontend Engineer Agent</h1>
        <div class="two-col">
            <div class="col-card bad">
@@ -922,8 +931,8 @@ Use the existing API client in lib/api.ts.
 Follow TodoList.tsx as your reference component.</div>
    </div>

-    <!-- Slide 37: Backend Engineer Agent (+5%) -->
-    <div class="slide" data-slide="37" data-weight="5">
+    <!-- Slide 37: Backend Engineer Agent -->
+    <div class="slide" data-slide="37">
        <h1>Backend Engineer Agent</h1>
        <div class="two-col">
            <div class="col-card bad">
@@ -1032,8 +1041,8 @@ Task(
        </p>
    </div>

-    <!-- Slide 41: Commands & Orchestration (+10%) -->
-    <div class="slide" data-slide="41" data-weight="10">
+    <!-- Slide 41: Commands & Orchestration -->
+    <div class="slide" data-slide="41">
        <h1>Commands &amp; Orchestration</h1>
        <p>Commands are the entry points for complex workflows &mdash; the <strong>Command &rarr; Agent &rarr; Skills</strong> pattern:</p>
        <div class="code-block"><span class="comment"># .claude/commands/add-feature.md</span>
@@ -1057,8 +1066,8 @@ Task(
        </div>
    </div>

-    <!-- Slide 42: Hooks + MCP (+5%) [MERGED] -->
-    <div class="slide" data-slide="42" data-weight="5">
+    <!-- Slide 42: Hooks + MCP -->
+    <div class="slide" data-slide="42">
        <h1>Hooks &amp; MCP Servers</h1>
        <div class="two-col">
            <div class="col-card">
@@ -1081,8 +1090,8 @@ Task(
        </div>
    </div>

-    <!-- Slide 43: Full Architecture (+5%) -->
-    <div class="slide" data-slide="43" data-weight="5">
+    <!-- Slide 43: Full Architecture -->
+    <div class="slide" data-slide="43">
        <h1>Command &rarr; Agent &rarr; Skills</h1>
        <p>The full architecture pattern for complex workflows:</p>
        <div class="code-block"><span class="comment">+-----------------------------------------------+</span>
@@ -1103,10 +1112,10 @@ Task(
        </div>
    </div>

-    <!-- Slide 44: The 100% Slide -->
+    <!-- Slide 44: The High Level Slide -->
    <div class="slide section-slide" data-slide="44">
        <p class="celebration">&#127881;</p>
-        <h1>100% &mdash; Agentic Engineering</h1>
+        <h1>High &mdash; Agentic Engineering</h1>
        <p class="section-desc">Your TodoApp now has: CLAUDE.md for project context, Rules for path-scoped conventions, Skills for domain knowledge, Agents for consistent execution, Commands for orchestrated workflows, Hooks for lifecycle automation, and MCP servers for external tools.</p>
    </div>

@@ -1688,44 +1697,58 @@ managed-settings.json              <span class="comment"># Organization policy (
        let currentSlide = 1;
        const slides = document.querySelectorAll('[data-slide]');
        const totalSlides = slides.length;
-        // Build weight map and cumulative weights
-        const SLIDE_WEIGHTS = {};
-        const cumulativeWeights = [];
-        let runningSum = 0;
+
+        // Level definitions (order 1=bottom, 4=top)
+        const LEVELS = {
+            'low':    { order: 1, color: 'hsl(0, 70%, 45%)',   height: '25%',  label: 'Low' },
+            'medium': { order: 2, color: 'hsl(40, 70%, 45%)',  height: '50%',  label: 'Medium' },
+            'high':   { order: 3, color: 'hsl(80, 70%, 45%)',  height: '75%',  label: 'High' },
+            'pro':    { order: 4, color: 'hsl(120, 70%, 45%)', height: '100%', label: 'Pro' }
+        };
+
+        // Build slide-to-level map: inherit level from previous data-level slide
+        const SLIDE_LEVELS = {};
+        let lastLevel = null;
        slides.forEach((s) => {
            const num = parseInt(s.dataset.slide);
-            const w = parseInt(s.dataset.weight || 0);
-            SLIDE_WEIGHTS[num] = w;
-            runningSum += w;
-            cumulativeWeights[num] = runningSum;
+            if (s.dataset.level) { lastLevel = s.dataset.level; }
+            SLIDE_LEVELS[num] = lastLevel;
        });
+
+        let prevDisplayedLevel = null;
+
        function updateJourneyBar(slideNum) {
            const bar = document.getElementById('journeyBar');
            const fill = document.getElementById('journeyFill');
-            const pct = document.getElementById('journeyPercent');
-            if (slideNum <= 1) { bar.classList.add('hidden'); return; }
+            const labelEl = document.getElementById('journeyLevelLabel');
+            if (slideNum <= 1) { bar.classList.add('hidden'); prevDisplayedLevel = null; return; }
            bar.classList.remove('hidden');
-            const cumPct = cumulativeWeights[slideNum] || 0;
-            fill.style.height = cumPct + '%';
-            // HSL hue: 0 (red) -> 120 (green) based on cumPct
-            const hue = Math.round((cumPct / 100) * 120);
-            fill.style.backgroundColor = `hsl(${hue}, 70%, 45%)`;
-            pct.textContent = cumPct + '%';
-            pct.style.color = `hsl(${hue}, 70%, 35%)`;
-            // Show weight badge on slide title if this slide has weight
-            document.querySelectorAll('.weight-badge').forEach(b => b.remove());
-            const weight = SLIDE_WEIGHTS[slideNum];
-            if (weight > 0) {
-                const slideEl = document.querySelector(`[data-slide="${slideNum}"]`);
-                const h1 = slideEl ? slideEl.querySelector('h1') : null;
+            const levelKey = SLIDE_LEVELS[slideNum];
+            if (!levelKey || !LEVELS[levelKey]) {
+                fill.style.height = '0%';
+                if (labelEl) { labelEl.innerHTML = ''; }
+                return;
+            }
+            const lvl = LEVELS[levelKey];
+            fill.style.height = lvl.height;
+            fill.style.backgroundColor = lvl.color;
+            if (labelEl) { labelEl.innerHTML = 'Current = <strong style="color:' + lvl.color + '">' + lvl.label + '</strong>'; }
+
+            // Show level badge when level changes
+            document.querySelectorAll('.level-badge').forEach(b => b.remove());
+            const slideEl = document.querySelector(`[data-slide="${slideNum}"]`);
+            if (slideEl && slideEl.dataset.level && slideEl.dataset.level !== prevDisplayedLevel) {
+                const h1 = slideEl.querySelector('h1');
                if (h1) {
                    const badge = document.createElement('span');
-                    badge.className = 'weight-badge';
-                    badge.textContent = '+' + weight + '%';
+                    badge.className = 'level-badge';
+                    badge.textContent = '\u2192 ' + lvl.label;
                    h1.appendChild(badge);
                }
            }
+            prevDisplayedLevel = levelKey;
        }
+
        function showSlide(n) {
            slides.forEach(s => s.classList.remove('active'));
            if (n > totalSlides) currentSlide = totalSlides;