Shayan Rais
55c3ca1095
New slide 2 "Jargon you'll hear" — 15 scattered pill-chips (vibe coding, agentic engineering, context engineering, context rot, dumb zone, hallucination prompt engineering, progressive disclosure, orchestration, token burn, context bloat, one shot AI slop, harness, MCP, hooks, compaction) with varied sizes, rotations, and 4 colors (blue/purple/ green/amber). Existing slides 2-38 renumbered to 3-39; all goToSlide targets and section banner comments updated accordingly. Total: 39 slides. Co-Authored-By: Claude <noreply@anthropic.com>
1485 lines
92 KiB
HTML
1485 lines
92 KiB
HTML
<!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 Learning Journey</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; }
|
|
.analogy-box { background: #f3e5f5; border-left: 4px solid #9c27b0; padding: 20px 24px; margin: 24px 0; border-radius: 0 8px 8px 0; }
|
|
.analogy-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #7b1fa2; margin-bottom: 8px; }
|
|
.analogy-box p { font-size: 1.05rem; color: #4a148c; 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; }
|
|
.info-box { background: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px 24px; margin: 16px 0 24px 0; }
|
|
.info-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #1565c0; margin-bottom: 8px; }
|
|
.info-box p { font-size: 1.05rem; color: #0d47a1; 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; }
|
|
.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; }
|
|
.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; }
|
|
.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; }
|
|
.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; }
|
|
table { width: 100%; border-collapse: collapse; margin: 24px 0; }
|
|
th { background: #f8f9fa; padding: 14px 20px; text-align: left; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #666; border-bottom: 2px solid #e5e5e5; }
|
|
td { padding: 14px 20px; border-bottom: 1px solid #eee; font-size: 1rem; color: #444; }
|
|
tr:last-child td { 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 */
|
|
.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: 300px; 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; }
|
|
.journey-ticks { display: flex; flex-direction: column; justify-content: space-between; height: 300px; 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 { 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; }
|
|
/* Hiring analogy steps */
|
|
.hiring-steps { margin: 32px 0; }
|
|
.hiring-step { display: flex; align-items: flex-start; margin-bottom: 20px; padding: 20px 24px; background: #fafafa; border-radius: 8px; border-left: 4px solid #e5e5e5; }
|
|
.hiring-step.level-1 { border-left-color: #2196f3; }
|
|
.hiring-step.level-2 { border-left-color: #ff9800; }
|
|
.hiring-step.level-3 { border-left-color: #4caf50; }
|
|
.hiring-step-number { font-size: 1.8rem; font-weight: 700; margin-right: 20px; min-width: 40px; color: #1a1a1a; }
|
|
.hiring-step-content { flex: 1; }
|
|
.hiring-step-content strong { display: block; font-size: 1.15rem; color: #1a1a1a; margin-bottom: 4px; }
|
|
.hiring-step-content span { font-size: 0.95rem; color: #666; }
|
|
/* Frontmatter field rows */
|
|
.field-row { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #eee; }
|
|
.field-row:last-child { border-bottom: none; }
|
|
.field-name { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.9rem; color: #9cdcfe; min-width: 180px; font-weight: 600; }
|
|
.field-desc { font-size: 0.95rem; color: #555; }
|
|
.field-required { font-size: 0.7rem; background: #ffcdd2; color: #c62828; padding: 1px 6px; border-radius: 3px; margin-left: 8px; font-weight: 600; text-transform: uppercase; }
|
|
.field-recommended { font-size: 0.7rem; background: #fff9c4; color: #f57f17; padding: 1px 6px; border-radius: 3px; margin-left: 8px; font-weight: 600; text-transform: uppercase; }
|
|
/* TOC vertical list for Meet the Person */
|
|
.toc-vertical { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; max-width: 700px; }
|
|
.toc-vertical .toc-item { display: flex; align-items: flex-start; padding: 18px 24px; background: #f8f9fa; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
|
|
.toc-vertical .toc-item:hover { background: #eee; }
|
|
.toc-vertical .toc-badge { font-size: 0.7rem; font-weight: 700; background: #e5e5e5; color: #777; border-radius: 10px; padding: 2px 8px; margin-left: 10px; white-space: nowrap; }
|
|
.toc-vertical .toc-name { font-size: 1rem; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
|
|
.toc-vertical .toc-sub { font-size: 0.9rem; color: #666; }
|
|
/* File tree */
|
|
.file-tree { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.9rem; background: #f8f9fa; padding: 24px; border-radius: 8px; line-height: 1.9; }
|
|
.file-tree .dir { color: #1565c0; font-weight: 600; }
|
|
.file-tree .file { color: #444; }
|
|
.file-tree .highlight { color: #2e7d32; font-weight: 600; }
|
|
.file-tree .dim { color: #aaa; }
|
|
</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">🎼 Workflow</span>
|
|
<span class="journey-tick">⚡ Commands</span>
|
|
<span class="journey-tick">📋 CLAUDE.md</span>
|
|
<span class="journey-tick">🧠 Context</span>
|
|
<span class="journey-tick">🎓 Skills</span>
|
|
<span class="journey-tick">👤 Agents</span>
|
|
</div>
|
|
</div>
|
|
<span class="journey-level-label" id="journeyLevelLabel"></span>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 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 Learning Journey</h1>
|
|
<p class="subtitle">There is no one correct way of using Claude Code</p>
|
|
<p style="margin-top: 60px; font-size: 0.95rem; color: #888;">An onboarding guide for non-engineers & engineers alike.</p>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 2: AI Jargon Word Cloud -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="2">
|
|
<h1 style="font-size: 1.6rem; margin-bottom: 8px; color: #888; border-bottom: none; padding-bottom: 0; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;">Jargon you'll hear</h1>
|
|
<p style="font-size: 1rem; color: #aaa; margin-bottom: 0; font-style: italic;">I'll unpack each of these as we go — for now, just let them wash over you.</p>
|
|
<div style="position: relative; width: 100%; height: calc(100vh - 200px); min-height: 480px; overflow: hidden;">
|
|
|
|
<!-- Row 1 (top cluster) -->
|
|
<span style="position: absolute; top: 4%; left: 12%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.25rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">vibe coding</span>
|
|
|
|
<span style="position: absolute; top: 2%; left: 45%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">agentic engineering</span>
|
|
|
|
<span style="position: absolute; top: 6%; left: 72%; transform: rotate(-6deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination prompt engineering</span>
|
|
|
|
<!-- Row 2 -->
|
|
<span style="position: absolute; top: 18%; left: 3%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context engineering</span>
|
|
|
|
<span style="position: absolute; top: 20%; left: 35%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context bloat</span>
|
|
|
|
<span style="position: absolute; top: 17%; left: 60%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
|
|
|
|
<!-- Row 3 (middle) -->
|
|
<span style="position: absolute; top: 35%; left: 8%; transform: rotate(-5deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.15rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context rot</span>
|
|
|
|
<span style="position: absolute; top: 37%; left: 30%; transform: rotate(6deg); background: #7b1fa2; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 1.4rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">orchestration</span>
|
|
|
|
<span style="position: absolute; top: 33%; left: 60%; transform: rotate(-4deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">one shot AI slop</span>
|
|
|
|
<!-- Row 4 -->
|
|
<span style="position: absolute; top: 52%; left: 2%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">MCP</span>
|
|
|
|
<span style="position: absolute; top: 50%; left: 18%; transform: rotate(-6deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.2rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">dumb zone</span>
|
|
|
|
<span style="position: absolute; top: 54%; left: 42%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">harness</span>
|
|
|
|
<span style="position: absolute; top: 51%; left: 62%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.25rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">token burn</span>
|
|
|
|
<!-- Row 5 (bottom cluster) -->
|
|
<span style="position: absolute; top: 68%; left: 10%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hooks</span>
|
|
|
|
<span style="position: absolute; top: 70%; left: 35%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">compaction</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 3: Boris Three-Tweets GIF -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="3">
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; text-align: center;">
|
|
<figure style="max-width: 900px; width: 100%;">
|
|
<img src="../../!/root/boris-slider.gif" alt="Boris Cherny slides showing the spectrum of Claude Code usage styles" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
|
|
<figcaption style="margin-top: 20px; font-size: 1rem; color: #666; font-style: italic;">
|
|
Boris Cherny (creator of Claude Code) — different teams use Claude Code completely differently.<br />
|
|
There is no single “correct” way. But there <em>are</em> patterns worth understanding.
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 4: What is Claude Code? -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="4">
|
|
<h1>What is Claude Code?</h1>
|
|
<p>Claude Code isn't just Claude. It's Claude (the model) wrapped in a <strong>harness</strong> with a set of <strong>tools</strong> — and that wrapper is what turns a chatbot into an agent.</p>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 32px 0;">
|
|
<div class="col-card" style="border-left: 4px solid #9c27b0; text-align: center;">
|
|
<div style="font-size: 2.2rem; margin-bottom: 12px;">🧠</div>
|
|
<h4 style="font-size: 1rem; color: #7b1fa2; text-transform: none; letter-spacing: 0; margin-bottom: 10px;"><strong>Model</strong></h4>
|
|
<p style="font-size: 0.95rem; color: #555; margin: 0;">The brain. Knows everything up to its training cutoff. Doesn’t know today’s date, can’t read your files, can’t search the web.</p>
|
|
</div>
|
|
<div class="col-card" style="border-left: 4px solid #2196f3; text-align: center;">
|
|
<div style="font-size: 2.2rem; margin-bottom: 12px;">💪</div>
|
|
<h4 style="font-size: 1rem; color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 10px;"><strong>Harness</strong></h4>
|
|
<p style="font-size: 0.95rem; color: #555; margin: 0;">The body around the brain. Manages memory, permissions, how long conversations run, and how the brain talks to tools.</p>
|
|
</div>
|
|
<div class="col-card" style="border-left: 4px solid #4caf50; text-align: center;">
|
|
<div style="font-size: 2.2rem; margin-bottom: 12px;">🤜</div>
|
|
<h4 style="font-size: 1rem; color: #2e7d32; text-transform: none; letter-spacing: 0; margin-bottom: 10px;"><strong>Tools</strong></h4>
|
|
<p style="font-size: 0.95rem; color: #555; margin: 0;">The hands. Read files, edit code, search the web, run commands, spawn helper agents.</p>
|
|
</div>
|
|
</div>
|
|
<p style="text-align: center; font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 24px 0;"><strong>Claude Code = Model + Harness + Tools</strong></p>
|
|
<div class="trigger-box">
|
|
<h4>Why This Matters</h4>
|
|
<p>Ask a bare model “what’s the capital of Pakistan?” — it answers from training data. Ask it “what time is it in Karachi right now?” — it can’t know. That second question needs a <strong>tool</strong>, exposed through a <strong>harness</strong>. That’s the difference Claude Code makes — and the rest of this session teaches you how to configure it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 5: Vibe Coding vs Agentic Engineering -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="5">
|
|
<h1>Vibe Coding vs Agentic Engineering</h1>
|
|
<div class="two-col">
|
|
<div>
|
|
<h3 style="text-align: center; color: #c62828; margin-bottom: 16px;">Before (Vibe Coding)</h3>
|
|
<div class="code-block"><span class="comment"># Plain TodoApp</span>
|
|
todoapp/
|
|
<span class="key">backend/</span>
|
|
main.py
|
|
routes/
|
|
todos.py
|
|
users.py
|
|
models/
|
|
todo.py
|
|
user.py
|
|
tests/
|
|
test_todos.py
|
|
<span class="key">frontend/</span>
|
|
components/
|
|
TodoList.tsx
|
|
Sidebar.tsx
|
|
pages/
|
|
index.tsx
|
|
todos.tsx
|
|
lib/
|
|
api.ts</div>
|
|
</div>
|
|
<div>
|
|
<h3 style="text-align: center; color: #2e7d32; margin-bottom: 16px;">After (Agentic Engineering)</h3>
|
|
<div class="code-block"><span class="comment"># With Claude Code Best Practices</span>
|
|
todoapp/
|
|
<span class="claude-file">.claude/</span> <span class="claude-file comment"># Claude Code config</span>
|
|
<span class="claude-file">agents/</span> <span class="claude-file comment"># Custom subagents</span>
|
|
<span class="claude-file">skills/</span> <span class="claude-file comment"># Domain knowledge</span>
|
|
<span class="claude-file">commands/</span> <span class="claude-file comment"># Slash commands</span>
|
|
<span class="claude-file">hooks/</span> <span class="claude-file comment"># Lifecycle scripts</span>
|
|
<span class="claude-file">rules/</span> <span class="claude-file comment"># Modular instructions</span>
|
|
<span class="claude-file">settings.json</span> <span class="claude-file comment"># Team settings</span>
|
|
<span class="claude-file">settings.local.json</span> <span class="claude-file comment"># Personal settings</span>
|
|
<span class="key">backend/</span>
|
|
main.py
|
|
routes/
|
|
todos.py
|
|
users.py
|
|
models/
|
|
todo.py
|
|
user.py
|
|
tests/
|
|
test_todos.py
|
|
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Backend instructions</span>
|
|
<span class="key">frontend/</span>
|
|
components/
|
|
TodoList.tsx
|
|
Sidebar.tsx
|
|
pages/
|
|
index.tsx
|
|
todos.tsx
|
|
lib/
|
|
api.ts
|
|
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Frontend instructions</span>
|
|
<span class="claude-file">.mcp.json</span> <span class="claude-file comment"># Managed MCP servers</span>
|
|
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Project instructions</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 6: What is Vibe Coding? -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="6">
|
|
<h1>What is Vibe Coding?</h1>
|
|
<div class="two-col" style="margin-top: 28px;">
|
|
<div class="col-card bad">
|
|
<h4>Vibe Coding (ad-hoc)</h4>
|
|
<p>"Write me a weather report for Dubai."</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">No source specified. No format agreed. No memory of last time. The output varies every run.</p>
|
|
<p style="margin-top: 12px; color: #c62828;"><strong>Unpredictable. Hard to share. Hard to repeat.</strong></p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>Agentic Engineering (structured)</h4>
|
|
<p>"<code>/weather-orchestrator</code>"</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">One keystroke. Claude knows the source (Open-Meteo), the format (SVG card), the agent (weather-reporter).</p>
|
|
<p style="margin-top: 12px; color: #2e7d32;"><strong>Repeatable. Shareable. Same every time.</strong></p>
|
|
</div>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; max-width: 720px; margin-left: auto; margin-right: auto;">
|
|
<img src="../assets/hallucinations-opus-strawperry.jpg" alt="Claude Opus hallucinating the letter count in 'strawberry'" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
|
|
<img src="../assets/hallucinations-opus-year.jpg" alt="Claude Opus hallucinating the current year" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
|
|
</div>
|
|
<div class="trigger-box" style="margin-top: 28px;">
|
|
<h4>The Fix Isn't Better Prompting</h4>
|
|
<p>Better prompting doesn't fix these. But giving Claude a <strong>tool to count letters</strong> and a <strong>file that says today's date</strong> does. That's what <strong>agents, skills, and CLAUDE.md</strong> are for — and that's what this session teaches.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 7: Good vs Bad Prompts -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="7">
|
|
<h1>Good vs Bad Prompts</h1>
|
|
<p>Even before you set up any structure, <strong>how you prompt</strong> matters. Specific beats vague. Context beats assumption.</p>
|
|
<div class="two-col" style="margin-top: 28px;">
|
|
<div class="col-card bad">
|
|
<h4>Weak Prompt</h4>
|
|
<p>"Give me the weather."</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">Which city? Celsius or Fahrenheit? From a live API or training data? Claude guesses.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>Strong Prompt</h4>
|
|
<p>"Fetch the current temperature for Dubai from Open-Meteo and return it in Celsius."</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">Source named. Location named. Unit specified. No guessing needed.</p>
|
|
</div>
|
|
</div>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>Weak Prompt</h4>
|
|
<p>"Make this better."</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">Better how? Shorter? More formal? Better structured? Claude will pick one at random.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>Strong Prompt</h4>
|
|
<p>"Rewrite this in a warmer, less formal tone. Keep it under 100 words."</p>
|
|
<p style="margin-top: 8px; font-size: 0.95rem; color: #888;">Tone named. Length constrained. Unambiguous.</p>
|
|
</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>But Here's the Bigger Move</h4>
|
|
<p>You can encode good prompts permanently so you never have to write them again. That's what the next five topics are about.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 8: Meet the Person — TOC -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide" data-slide="8">
|
|
<h1>Meet the Person</h1>
|
|
<p>We're going to learn five concepts using <strong>one running example</strong>: a weather reporter agent that fetches Dubai's temperature and renders a weather card. Same person — five different angles.</p>
|
|
<div class="toc-vertical">
|
|
<div class="toc-item" onclick="goToSlide(9)">
|
|
<span class="toc-number">1</span>
|
|
<div style="flex: 1;">
|
|
<div class="toc-name">👤 Agents — The Person (job title: weather reporter)</div>
|
|
<div class="toc-sub">A specialist hired for a specific role — same Claude, different hat</div>
|
|
</div>
|
|
</div>
|
|
<div class="toc-item" onclick="goToSlide(15)">
|
|
<span class="toc-number">2</span>
|
|
<div style="flex: 1;">
|
|
<div class="toc-name">🎓 Skills — What the Person Can Do</div>
|
|
<div class="toc-sub">do reporting on weather • play a game • read a book</div>
|
|
</div>
|
|
</div>
|
|
<div class="toc-item" onclick="goToSlide(21)">
|
|
<span class="toc-number">3</span>
|
|
<div style="flex: 1;">
|
|
<div class="toc-name">🧠 Context — The Person's Brain (storage — the 1M-token space)</div>
|
|
<div class="toc-sub">where knowledge gets loaded in — resets each session</div>
|
|
</div>
|
|
</div>
|
|
<div class="toc-item" onclick="goToSlide(26)">
|
|
<span class="toc-number">4</span>
|
|
<div style="flex: 1;">
|
|
<div class="toc-name">📋 CLAUDE.md — The Pocket Rulebook</div>
|
|
<div class="toc-sub">standing instructions read at the start of every shift</div>
|
|
</div>
|
|
</div>
|
|
<div class="toc-item" onclick="goToSlide(32)">
|
|
<span class="toc-number">5</span>
|
|
<div style="flex: 1;">
|
|
<div class="toc-name">🎼 Workflow — The Trigger</div>
|
|
<div class="toc-sub">one command kicks off the whole chain — commands are the entry point</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 1: AGENTS (Slides 9-14) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 8: Agents Section Divider -->
|
|
<div class="slide section-slide" data-slide="9" data-level="agents">
|
|
<div class="section-number">Topic 1</div>
|
|
<h1>👤 Agents — The Weather Reporter</h1>
|
|
<p class="section-desc">An agent is Claude playing a specific role. Meet the <strong>weather reporter</strong> — a specialist hired to fetch and report weather data for Dubai. Same Claude, different hat.</p>
|
|
</div>
|
|
|
|
<!-- Slide 9: The Restaurant Kitchen -->
|
|
<div class="slide" data-slide="10">
|
|
<h1>The Restaurant Kitchen</h1>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>Without an agent, you walk into a random kitchen and shout "make me pasta!" — whoever happens to hear you might boil instant noodles or make a five-course Italian meal. <strong>With an agent</strong>, you're walking up to a specific person with a specific job title. The Italian chef makes pasta the Italian-chef way. Every time.</p>
|
|
</div>
|
|
<div class="two-col" style="margin-top: 32px;">
|
|
<div class="col-card bad">
|
|
<h4>Plain Prompting (asking a stranger)</h4>
|
|
<p>You ask Claude "What's the weather in Dubai?"</p>
|
|
<p>It might guess from training data, search the web, or make something up.</p>
|
|
<p style="margin-top: 12px; color: #c62828;"><strong>You don't know what it'll do.</strong></p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>With an Agent (your specialist)</h4>
|
|
<p>The <code>weather-agent</code> has a clear job description:</p>
|
|
<p><em>"Always check the Open-Meteo weather service. Always return temperature in a clean, consistent format."</em></p>
|
|
<p style="margin-top: 12px; color: #2e7d32;"><strong>Same question, same approach, every time.</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Prompting vs Agent table -->
|
|
<div class="slide" data-slide="11">
|
|
<h1>Prompting vs. Agent — Side by Side</h1>
|
|
<p>The difference in one picture: <strong>prompting is asking a stranger on the street; using an agent is asking your dedicated specialist.</strong></p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Prompting (stranger)</th>
|
|
<th>Agent (specialist)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Who answers</strong></td>
|
|
<td>Whoever happens to be there</td>
|
|
<td>The person you hired for this exact job</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Source of truth</strong></td>
|
|
<td>Could be anywhere</td>
|
|
<td>Always the official Open-Meteo weather service</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Format</strong></td>
|
|
<td>Whatever comes out</td>
|
|
<td>Clean, consistent temperature + unit</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Twice in a row?</strong></td>
|
|
<td>Different each time</td>
|
|
<td>Same method, same shape</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="how-to-trigger">
|
|
<h4>Takeaway</h4>
|
|
<p>Agents don't make Claude <em>smarter</em> — they make it <strong>predictable</strong>. Same question → same approach → same quality. That's what you need for anything you'll do more than once.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Agents Get Their Own Brain -->
|
|
<div class="slide" data-slide="12">
|
|
<h1>Agents Get Their Own Brain</h1>
|
|
<div class="info-box">
|
|
<h4>Tip from Thariq (Anthropic) — Apr 16, 2026</h4>
|
|
<p>"When Claude spawns an agent, that agent gets its own fresh brain. It can do as much work as it needs, then synthesize its results — only the final report comes back to you."</p>
|
|
</div>
|
|
<p>This connects directly to the weather reporter: the <code>weather-agent</code> works in <strong>its own brain</strong> — all that web fetching, JSON parsing, and failed attempts stay out of yours. You just get the temperature back.</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🧹</span>
|
|
<div class="use-case-text">
|
|
<strong>Messy work stays in the agent's brain</strong>
|
|
<span>API calls, retries, JSON wrangling — all of it in <em>the weather-agent's</em> brain, not yours.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">📦</span>
|
|
<div class="use-case-text">
|
|
<strong>Only the result comes back</strong>
|
|
<span>The agent hands you "32°C". Your brain stays clear for the next task.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">💡</span>
|
|
<div class="use-case-text">
|
|
<strong>Mental test: "Do I need the working, or just the answer?"</strong>
|
|
<span>If just the answer → send an agent. If you need every step → do it yourself.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: How to Create an Agent -->
|
|
<div class="slide" data-slide="13">
|
|
<h1>How to Create Your Own Agent</h1>
|
|
<p>You don't write an agent from scratch — Claude helps you build one. Type <code>/agents</code> inside Claude Code and a guided menu opens.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The Command</h4>
|
|
<p>Type <code>/agents</code> in Claude Code. A menu appears with your existing agents and an option to create a new one.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Type <code>/agents</code></strong>
|
|
<span>A menu opens listing your existing agents (including <code>weather-agent</code>) plus "Create new agent".</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Tell Claude what the agent should do, in one sentence</strong>
|
|
<span>e.g., "A weather reporter that fetches Dubai temperature from Open-Meteo."</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Claude writes the agent file for you</strong>
|
|
<span>Creates <code>.claude/agents/weather-agent.md</code> — job description, allowed tools, model. Edit it like any document.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>Creating an agent is like <strong>writing a job description for a new hire</strong>. You say what the role is, what tools they get, and how they should behave. Claude drafts the JD; you review and adjust.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># Where the weather reporter lives</span>
|
|
<span class="claude-file">.claude/agents/weather-agent.md</span> <span class="comment"># A plain markdown file</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>Agents are just text files. Anyone on your team can create, share, or edit one. No coding required.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 13: Agent Config Fields -->
|
|
<div class="slide" data-slide="14">
|
|
<h1>Agent Config Fields</h1>
|
|
<p>The config block at the top of an agent file controls its identity and capabilities. Here's what the real <code>weather-agent.md</code> uses:</p>
|
|
<div style="margin: 24px 0;">
|
|
<div class="field-row">
|
|
<span class="field-name">name <span class="field-recommended">Recommended</span></span>
|
|
<span class="field-desc">Unique identifier — e.g. <code>weather-agent</code></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">description <span class="field-required">Required</span></span>
|
|
<span class="field-desc">When to invoke. Use <code>"PROACTIVELY"</code> for auto-invocation</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">model</span>
|
|
<span class="field-desc"><code>haiku</code>, <code>sonnet</code>, <code>opus</code>, or <code>inherit</code> (default). weather-agent uses <code>sonnet</code></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">tools</span>
|
|
<span class="field-desc">Allowlist of tools. weather-agent allows <code>WebFetch</code>, <code>Read</code>, <code>Write</code>, etc.</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">skills</span>
|
|
<span class="field-desc">Skills preloaded into agent context at startup — <strong>weather-agent preloads <code>weather-fetcher</code></strong></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">maxTurns</span>
|
|
<span class="field-desc">Maximum agentic turns before the agent stops. weather-agent uses <code>5</code></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">memory</span>
|
|
<span class="field-desc">Persistent memory: <code>user</code>, <code>project</code>, or <code>local</code>. weather-agent uses <code>project</code></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">color</span>
|
|
<span class="field-desc">Visual color in task list. weather-agent uses <code>green</code></span>
|
|
</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<h4>The Key Field for This Workshop</h4>
|
|
<p>The <code>skills:</code> field is what makes the weather-agent special. It preloads <code>weather-fetcher</code> directly into the agent's brain at startup — before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 2: SKILLS (Slides 15-20) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 14: Skills Section Divider -->
|
|
<div class="slide section-slide" data-slide="15" data-level="skills">
|
|
<div class="section-number">Topic 2</div>
|
|
<h1>🎓 Skills — What the Weather Reporter Knows</h1>
|
|
<p class="section-desc">Skills are the specific things the reporter has been trained to do. Our reporter has two: <strong>fetch the data</strong>, and <strong>render it as a card</strong>.</p>
|
|
</div>
|
|
|
|
<!-- Slide 15: The Training Manual -->
|
|
<div class="slide" data-slide="16">
|
|
<h1>The Training Manual</h1>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>When someone joins your team, they have a role (agent), but they also go through specific training modules — how to use the CRM, how to write a proposal, how to run a standup. Each training module is a <strong>skill</strong>.</p>
|
|
</div>
|
|
<h3 style="margin-top: 32px;">The Weather Reporter's Two Skills</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🌡️</span>
|
|
<div class="use-case-text">
|
|
<strong>weather-fetcher</strong>
|
|
<span>Knows exactly how to query Open-Meteo, extract the temperature value, and return it in the right format. This skill is <strong>preloaded into the agent's brain</strong> at startup.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🖼️</span>
|
|
<div class="use-case-text">
|
|
<strong>weather-svg-creator</strong>
|
|
<span>Takes a temperature value and renders a visual SVG weather card. Writes the output file to <code>orchestration-workflow/weather.svg</code>. This skill is invoked directly by the command.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Each skill has its own knowledge and methods. The reporter uses the right skill for the right step. <strong>Claude works the same way.</strong></p>
|
|
</div>
|
|
|
|
<!-- Slide 16: When to Turn Something Into a Skill -->
|
|
<div class="slide" data-slide="17">
|
|
<h1>When to Turn Something Into a Skill</h1>
|
|
<div class="info-box">
|
|
<h4>Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026</h4>
|
|
<p>"If you do something <strong>more than once a day</strong>, turn it into a skill."</p>
|
|
</div>
|
|
<p>The rule is simple: anything you're explaining to Claude over and over is a skill waiting to be written down. The weather reporter's skills are a perfect example:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🌡️</span>
|
|
<div class="use-case-text">
|
|
<strong>Fetch Dubai's temperature</strong>
|
|
<span>Same API, same parameters, same format every time. That's <code>weather-fetcher</code>.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🖼️</span>
|
|
<div class="use-case-text">
|
|
<strong>Render the weather card</strong>
|
|
<span>Same SVG template, same output path, same design every time. That's <code>weather-svg-creator</code>.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">📝</span>
|
|
<div class="use-case-text">
|
|
<strong>"Format my weekly update"</strong>
|
|
<span>Same sections, same tone, same length every Monday. That's a skill waiting to be written.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>Takeaway</h4>
|
|
<p>Skills are how <strong>repetition becomes reliability</strong>. Write it down once, and Claude does it the same way forever — or until you update the skill.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 17: Why Separate Agents and Skills? -->
|
|
<div class="slide" data-slide="18">
|
|
<h1>Why Separate Agents and Skills?</h1>
|
|
<div class="two-col">
|
|
<div>
|
|
<h3>Agent = The Person</h3>
|
|
<p>The <code>weather-agent</code> is the person with the job title <strong>"Weather Reporter"</strong>.</p>
|
|
<p>It defines the <em>role</em> and <em>behavior</em>: use Open-Meteo, return temperature, track history in memory.</p>
|
|
</div>
|
|
<div>
|
|
<h3>Skill = The Training</h3>
|
|
<p>The <code>weather-fetcher</code> skill is the specific training on <strong>how</strong> to fetch weather data.</p>
|
|
<p>It contains exact instructions:</p>
|
|
<ul class="feature-list">
|
|
<li>Call this specific API URL</li>
|
|
<li>Extract <code>current.temperature_2m</code> from the response</li>
|
|
<li>Return value + unit in this exact format</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="how-to-trigger" style="margin-top: 24px;">
|
|
<h4>The Power</h4>
|
|
<p><strong>One agent can have multiple skills</strong>, and <strong>one skill can be used by multiple agents</strong>. Skills are reusable building blocks. Agents are the people who use them.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 18: How to Create Your Own Skill -->
|
|
<div class="slide" data-slide="19">
|
|
<h1>How to Create Your Own Skill</h1>
|
|
<p>Skills are plain markdown files. If you can write a recipe, you can write a skill.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The File</h4>
|
|
<p>Create <code>.claude/skills/<your-skill-name>/SKILL.md</code> in your project. That's it.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Pick a repeated task</strong>
|
|
<span>Something you explain to Claude more than once. "Fetch Dubai weather" is a perfect first skill.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Make a folder and a SKILL.md</strong>
|
|
<span>Path: <code>.claude/skills/weather-fetcher/SKILL.md</code>. Or ask Claude: "Turn this into a skill."</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Write the recipe in plain English</strong>
|
|
<span>Same words you'd use to explain it to a coworker. Skills are instructions, not code.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># File: .claude/skills/weather-fetcher/SKILL.md</span>
|
|
<span class="string">---</span>
|
|
<span class="key">name</span>: <span class="string">weather-fetcher</span>
|
|
<span class="key">description</span>: <span class="string">Fetch current temperature for Dubai from Open-Meteo API</span>
|
|
<span class="key">user-invocable</span>: <span class="string">false</span>
|
|
<span class="string">---</span>
|
|
|
|
Fetch the current temperature for Dubai, UAE.
|
|
|
|
1. Call the Open-Meteo API:
|
|
<span class="cmd">https://api.open-meteo.com/v1/forecast</span>
|
|
<span class="cmd">?latitude=25.2048&longitude=55.2708¤t=temperature_2m</span>
|
|
|
|
2. Extract <span class="key">current.temperature_2m</span> from the response
|
|
|
|
3. Return: <span class="string">"The temperature in Dubai is {value}{unit}"</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>The skill contains <strong>instructions, not code</strong>. It tells Claude <em>how</em> to do something using its existing tools.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 19: Skill Config Fields -->
|
|
<div class="slide" data-slide="20">
|
|
<h1>Skill Config Fields</h1>
|
|
<p>The small config block at the top of a SKILL.md (the "frontmatter") controls how the skill behaves:</p>
|
|
<div style="margin: 24px 0;">
|
|
<div class="field-row">
|
|
<span class="field-name">name</span>
|
|
<span class="field-desc">Display name and <code>/slash-command</code>. Defaults to directory name</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">description <span class="field-recommended">Recommended</span></span>
|
|
<span class="field-desc">What the skill does — shown in autocomplete, used for auto-discovery</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">user-invocable</span>
|
|
<span class="field-desc">Set <code>false</code> to hide from <code>/</code> menu — <strong>weather-fetcher uses this</strong> because it's agent-only</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">allowed-tools</span>
|
|
<span class="field-desc">Tools allowed without permission prompts when skill is active</span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">model</span>
|
|
<span class="field-desc">Model to use: <code>haiku</code>, <code>sonnet</code>, or <code>opus</code></span>
|
|
</div>
|
|
<div class="field-row">
|
|
<span class="field-name">context</span>
|
|
<span class="field-desc">Set to <code>fork</code> to run in isolated subagent context</span>
|
|
</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<h4>Two Ways to Use Skills</h4>
|
|
<p><strong>User-invocable</strong>: appears in <code>/</code> menu, user runs it directly (like <code>weather-svg-creator</code>). <strong>Agent-preloaded</strong>: set <code>user-invocable: false</code>, then list it in an agent's <code>skills:</code> field — it becomes domain knowledge injected into that agent (like <code>weather-fetcher</code>).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 3: CONTEXT (Slides 21-25) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 20: Context Section Divider -->
|
|
<div class="slide section-slide" data-slide="21" data-level="context">
|
|
<div class="section-number">Topic 3</div>
|
|
<h1>🧠 Context — The Reporter's Brain</h1>
|
|
<p class="section-desc">Now that you've met the reporter and know their skills, let's understand what they can actually hold in mind at once. Every agent — including the weather reporter — gets its own fresh brain.</p>
|
|
</div>
|
|
|
|
<!-- Slide 21: Claude's Brain -->
|
|
<div class="slide" data-slide="22">
|
|
<h1>Claude's Brain</h1>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>Imagine Claude has a <strong>brain</strong> that holds everything it's aware of right now — your question, every file it's opened, every tool result, every word it's said back to you. If a thought isn't in the brain, Claude can't use it. Simple as that.</p>
|
|
</div>
|
|
<img src="../assets/context-window.jpeg" alt="Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
|
|
<p>When the <code>weather-agent</code> is dispatched, it gets its own fresh brain — and <code>weather-fetcher</code> is pinned into it at startup via the <code>skills:</code> field. Everything you give Claude in a conversation lands in its brain:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">💬</span>
|
|
<div class="use-case-text">
|
|
<strong>Your messages</strong>
|
|
<span>Every question, clarification, and follow-up</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">📄</span>
|
|
<div class="use-case-text">
|
|
<strong>Every file Claude opens</strong>
|
|
<span>Read a 500-page PDF? All of it is in the brain now.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🔧</span>
|
|
<div class="use-case-text">
|
|
<strong>Every tool result</strong>
|
|
<span>Web searches, command output, screenshots — all held in memory</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>Two Things Every Non-Engineer Should Know</h4>
|
|
<p><strong>1. The brain is finite.</strong> It can hold about 1 million tokens — roughly 750,000 words, or a short novel. Big, but not infinite. <strong>2. The brain empties at the end of every chat.</strong> When you start a new conversation, Claude remembers <em>nothing</em> from the last one unless you tell it again.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 22: What Loads at Session Start -->
|
|
<div class="slide" data-slide="23">
|
|
<h1>What Loads at Session Start</h1>
|
|
<p>The moment you open Claude Code, certain things land in Claude's brain <strong>before you've typed a word</strong>. The rest waits in the wings — only loaded when you actually need it. This is called <strong>progressive disclosure</strong>.</p>
|
|
<img src="../assets/context.jpg" alt="Diagram showing what loads into Claude's context window at session start" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
|
|
<div class="use-cases" style="margin-top: 24px;">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">📋</span>
|
|
<div class="use-case-text">
|
|
<strong>CLAUDE.md — full content</strong>
|
|
<span>Standing instructions, every line. Always pinned in the brain at startup.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🎓</span>
|
|
<div class="use-case-text">
|
|
<strong>Skills — descriptions only</strong>
|
|
<span>Claude knows which skills exist and what each does. At startup, Claude knows <em>about</em> <code>weather-fetcher</code>; the full content loads when the agent runs.</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">👤</span>
|
|
<div class="use-case-text">
|
|
<strong>Agents — descriptions only</strong>
|
|
<span>The roster of specialists. The weather-agent's full system prompt loads when it's dispatched.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>The One-Liner</h4>
|
|
<p>Only <strong>descriptions</strong> of skills and agents are loaded at startup — the rest is fetched on-demand. That's <strong>progressive disclosure</strong>. It keeps the brain light.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 23: Keep the Brain Clear -->
|
|
<div class="slide" data-slide="24">
|
|
<h1>Keep the Brain Clear</h1>
|
|
<p>The more stuff crammed into Claude's brain, the harder it is to focus on what matters. This is called <strong>context rot</strong> — performance drops as the brain gets crowded.</p>
|
|
<div class="info-box">
|
|
<h4>Tip from Thariq (Anthropic) — Apr 16, 2026</h4>
|
|
<p>"Every turn is a branching point." After Claude finishes a response, you don't have to just keep typing. You have <strong>five options</strong> — and four of them exist to keep the brain clear.</p>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>When to use it</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Continue</strong></td>
|
|
<td>Same task, everything in the brain still matters</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Rewind</strong> (tap Esc twice)</td>
|
|
<td>Claude went down a wrong path — jump back and try again</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>/compact</strong></td>
|
|
<td>The brain is bloated — summarize and keep going</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>/clear</strong> (fresh chat)</td>
|
|
<td>Starting a truly new task — wipe the brain clean</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Subagent</strong></td>
|
|
<td>Next step will make a mess — send a helper to do it in <em>their own</em> brain</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="how-to-trigger">
|
|
<h4>Rule of Thumb</h4>
|
|
<p>When you start a <strong>new task</strong>, start a <strong>new chat</strong>. Don't let yesterday's thinking clutter today's brain.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 24: How to Manage Your Context -->
|
|
<div class="slide" data-slide="25">
|
|
<h1>How to Manage Your Context</h1>
|
|
<p>You can't <em>create</em> the context — it's just there, the moment you open a chat. But you can <strong>see</strong> how full it is, <strong>trim</strong> it down, or <strong>wipe</strong> it clean. Three commands give you full control.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The Commands</h4>
|
|
<p><code>/context</code> shows you how full the brain is. <code>/compact</code> summarizes it. <code>/clear</code> wipes it.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Check how full the brain is — <code>/context</code></strong>
|
|
<span>Shows a breakdown of how many tokens are used and what's taking up space (system prompt, tools, files, conversation).</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Trim or reset — <code>/compact</code> or <code>/clear</code></strong>
|
|
<span><code>/compact</code> keeps a short summary so you can continue. <code>/clear</code> wipes everything for a truly fresh start.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Start the next task fresh</strong>
|
|
<span>The brain is light again — re-state the goal, and Claude works without yesterday's clutter.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># The three context commands</span>
|
|
<span class="cmd">/context</span> <span class="comment"># Check how full the brain is right now</span>
|
|
<span class="cmd">/compact</span> <span class="comment"># Summarize what's there and keep going on top</span>
|
|
<span class="cmd">/clear</span> <span class="comment"># Wipe the brain — fresh chat, nothing remembered</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>Check first with <code>/context</code>. Trim with <code>/compact</code>. Reset with <code>/clear</code> when starting a new task.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 4: CLAUDE.md (Slides 26-31) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 25: CLAUDE.md Section Divider -->
|
|
<div class="slide section-slide" data-slide="26" data-level="claude-md">
|
|
<div class="section-number">Topic 4</div>
|
|
<h1>📋 CLAUDE.md — The Reporter's Pocket Rulebook</h1>
|
|
<p class="section-desc">The weather reporter consults this at the start of every shift — even though their brain resets overnight. It's the standing instructions pinned in that brain before you've said a word.</p>
|
|
</div>
|
|
|
|
<!-- Slide 26: The Employee Handbook -->
|
|
<div class="slide" data-slide="27">
|
|
<h1>The Employee Handbook</h1>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>Imagine hiring a brilliant new assistant every single morning — someone who forgets everything at 5pm. You'd get tired of re-explaining "we say <em>clients</em>, not <em>customers</em>" and "always CC my manager" over and over. So you pin those rules into their brain before the day starts. That's <code>CLAUDE.md</code>: a short list of standing instructions Claude reads first, every time.</p>
|
|
</div>
|
|
<p>For the weather reporter, CLAUDE.md might contain: "Always report in Celsius unless asked. Always cite Open-Meteo as the source." Here's a non-technical example:</p>
|
|
<div class="code-block"><span class="comment"># CLAUDE.md</span>
|
|
|
|
<span class="comment">## About this project</span>
|
|
This is the Q2 marketing campaign brief — targeting small business owners.
|
|
|
|
<span class="comment">## How I want you to talk to me</span>
|
|
- Always explain technical terms in plain language
|
|
- Before you run any command, tell me what it does in one sentence
|
|
- If I ask for an opinion, give me one — don't hedge
|
|
|
|
<span class="comment">## House rules</span>
|
|
- We say "clients" not "customers"
|
|
- Never edit files in the /archive folder
|
|
- Keep emails under 150 words</div>
|
|
<div class="how-to-trigger">
|
|
<h4>You Don't Have to Write It From Scratch</h4>
|
|
<p>Claude can draft your first CLAUDE.md for you. The next slide shows how.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 27: How to Create CLAUDE.md -->
|
|
<div class="slide" data-slide="28">
|
|
<h1>How to Create Your CLAUDE.md</h1>
|
|
<p>You don't need to write CLAUDE.md by hand. Claude can look at your project and draft one for you.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The Command</h4>
|
|
<p>Type <code>/init</code> inside Claude Code, in your project folder. Claude does the rest.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Type <code>/init</code> in Claude Code</strong>
|
|
<span>Make sure you're in your project folder. No other setup needed.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Claude reads your project</strong>
|
|
<span>It looks at your files, folder names, and README to figure out what the project is about.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Claude drafts a starter CLAUDE.md</strong>
|
|
<span>Saved to the root of your project. Open it and edit like any other document.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>Running <code>/init</code> is like <strong>asking the new hire to read everything on the shared drive before you meet them</strong> — they walk in already knowing the project's shape, and they write up what they learned as a handbook for future Claude.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># The 60-second workflow</span>
|
|
<span class="cmd">/init</span> <span class="comment"># Claude drafts the file</span>
|
|
<span class="claude-file">CLAUDE.md</span> appears <span class="comment"># In your project root</span>
|
|
open, edit, save <span class="comment"># Tweak it like any doc</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>You'll keep improving it over time. But <code>/init</code> gets you to a working draft in under a minute.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 28: Grow CLAUDE.md With Every Mistake -->
|
|
<div class="slide" data-slide="29">
|
|
<h1>Grow CLAUDE.md With Every Mistake</h1>
|
|
<div class="info-box">
|
|
<h4>Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026</h4>
|
|
<p>"After every correction, end with: <em>Update your CLAUDE.md so you don't make that mistake again.</em> Claude is eerily good at writing rules for itself."</p>
|
|
</div>
|
|
<p>The CLAUDE.md isn't something you write once and forget. It's a <strong>living memory</strong> of every lesson you've ever had to teach Claude. The workflow:</p>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Claude makes a mistake</strong>
|
|
<span>It uses the wrong tone, touches a file you didn't want touched, skips a step</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>You correct it</strong>
|
|
<span>"Actually, we never write in all caps. And always confirm before sending."</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>You say: "update your CLAUDE.md so this doesn't happen again"</strong>
|
|
<span>Claude writes the new rule for itself. Next conversation, it won't repeat the mistake.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>One Rule</h4>
|
|
<p>Keep it <strong>short</strong>. Under 200 lines. Long CLAUDE.md files get ignored — same as a 50-page employee handbook nobody reads.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 29: What Goes in CLAUDE.md -->
|
|
<div class="slide" data-slide="30">
|
|
<h1>What Goes in CLAUDE.md</h1>
|
|
<div class="code-block"><span class="comment"># CLAUDE.md</span>
|
|
|
|
<span class="comment">## Project Overview</span>
|
|
This is a TodoApp with a FastAPI backend and React frontend.
|
|
|
|
<span class="comment">## Key Commands</span>
|
|
- <span class="cmd">npm run dev</span> <span class="comment"># Start frontend</span>
|
|
- <span class="cmd">uvicorn main:app</span> <span class="comment"># Start backend</span>
|
|
- <span class="cmd">pytest</span> <span class="comment"># Run tests</span>
|
|
|
|
<span class="comment">## Architecture</span>
|
|
- Routes follow the pattern in <span class="string">routes/todos.py</span>
|
|
- Frontend components use Tailwind CSS
|
|
- Tests mirror the source tree: <span class="string">tests/test_*.py</span>
|
|
|
|
<span class="comment">## Rules</span>
|
|
- Always write tests for new endpoints
|
|
- Use the existing Sidebar component for navigation
|
|
- Keep CLAUDE.md under 200 lines</div>
|
|
<div class="warning-box">
|
|
<h4>Keep It Short</h4>
|
|
<p>Aim for under 200 lines. Files over 200 lines consume more context and may reduce adherence. Put detailed instructions in <code>.claude/rules/</code> instead.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 30: How CLAUDE.md Loads -->
|
|
<div class="slide" data-slide="31">
|
|
<h1>How CLAUDE.md Loads</h1>
|
|
<p>Claude Code uses two mechanisms to find CLAUDE.md files:</p>
|
|
<div class="two-col">
|
|
<div class="col-card" style="border-left: 4px solid #2196f3;">
|
|
<h4>Ancestor Loading (UP)</h4>
|
|
<p>At startup, Claude walks <strong>upward</strong> from your current directory and loads every CLAUDE.md it finds.</p>
|
|
<p style="margin-top: 12px;"><strong>Always loaded immediately.</strong></p>
|
|
</div>
|
|
<div class="col-card" style="border-left: 4px solid #ff9800;">
|
|
<h4>Descendant Loading (DOWN)</h4>
|
|
<p>CLAUDE.md files in subdirectories below you are loaded <strong>lazily</strong> — only when Claude reads files in those folders.</p>
|
|
<p style="margin-top: 12px;"><strong>Loaded on demand.</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># Example: running `claude` from /myapp</span>
|
|
/myapp/
|
|
<span class="claude-file">CLAUDE.md</span> <span class="comment"># Loaded at startup (current dir)</span>
|
|
frontend/
|
|
<span class="key">CLAUDE.md</span> <span class="comment"># Loaded when you touch frontend/ files</span>
|
|
backend/
|
|
<span class="key">CLAUDE.md</span> <span class="comment"># Loaded when you touch backend/ files</span></div>
|
|
<div class="info-box">
|
|
<h4>Rules Directory</h4>
|
|
<p>For topic-specific instructions, use <code>.claude/rules/*.md</code>. Each rule file can target specific file patterns using <code># Glob: pattern</code> at the top — they only load when Claude works with matching files.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 5: COMMANDS (Slides 32-34) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 31: Commands Section Divider -->
|
|
<div class="slide section-slide" data-slide="32" data-level="commands">
|
|
<div class="section-number">Topic 5</div>
|
|
<h1>⚡ Commands — The Trigger</h1>
|
|
<p class="section-desc">One word kicks off the whole chain. <code>/weather-orchestrator</code> → agent → skill → SVG card. Commands are the entry point into any workflow.</p>
|
|
</div>
|
|
|
|
<!-- Slide 32: Commands — The Entry Point -->
|
|
<div class="slide" data-slide="33">
|
|
<h1>Commands — The Entry Point</h1>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>If agents are employees and skills are their training, a <strong>command</strong> is the manager's playbook — "when someone asks for a weather report, first ask them Celsius or Fahrenheit, then dispatch the weather team, then create the visual."</p>
|
|
</div>
|
|
<p>You've already seen built-in commands in this presentation:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">📋</span>
|
|
<div class="use-case-text">
|
|
<strong><code>/init</code></strong>
|
|
<span>Drafts a CLAUDE.md for your project (Topic 4)</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">👤</span>
|
|
<div class="use-case-text">
|
|
<strong><code>/agents</code></strong>
|
|
<span>Opens the agent creator menu (Topic 1)</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🧠</span>
|
|
<div class="use-case-text">
|
|
<strong><code>/context</code></strong>
|
|
<span>Shows how full Claude's brain is right now (Topic 3)</span>
|
|
</div>
|
|
</div>
|
|
<div class="use-case-item">
|
|
<span class="use-case-icon">🧹</span>
|
|
<div class="use-case-text">
|
|
<strong><code>/clear</code> & <code>/compact</code></strong>
|
|
<span>Reset or summarize the brain (Topic 3)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>The Magic</h4>
|
|
<p>You can write your <strong>own</strong> commands the same way. The next slide shows how.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 33: How to Create Your Own Command -->
|
|
<div class="slide" data-slide="34">
|
|
<h1>How to Create Your Own Command</h1>
|
|
<p>Commands are markdown files too. If you can write a recipe, you can write a command.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The File</h4>
|
|
<p>Create <code>.claude/commands/<your-command-name>.md</code>. As soon as it's saved, <code>/<your-command-name></code> appears in Claude Code's slash menu.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Pick a workflow you trigger often</strong>
|
|
<span>"Generate this week's status report." Anything you'd want one keystroke for.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Create the file</strong>
|
|
<span>Path: <code>.claude/commands/weather-orchestrator.md</code>. The filename becomes the command name.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Write the playbook in plain English</strong>
|
|
<span>Step-by-step what Claude should do — including which agents to dispatch and which skills to invoke.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>A command is like <strong>a button on a coffee machine</strong>. One press, the machine grinds, brews, foams, pours. You don't think about the steps — you just want espresso. Slash commands are buttons you've labelled yourself.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># File: .claude/commands/weather-orchestrator.md</span>
|
|
<span class="string">---</span>
|
|
<span class="key">description</span>: <span class="string">Fetch weather data for Dubai and create an SVG weather card</span>
|
|
<span class="key">model</span>: <span class="string">haiku</span>
|
|
<span class="string">---</span>
|
|
|
|
1. Ask the user: Celsius or Fahrenheit?
|
|
2. Use the <span class="key">weather-agent</span> to fetch Dubai's temperature
|
|
3. Use the <span class="key">weather-svg-creator</span> skill to create an SVG card
|
|
4. Show the user the result</div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>Commands are how you turn a multi-step prompt into a single keystroke that anyone on your team can run.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- TOPIC 6: WORKFLOW (Slides 35-38) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 34: Workflow Sub-Section (Putting It All Together) -->
|
|
<div class="slide section-slide" data-slide="35" data-level="workflow">
|
|
<div class="section-number">Putting It All Together</div>
|
|
<h1>🎼 Workflow — All Five Pieces Together</h1>
|
|
<p class="section-desc">Watch the weather reporter example run from one keystroke to SVG card output. Five concepts, one orchestrated flow.</p>
|
|
</div>
|
|
|
|
<!-- Slide 35: Command → Agent → Skill -->
|
|
<div class="slide" data-slide="36">
|
|
<h1>Command → Agent → Skill</h1>
|
|
<p>This is the <strong>core architecture pattern</strong> of Claude Code workflows — demonstrated in this very repo by the weather example:</p>
|
|
<div class="code-block"><span class="comment">The Orchestration Flow</span>
|
|
|
|
<span class="key">/weather-orchestrator</span> <span class="comment">COMMAND (entry point)</span>
|
|
|
|
|
Step 1: Ask user C/F?
|
|
|
|
|
Step 2: <span class="cmd">Agent tool</span>
|
|
|
|
|
v
|
|
<span class="key">weather-agent</span> <span class="comment">AGENT (specialist)</span>
|
|
skill: <span class="string">weather-fetcher</span> <span class="comment">SKILL (preloaded training)</span>
|
|
tools: WebFetch, Read
|
|
|
|
|
Returns: temp + unit
|
|
|
|
|
Step 3: <span class="cmd">Skill tool</span>
|
|
|
|
|
v
|
|
<span class="key">weather-svg-creator</span> <span class="comment">SKILL (invoked directly)</span>
|
|
|
|
|
Creates: weather.svg + output.md</div>
|
|
</div>
|
|
|
|
<!-- Slide 36: Two Ways Skills Are Used -->
|
|
<div class="slide" data-slide="37">
|
|
<h1>Two Ways Skills Are Used</h1>
|
|
<p>The weather workflow demonstrates both skill patterns in a single flow:</p>
|
|
<div class="two-col">
|
|
<div class="col-card" style="border-left: 4px solid #9c27b0;">
|
|
<h4>Pattern 1: Agent Skill (Preloaded)</h4>
|
|
<p><code>weather-fetcher</code> is listed in the agent's <code>skills:</code> field.</p>
|
|
<p style="margin-top: 12px;">Its full content is <strong>injected into the agent's context</strong> at startup. The agent reads it like a reference manual.</p>
|
|
<div class="code-block" style="font-size: 0.8rem;"><span class="comment"># In weather-agent.md</span>
|
|
<span class="key">skills</span>:
|
|
- <span class="string">weather-fetcher</span></div>
|
|
</div>
|
|
<div class="col-card" style="border-left: 4px solid #2196f3;">
|
|
<h4>Pattern 2: Direct Invocation</h4>
|
|
<p><code>weather-svg-creator</code> is called directly by the command via the Skill tool.</p>
|
|
<p style="margin-top: 12px;">It runs <strong>independently</strong> in the command's context, not inside any agent.</p>
|
|
<div class="code-block" style="font-size: 0.8rem;"><span class="comment"># In the command prompt</span>
|
|
<span class="cmd">Skill</span>(<span class="key">skill</span>: <span class="string">"weather-svg-creator"</span>)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 37: How to Wire Your Own Workflow -->
|
|
<div class="slide" data-slide="38">
|
|
<h1>How to Wire Your Own Workflow</h1>
|
|
<p>A workflow isn't a separate file type. It <em>emerges</em> when one command calls agents and skills in sequence.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>The Recipe</h4>
|
|
<p>One <strong>command</strong> at the top. One <strong>agent</strong> with a <strong>skill</strong> preloaded for fetching. One <strong>skill</strong> at the end for output. Wire them in the command file.</p>
|
|
</div>
|
|
<div class="hiring-steps">
|
|
<div class="hiring-step level-1">
|
|
<span class="hiring-step-number">1</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Write the command (entry point)</strong>
|
|
<span><code>.claude/commands/weather-orchestrator.md</code> — the playbook the user types.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-2">
|
|
<span class="hiring-step-number">2</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Write the agent and its preloaded skill</strong>
|
|
<span><code>.claude/agents/weather-agent.md</code> with <code>skills: [weather-fetcher]</code> in its config — the specialist + their training.</span>
|
|
</div>
|
|
</div>
|
|
<div class="hiring-step level-3">
|
|
<span class="hiring-step-number">3</span>
|
|
<div class="hiring-step-content">
|
|
<strong>Write the output skill</strong>
|
|
<span><code>.claude/skills/weather-svg-creator/SKILL.md</code> — invoked directly by the command after the agent returns.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="analogy-box">
|
|
<h4>Think of it like this</h4>
|
|
<p>The workflow is the <strong>relay race</strong>. The command is the starter pistol. The agent is runner one (fetches the data, hands the baton back). The skill is runner two (turns the data into a visual). You don't run the race — you just point and say "go."</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># The weather workflow — three files, one keystroke</span>
|
|
<span class="claude-file">.claude/commands/weather-orchestrator.md</span> <span class="comment"># Entry point</span>
|
|
<span class="claude-file">.claude/agents/weather-agent.md</span> <span class="comment"># Specialist + skill</span>
|
|
<span class="claude-file">.claude/skills/weather-fetcher/SKILL.md</span> <span class="comment"># Preloaded into agent</span>
|
|
<span class="claude-file">.claude/skills/weather-svg-creator/SKILL.md</span> <span class="comment"># Invoked by command</span>
|
|
|
|
<span class="comment"># User types one thing:</span>
|
|
<span class="cmd">/weather-orchestrator</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Takeaway</h4>
|
|
<p>Every workflow you'll ever build follows this same shape: <strong>Command at the top, Agent + Skill in the middle, Skill at the end</strong>. Once you've wired one, the rest are variations on the theme.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SLIDE 39: Closing -->
|
|
<!-- ============================================================ -->
|
|
<div class="slide title-slide" data-slide="39">
|
|
<h1>Journey So Far</h1>
|
|
<p class="subtitle">Five concepts, one running example</p>
|
|
<p style="margin-top: 20px; font-size: 1.1rem; color: #666; max-width: 640px;">From meeting the weather reporter to wiring the full <strong>Command → Agent → Skill</strong> chain. The same five pieces compose every workflow you'll ever build.</p>
|
|
<div style="margin-top: 40px; text-align: left; max-width: 500px;">
|
|
<p style="font-size: 1rem; color: #888; margin-bottom: 8px;">👤 Agents — the specialist with a job title</p>
|
|
<p style="font-size: 1rem; color: #888; margin-bottom: 8px;">🎓 Skills — the training they carry</p>
|
|
<p style="font-size: 1rem; color: #888; margin-bottom: 8px;">🧠 Context — the brain that resets each session</p>
|
|
<p style="font-size: 1rem; color: #888; margin-bottom: 8px;">📋 CLAUDE.md — the pocket rulebook that survives resets</p>
|
|
<p style="font-size: 1rem; color: #888; margin-bottom: 8px;">⚡ Commands & 🎼 Workflow — the trigger that wires it all</p>
|
|
</div>
|
|
<p style="margin-top: 40px; font-size: 0.95rem; color: #aaa;">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()">←</button>
|
|
<button class="nav-btn" id="nextBtn" onclick="nextSlide()">→</button>
|
|
</div>
|
|
<div class="slide-counter" id="slideCounter">1 / --</div>
|
|
<div class="keyboard-hint"><kbd>←</kbd> <kbd>→</kbd> or <kbd>Space</kbd> to navigate</div>
|
|
|
|
<script>
|
|
let currentSlide = 1;
|
|
const slides = document.querySelectorAll('[data-slide]');
|
|
const totalSlides = slides.length;
|
|
|
|
// Level definitions — arc order: Agents → Skills → Context → CLAUDE.md → Commands → Workflow
|
|
const LEVELS = {
|
|
'agents': { order: 1, color: 'hsl(35, 80%, 50%)', height: '17%', label: 'Agents' },
|
|
'skills': { order: 2, color: 'hsl(140, 60%, 45%)', height: '33%', label: 'Skills' },
|
|
'context': { order: 3, color: 'hsl(340, 50%, 55%)', height: '50%', label: 'Context' },
|
|
'claude-md': { order: 4, color: 'hsl(25, 75%, 50%)', height: '67%', label: 'CLAUDE.md' },
|
|
'commands': { order: 5, color: 'hsl(195, 65%, 50%)', height: '83%', label: 'Commands' },
|
|
'workflow': { order: 6, color: 'hsl(45, 90%, 45%)', height: '100%', label: 'Workflow' }
|
|
};
|
|
|
|
// Build slide-to-level map
|
|
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 = '<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>
|