Merge pull request #3 from shanraisshan/presentation-refactor

added vibe-to-agentic framework
2026-02-12 22:59:14 +05:00
parent 09518901b1 6262e6bdc7
commit 00612ea587
13 changed files with 1589 additions and 1043 deletions
@@ -0,0 +1,118 @@
+---
+name: presentation-curator
+description: PROACTIVELY use this agent whenever the user wants to update, modify, or fix the presentation slides, structure, styling, or weights
+tools: Read, Write, Edit, Grep, Glob
+model: sonnet
+color: magenta
+skills:
+  - presentation/vibe-to-agentic-framework
+  - presentation/presentation-structure
+  - presentation/presentation-styling
+---
+
+# Presentation Curator Agent
+
+You are a specialized agent for modifying the presentation at `presentation/index.html`.
+
+## Your Task
+
+Apply the requested changes to the presentation while maintaining structural integrity.
+
+## Workflow
+
+### 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 section structure (Parts 0-6 + Appendix)
+- How slide numbering works
+
+### Step 2: Apply Changes
+
+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%
+- **Styling changes**: Update CSS within the `<style>` block, matching existing patterns
+
+### Step 3: Match Styling (presentation-styling skill)
+
+Follow the presentation-styling skill to ensure:
+- New content uses the correct CSS classes
+- Code blocks use syntax highlighting spans
+- Layout components match existing patterns
+
+### Step 4: Verify Integrity
+
+After changes, verify:
+1. All `data-slide` attributes are sequential (1, 2, 3, ...)
+2. All `data-weight` values sum to exactly 100
+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`
+7. Agent identifiers are consistent across examples (use `frontend-engineer` / `backend-engineer`; do not introduce aliases like `frontend-eng`)
+8. Hook references remain canonical (`15 hook events`) in presentation-facing content
+9. Do not manually insert `.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)
+
+### Step 5: Self-Evolution (after every execution)
+
+After completing changes to the presentation, you MUST update your own knowledge to stay in sync. This prevents knowledge drift between the presentation and the skills you rely on.
+
+#### 5a. Update the Framework Skill
+
+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.
+- **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.
+
+#### 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.
+- **Section divider examples**: If section divider format changed, update the example HTML.
+
+#### 5c. Cross-Doc Consistency (when claims change)
+
+If your slide edits change canonical claims that are also documented elsewhere, sync these files in the same execution:
+
+- `reports/claude-settings.md` for settings precedence and hook counts
+- `.claude/hooks/HOOKS-README.md` for hook-event totals and names
+- `reports/claude-global-vs-project-settings.md` for settings precedence language
+
+#### 5d. Update This Agent (yourself)
+
+If you encountered an edge case, discovered a new pattern, or found that the workflow needed adjustment, append a brief note to the "Learnings" section below. This helps future invocations avoid the same issues.
+
+## Learnings
+
+_Findings from previous executions are recorded here. Add new entries as bullet points._
+
+- Hook-event references drifted across files. Treat `15 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.
+- Keep the framework skill name stable as `vibe-to-agentic-framework` to avoid broken skill references.
+
+## Critical Requirements
+
+1. **Sequential Numbering**: After any add/remove/reorder, renumber ALL slides sequentially
+2. **Weight Integrity**: Weighted slides must sum to exactly 100%
+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)
+
+## Output Summary
+
+After completing changes, report:
+- What slides were changed
+- Current total slide count
+- Current weight sum (should be 100%)
+- Any renumbering that occurred
@@ -1,17 +1,23 @@
 # HOOKS-README
 contains all the details, scripts, and instructions for the hooks

-## Hook Events Overview - [Official 9 Hooks](https://docs.claude.com/en/docs/claude-code/hooks-guide)
+## Hook Events Overview - [Official 15 Hooks](https://docs.claude.com/en/docs/claude-code/hooks-guide)
 Claude Code provides several hook events that run at different points in the workflow:
-1. PreToolUse: Runs before tool calls (can block them)
-2. PostToolUse: Runs after tool calls complete
-3. UserPromptSubmit: Runs when the user submits a prompt, before Claude processes it
-4. Notification: Runs when Claude Code sends notifications
-5. Stop: Runs when Claude Code finishes responding
-6. SubagentStop: Runs when subagent tasks complete
-7. PreCompact: Runs before Claude Code is about to run a compact operation
-8. SessionStart: Runs when Claude Code starts a new session or resumes an existing session
-9. SessionEnd: Runs when Claude Code session ends
+1. SessionStart: Runs when Claude Code starts a new session or resumes one
+2. SessionEnd: Runs when a Claude Code session ends
+3. UserPromptSubmit: Runs when the user submits a prompt
+4. PreToolUse: Runs before tool calls (can block them)
+5. PostToolUse: Runs after tool calls complete
+6. PostToolUseFailure: Runs after tool calls fail
+7. PermissionRequest: Runs when Claude asks for a permission decision
+8. Notification: Runs when Claude Code sends notifications
+9. Stop: Runs when Claude Code finishes responding
+10. SubagentStart: Runs when a subagent task begins
+11. SubagentStop: Runs when a subagent task completes
+12. PreCompact: Runs before Claude runs context compaction
+13. Setup: Runs during setup/maintenance workflows
+14. TeammateIdle: Runs when an Agent Team teammate goes idle
+15. TaskCompleted: Runs when a tracked task reaches completion

 ## Prerequisites

@@ -62,15 +68,22 @@ Edit `.claude/hooks/config/hooks-config.json` for team-wide defaults:

 ```json
 {
+  "disableSessionStartHook": false,
+  "disableSessionEndHook": false,
+  "disableUserPromptSubmitHook": false,
  "disablePreToolUseHook": false,
  "disablePostToolUseHook": false,
-  "disableUserPromptSubmitHook": false,
+  "disablePostToolUseFailureHook": false,
+  "disablePermissionRequestHook": false,
  "disableNotificationHook": false,
+  "disableSubagentStartHook": false,
  "disableStopHook": false,
  "disableSubagentStopHook": false,
  "disablePreCompactHook": false,
-  "disableSessionStartHook": false,
-  "disableSessionEndHook": false
+  "disableSetupHook": false,
+  "disableTeammateIdleHook": false,
+  "disableTaskCompletedHook": false,
+  "disableLogging": true
 }
 ```

@@ -87,8 +100,8 @@ Create or edit `.claude/hooks/config/hooks-config.local.json` for personal prefe

 In this example, only the PostToolUse and SessionStart hooks are overridden locally. All other hooks will use the shared configuration values.

-**Note:** Individual hook toggles are checked by the hook script (`.claude/hooks/scripts/hooks.py`). Local settings override shared settings, and if a hook is disabled, the script exits silently without playing any sounds or executing hook logic.
+**Note:** Individual hook toggles are checked by the hook script (`.claude/hooks/scripts/hooks.py`). Local settings override shared settings, and if a hook is disabled, the script exits silently without playing sounds or executing hook logic.

 ### Text to Speech (TTS)
 website used to generate sounds: https://elevenlabs.io/
-voice used: Samara X
+voice used: Samara X
@@ -3,7 +3,7 @@
 Claude Code Hook Handler
 =============================================
 This script handles events from Claude Code and plays sounds for different hook events.
-Supports all 9 Claude Code hooks: https://docs.claude.com/en/docs/claude-code/hooks-guide
+Supports all 15 Claude Code hook event names: https://docs.claude.com/en/docs/claude-code/hooks-guide

 Special handling for git commits: plays pretooluse-git-committing.mp3
 """
@@ -24,15 +24,21 @@ except ImportError:
 # ===== HOOK EVENT TO SOUND FOLDER MAPPING =====
 # Maps each hook event to its corresponding sound folder
 HOOK_SOUND_MAP = {
+    "SessionStart": "sessionstart",
+    "SessionEnd": "sessionend",
+    "UserPromptSubmit": "userpromptsubmit",
    "PreToolUse": "pretooluse",
    "PostToolUse": "posttooluse",
-    "UserPromptSubmit": "userpromptsubmit",
+    "PostToolUseFailure": "posttoolusefailure",
+    "PermissionRequest": "permissionrequest",
    "Notification": "notification",
    "Stop": "stop",
+    "SubagentStart": "subagentstart",
    "SubagentStop": "subagentstop",
    "PreCompact": "precompact",
-    "SessionStart": "sessionstart",
-    "SessionEnd": "sessionend"
+    "Setup": "setup",
+    "TeammateIdle": "teammateidle",
+    "TaskCompleted": "taskcompleted",
 }

 # ===== BASH COMMAND PATTERNS =====
@@ -345,4 +351,4 @@ def main():

 # Entry point - Python calls main() when the script runs
 if __name__ == "__main__":
-    main()
+    main()
@@ -0,0 +1,84 @@
+---
+name: presentation-structure
+description: Knowledge about the presentation slide format, weight system, navigation, and section structure
+---
+
+# Presentation Structure Skill
+
+Knowledge about how the presentation at `presentation/index.html` is structured.
+
+## File Location
+
+`presentation/index.html` — a single-file HTML presentation with inline CSS and JS.
+
+## Slide Format
+
+Each slide is a div with `data-slide` (sequential number) and optional `data-weight` (journey percentage):
+
+```html
+<!-- Regular slide -->
+<div class="slide" data-slide="12" data-weight="5">
+    <h1>Slide Title</h1>
+    <!-- content -->
+</div>
+
+<!-- Section divider slide -->
+<div class="slide section-slide" data-slide="10">
+    <h1>Section Name</h1>
+    <p class="section-desc">Description of this section</p>
+</div>
+
+<!-- Title slide (centered) -->
+<div class="slide title-slide" data-slide="1">
+    <h1>Presentation Title</h1>
+    <p class="subtitle">Subtitle text</p>
+</div>
+```
+
+## Journey Bar Weight 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)
+
+### Weight Distribution by Section
+
+| 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% |
+
+## Navigation System
+
+- `goToSlide(n)` — used in TOC links, must match actual `data-slide` numbers
+- `totalSlides` is auto-computed from DOM (`document.querySelectorAll('[data-slide]').length`)
+- Arrow keys, Space, and touch swipe for navigation
+- Slide counter shows `current / total` at bottom-left
+
+## Renumbering Rules
+
+After adding, removing, or reordering slides:
+1. Renumber ALL `data-slide` attributes sequentially starting from 1
+2. Update all `goToSlide()` calls in the TOC/Journey Map slide
+3. The JS `totalSlides` auto-computes — no manual update needed
+4. Verify no gaps or duplicates exist
+
+## Section Divider Format
+
+Section dividers use the `section-slide` class and show the current journey percentage:
+
+```html
+<div class="slide section-slide" data-slide="10">
+    <p class="section-number">Part 2</p>
+    <h1>Better Prompting</h1>
+    <p class="section-desc">Journey: 0% — effective prompting for real results.</p>
+</div>
+```
@@ -0,0 +1,106 @@
+---
+name: presentation-styling
+description: Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
+---
+
+# Presentation Styling Skill
+
+CSS classes and HTML patterns used in `presentation/index.html`.
+
+## CSS Component Classes
+
+### Layout
+
+- `.two-col` — 2-column grid layout with 24px gap
+- `.info-grid` — 2-column grid for info cards
+- `.col-card` — Card inside a column (add `.good` for green border, `.bad` for red border)
+- `.info-card` — Card in an info grid
+
+### Content Blocks
+
+- `.trigger-box` — Gray box with dark left border (for key concepts, prerequisites)
+- `.how-to-trigger` — Green box with green border (for "Try This" actions)
+- `.warning-box` — Orange box with warning border (for important warnings)
+- `.code-block` — Dark code display block with monospace font
+
+### Lists
+
+- `.use-cases` — Container for icon+text list items
+- `.use-case-item` — Individual item with icon and text
+- `.feature-list` — Simple bordered list
+
+### Tags & Badges
+
+- `.matcher-tag` — Gray inline pill tag
+- `.weight-badge` — Green pill badge (auto-injected by JS for weighted slides)
+
+## Code Block Syntax Highlighting
+
+Inside `.code-block`, use these spans for syntax coloring:
+
+```html
+<div class="code-block">
+<span class="comment"># This is a comment</span>
+<span class="key">field_name</span>: <span class="string">value</span>
+<span class="cmd">&gt;</span> command to run
+</div>
+```
+
+- `.comment` — Green (#6a9955) for comments
+- `.key` — Blue (#9cdcfe) for property names/keys
+- `.string` — Orange (#ce9178) for string values
+- `.cmd` — Yellow (#dcdcaa) for commands/prompts
+
+## Slide Type Patterns
+
+### Content Slide with Two Columns (Good vs Bad)
+```html
+<div class="slide" data-slide="N" data-weight="5">
+    <h1>Title</h1>
+    <div class="two-col">
+        <div class="col-card bad">
+            <h4>Before (Vibe Coding)</h4>
+            <!-- bad example -->
+        </div>
+        <div class="col-card good">
+            <h4>After (Agentic)</h4>
+            <!-- good example -->
+        </div>
+    </div>
+</div>
+```
+
+Do not hardcode `<span class="weight-badge">` in slide HTML. The presentation JavaScript injects and removes weight badges automatically.
+
+### Content Slide with Code Example
+```html
+<div class="slide" data-slide="N">
+    <h1>Title</h1>
+    <div class="trigger-box">
+        <h4>Key Concept</h4>
+        <p>Description</p>
+    </div>
+    <div class="code-block"><span class="comment"># Example</span>
+<span class="key">field</span>: <span class="string">value</span></div>
+</div>
+```
+
+### Icon List Pattern
+```html
+<div class="use-cases">
+    <div class="use-case-item">
+        <span class="use-case-icon">EMOJI</span>
+        <div class="use-case-text">
+            <strong>Title</strong>
+            <span>Description text</span>
+        </div>
+    </div>
+</div>
+```
+
+## Journey Bar Specific
+
+- `.journey-bar` — Fixed bar below progress bar
+- `.journey-bar.hidden` — Hidden on title slide
+- Journey bar color transitions from red (0%) to green (100%) via HSL interpolation
+- Weight badges are auto-injected by JS into `h1` elements of weighted slides
@@ -0,0 +1,159 @@
+---
+name: vibe-to-agentic-framework
+description: The conceptual framework behind the presentation — what "Vibe Coding to Agentic Engineering" means, why the journey is structured the way it is, and how every slide fits the narrative arc
+---
+
+# 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%).
+
+## 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.
+
+**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.
+
+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 Running Example: TodoApp Monorepo
+
+Every technique is demonstrated on a realistic full-stack project:
+
+```
+todoapp/
+├── backend/          # FastAPI (Python)
+│   ├── main.py       # App entry + CORS
+│   ├── routes/
+│   │   └── todos.py  # CRUD endpoints
+│   │   └── users.py  # Auth endpoints
+│   ├── models/
+│   │   ├── todo.py   # SQLAlchemy Todo model
+│   │   └── user.py   # SQLAlchemy User model
+│   └── tests/
+│       └── test_todos.py
+├── frontend/         # Next.js (TypeScript)
+│   ├── components/
+│   │   ├── TodoList.tsx
+│   │   └── Sidebar.tsx
+│   ├── pages/
+│   │   ├── index.tsx
+│   │   └── todos.tsx
+│   └── lib/
+│       └── api.ts    # API client
+└── CLAUDE.md
+```
+
+**Why TodoApp?** It's small enough to fit on slides but complex enough to demonstrate real problems: a backend with route patterns and test conventions, a frontend with component hierarchy and design tokens, and a monorepo structure where cross-cutting concerns (like adding a new feature) require coordination between both sides.
+
+The TodoApp makes the vibe-coding problem concrete: without structure, asking Claude to "add a notes feature" produces a random `/api/notes` endpoint that doesn't follow `routes/todos.py` patterns, a standalone page with no sidebar navigation, and zero tests. With full agentic setup, the same request produces a route following existing patterns, a page integrated into the sidebar, and tests matching `test_todos.py` style.
+
+## The Journey Arc: Why This Order
+
+The presentation follows a deliberate pedagogical sequence. Each section unlocks a new capability layer:
+
+### Part 0: Introduction (Slides 1–4, no weight)
+**Purpose:** Set the stage. Introduce the TodoApp, define vibe coding, and show the destination.
+- Title slide establishes the journey metaphor
+- Example Project introduces the codebase all examples will reference
+- "What is Vibe Coding?" creates the 0% baseline — the pain point
+- Journey Map provides a clickable TOC showing the full path ahead
+
+### Part 1: Prerequisites (Slides 5–9, no weight)
+**Purpose:** Get Claude Code installed and running. This is purely logistical — no engineering practices yet.
+- Installing, authentication, first session, interface overview
+- 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%)
+**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.
+
+**Why 20% total:** 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%)
+**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.
+
+**Why 20% total:** 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%)
+**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.
+
+**Why 10% total:** Workflows are important but relatively simple concepts. They're enablers for the more powerful systems that follow.
+
+### Part 5: Domain Knowledge (Slides 29–33, journey 50% → 65%)
+**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.
+
+**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.
+
+### 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.
+
+**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.
+
+### The 100% Slide (Slide 44)
+The celebration moment. Shows the complete TodoApp configuration:
+- 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
+- MCP servers for external tools
+
+### Appendix (Slides 47+, no weight)
+**Purpose:** Reference material. Every command, setting, and configuration option. No weight because these are reference lookups, not journey milestones. Includes: tool usage, all slash commands, commit/PR workflows, customization options, debugging tips, and golden rules.
+
+## How to Use This Framework When Editing Slides
+
+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).
+
+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.
+
+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%.
+
+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
+
+| # | 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%** |
@@ -26,6 +26,14 @@ Skills in `.claude/skills/<name>/SKILL.md` use YAML frontmatter:
 - `context`: Set to `fork` to run in isolated subagent context
 - `allowed-tools`: Restrict which tools Claude can use

+### Presentation System
+Any request to update, modify, or fix the presentation (`presentation/index.html`) must be handled by the `presentation-curator` agent (`.claude/agents/presentation-curator.md`). Always delegate presentation work to this agent via the Task tool — never edit the presentation directly.
+
+The agent is **self-evolving**: after every execution, it updates its own skills to stay in sync with the presentation. It has three preloaded skills:
+- `vibe-to-agentic-framework`: The conceptual framework ("Vibe Coding → Agentic Engineering"), weight rationale, and journey narrative. Updated after every slide change.
+- `presentation-structure`: Slide format, weight system, navigation, section ranges. Updated when slides are added/removed/reordered.
+- `presentation-styling`: CSS classes, component patterns, syntax highlighting. Updated when new styling patterns are introduced.
+
 ### Hooks System
 Cross-platform sound notification system in `.claude/hooks/`:
 - `scripts/hooks.py`: Main handler for Claude Code hook events
@@ -74,7 +74,7 @@ practice makes claude perfect
 - [Claude.md for larger monorepos - Boris Cherny on X](https://github.com/shanraisshan/claude-code-best-practice/blob/main/reports/claude-md-for-larger-mono-repos.md)

 ## WORKFLOWS
- [RPI](/workflow/rpi/rpi-workflow.md)
+- [RPI](workflow/rpi/rpi-workflow.md)
 - [Boris Feb26 workflow](https://x.com/bcherny/status/2017742741636321619)
 - [Ralph plugin with sandbox](https://www.youtube.com/watch?v=eAtvoGlpeRU)
 - [Human Layer RPI - Research Plan Implement](https://github.com/humanlayer/advanced-context-engineering-for-coding-agents/blob/main/ace-fca.md)
@@ -7,7 +7,7 @@
 </tr>
 </table>

-![SDK vs CLI System Prompts Diagram](/!/sdk-vs-cli-diagram.svg)
+![SDK vs CLI System Prompts Diagram](../!/sdk-vs-cli-diagram.svg)

 ---

@@ -163,7 +163,7 @@ With 37 settings and 84 environment variables (use the `"env"` field in your `se

 - [Boris Cherny (@bcherny) on X — February 12, 2026](https://x.com/bcherny)
 - [Claude Code Terminal Setup Docs](https://code.claude.com/docs/en/terminal)
- [Claude Code Plugins & Discovery Docs](https://code.claude.com/docs/en/discovery)
+- [Claude Code Plugins & Discovery Docs](https://code.claude.com/docs/en/discover-plugins)
 - [Claude Code Sub-agents Docs](https://code.claude.com/docs/en/sub-agents)
 - [Claude Code Permissions Docs](https://code.claude.com/docs/en/permissions)
 - [Claude Code Sandbox Docs](https://code.claude.com/docs/en/sandbox)
@@ -67,17 +67,19 @@ These exist at both levels, with **project-level taking precedence** over global

 ## Settings Precedence

-Settings apply in order from highest to lowest priority:
+User-writable settings apply in this override order (highest to lowest):

 | Priority | Location | Scope | Version Control | Purpose |
 |----------|----------|-------|-----------------|---------|
-| 1 | Managed settings | System | Read-only | Organization/admin policies |
+| 1 | Command line flags | Session | N/A | Single-session overrides |
 | 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific |
 | 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings |
 | 4 | `~/.claude/settings.local.json` | User | N/A | Personal global overrides |
 | 5 | `~/.claude/settings.json` | User | N/A | Global personal settings |

-**Important**: `deny` rules have the highest priority and cannot be overridden by any lower-priority settings.
+Policy layer: `managed-settings.json` is organization-enforced and cannot be overridden by local files.
+
+**Important**: `deny` rules have the highest safety precedence and cannot be overridden by lower-priority allow/ask rules.

 ---

@@ -28,19 +28,21 @@ A comprehensive guide to all available configuration options in Claude Code's `s

 ## Settings Hierarchy

-Claude Code uses a 4-tier configuration hierarchy (highest to lowest priority):
+Claude Code settings use a 5-level user-writable override chain plus an enforced policy layer:

 | Priority | Location | Scope | Version Control | Purpose |
 |----------|----------|-------|-----------------|---------|
 | 1 | Command line arguments | Session | N/A | Single-session overrides |
 | 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific |
 | 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings |
-| 4 | `~/.claude/settings.json` | User | N/A | Global personal settings |
-| 5 | `managed-settings.json` | System | Read-only | Organization policies |
+| 4 | `~/.claude/settings.local.json` | User | N/A | Personal global overrides |
+| 5 | `~/.claude/settings.json` | User | N/A | Global personal defaults |

-**Important**: Later values override earlier ones EXCEPT for:
- `deny` rules (highest priority - cannot be overridden)
- Managed settings (cannot be overridden by any local settings)
+**Policy layer**: `managed-settings.json` is organization-enforced and cannot be overridden by local settings.
+
+**Important**:
+- `deny` rules have highest safety precedence and cannot be overridden by lower-priority allow/ask rules.
+- Managed settings may lock or override local behavior even if local files specify different values.

 ---

@@ -237,7 +239,7 @@ Control what tools and operations Claude can perform.

 Execute custom shell commands at various points in Claude Code's lifecycle.

-### Hook Events (13 total)
+### Hook Events (15 total)

 | Event | When Fired | Matcher Support | Common Use Cases |
 |-------|------------|-----------------|------------------|
@@ -254,6 +256,8 @@ Execute custom shell commands at various points in Claude Code's lifecycle.
 | `SubagentStop` | Subagent completes | Yes | Cleanup, validation |
 | `PreCompact` | Before context compaction | Yes | Backup, logging |
 | `Setup` | Repository init (`--init`, `--maintenance`) | Yes | One-time setup |
+| `TeammateIdle` | Agent Teams teammate goes idle | Yes | Team orchestration, routing |
+| `TaskCompleted` | A tracked task is completed | Yes | Progress automation, notifications |

 ### Hook Configuration Structure