Shayan Rais
1781 lines
100 KiB
HTML
1781 lines
100 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 — From Vibe Coding to Agentic Engineering</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fff; color: #1a1a1a; line-height: 1.6; }
|
|
.slide { display: none; min-height: 100vh; padding: 60px 80px; max-width: 1200px; margin: 0 auto; }
|
|
.slide.active { display: block; }
|
|
h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 40px; color: #1a1a1a; border-bottom: 2px solid #e5e5e5; padding-bottom: 20px; }
|
|
h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 24px; color: #2a2a2a; }
|
|
h3 { font-size: 1.3rem; font-weight: 600; margin: 24px 0 12px 0; color: #333; }
|
|
p { font-size: 1.1rem; margin-bottom: 16px; color: #444; }
|
|
code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.95rem; }
|
|
.slide.title-slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }
|
|
.title-slide h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; border-bottom: none; padding-bottom: 0; }
|
|
.title-slide .subtitle { font-size: 1.4rem; color: #555; margin-bottom: 50px; font-weight: 400; }
|
|
.slide.section-slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }
|
|
.section-slide h1 { font-size: 3rem; font-weight: 700; border-bottom: none; padding-bottom: 0; margin-bottom: 16px; }
|
|
.section-slide .section-number { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 3px; color: #999; margin-bottom: 20px; }
|
|
.section-slide .section-desc { font-size: 1.2rem; color: #666; max-width: 600px; }
|
|
.trigger-box { background: #f8f9fa; border-left: 4px solid #1a1a1a; padding: 20px 24px; margin: 24px 0; }
|
|
.trigger-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 8px; }
|
|
.trigger-box p { font-size: 1.05rem; color: #333; margin: 0; }
|
|
.how-to-trigger { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 20px 24px; margin: 16px 0 24px 0; }
|
|
.how-to-trigger h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #2e7d32; margin-bottom: 8px; }
|
|
.how-to-trigger p { font-size: 1.05rem; color: #1b5e20; margin: 0; }
|
|
.how-to-trigger code { background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.95rem; }
|
|
.warning-box { background: #fff3e0; border-left: 4px solid #ff9800; padding: 20px 24px; margin: 16px 0 24px 0; }
|
|
.warning-box h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #e65100; margin-bottom: 8px; }
|
|
.warning-box p { font-size: 1.05rem; color: #bf360c; margin: 0; }
|
|
.code-block { background: #1a1a1a; color: #e5e5e5; padding: 20px 24px; border-radius: 8px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.9rem; overflow-x: auto; margin: 20px 0; white-space: pre; line-height: 1.7; }
|
|
.code-block .comment { color: #6a9955; }
|
|
.code-block .key { color: #9cdcfe; }
|
|
.code-block .string { color: #ce9178; }
|
|
.code-block .cmd { color: #dcdcaa; }
|
|
.code-block .claude-file { color: #ff5252; }
|
|
.use-cases { margin: 24px 0; }
|
|
.use-case-item { display: flex; align-items: flex-start; margin-bottom: 12px; padding: 14px 20px; background: #fafafa; border-radius: 8px; }
|
|
.use-case-icon { font-size: 1.5rem; margin-right: 16px; min-width: 32px; }
|
|
.use-case-text { flex: 1; }
|
|
.use-case-text strong { display: block; font-size: 1.05rem; color: #1a1a1a; margin-bottom: 4px; }
|
|
.use-case-text span { font-size: 0.95rem; color: #666; }
|
|
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
|
|
.col-card { background: #f8f9fa; padding: 24px; border-radius: 8px; }
|
|
.col-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; }
|
|
.col-card.good { border-left: 4px solid #4caf50; }
|
|
.col-card.bad { border-left: 4px solid #f44336; }
|
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
|
|
.info-card { background: #f8f9fa; padding: 24px; border-radius: 8px; }
|
|
.info-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; }
|
|
.matcher-tag { display: inline-block; padding: 4px 10px; background: #e9ecef; border-radius: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; margin: 4px 4px 4px 0; color: #495057; }
|
|
.toc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
|
|
.toc-item { display: flex; align-items: center; padding: 16px 20px; background: #f8f9fa; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
|
|
.toc-item:hover { background: #eee; }
|
|
.toc-number { width: 28px; height: 28px; background: #1a1a1a; color: #fff; border-radius: 50%; text-align: center; line-height: 28px; font-size: 0.85rem; margin-right: 12px; font-weight: 600; flex-shrink: 0; }
|
|
.toc-name { font-size: 1rem; color: #1a1a1a; }
|
|
.step-number { display: inline-block; width: 36px; height: 36px; background: #1a1a1a; color: #fff; border-radius: 50%; text-align: center; line-height: 36px; font-weight: 600; font-size: 1rem; margin-right: 12px; }
|
|
.feature-list { list-style: none; margin: 24px 0; }
|
|
.feature-list li { padding: 12px 0; border-bottom: 1px solid #eee; font-size: 1.05rem; }
|
|
.feature-list li:last-child { border-bottom: none; }
|
|
.navigation { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 12px; z-index: 100; }
|
|
.nav-btn { width: 50px; height: 50px; border: 2px solid #1a1a1a; background: #fff; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
|
|
.nav-btn:hover { background: #1a1a1a; color: #fff; }
|
|
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.progress { position: fixed; top: 0; left: 0; height: 4px; background: #1a1a1a; transition: width 0.3s; z-index: 100; }
|
|
.slide-counter { position: fixed; bottom: 40px; left: 40px; font-size: 0.9rem; color: #999; }
|
|
.keyboard-hint { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 0.85rem; color: #999; }
|
|
.keyboard-hint kbd { background: #f0f0f0; padding: 4px 8px; border-radius: 4px; border: 1px solid #ddd; font-family: inherit; }
|
|
.header-logo { position: fixed; top: 20px; right: 40px; width: 100px; height: 65px; z-index: 50; }
|
|
.header-logo img { width: 100%; height: 100%; }
|
|
.title-logo { width: 200px; height: 130px; margin-bottom: 40px; }
|
|
.title-logo img { width: 100%; height: 100%; }
|
|
/* Journey Bar — vertical, right side below mascot */
|
|
.journey-bar { position: fixed; top: 95px; right: 62px; display: flex; flex-direction: column; align-items: center; z-index: 99; gap: 6px; }
|
|
.journey-bar.hidden { display: none; }
|
|
.journey-track-wrap { position: relative; display: flex; align-items: stretch; gap: 4px; }
|
|
.journey-track { width: 20px; height: 280px; background: #e5e5e5; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; }
|
|
.journey-fill { position: absolute; bottom: 0; width: 100%; border-radius: 10px; transition: height 0.4s ease, background-color 0.4s ease; height: 0%; }
|
|
.journey-level-label { font-size: 0.65rem; color: #777; font-weight: 400; }
|
|
/* Level tick marks beside the journey track */
|
|
.journey-ticks { display: flex; flex-direction: column; justify-content: space-between; height: 280px; padding: 2px 0; }
|
|
.journey-tick { font-size: 0.45rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #999; white-space: nowrap; line-height: 1; }
|
|
/* Level badge shown on level-transition slides */
|
|
.level-badge { display: inline-block; background: #e8f5e9; color: #2e7d32; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: 12px; vertical-align: middle; }
|
|
/* Celebration slide */
|
|
.celebration { font-size: 4rem; margin-bottom: 24px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="progress" id="progress"></div>
|
|
<div class="journey-bar hidden" id="journeyBar">
|
|
<div class="journey-track-wrap">
|
|
<div class="journey-track"><div class="journey-fill" id="journeyFill"></div></div>
|
|
<div class="journey-ticks">
|
|
<span class="journey-tick">Pro</span>
|
|
<span class="journey-tick">High</span>
|
|
<span class="journey-tick">Med</span>
|
|
<span class="journey-tick">Low</span>
|
|
</div>
|
|
</div>
|
|
<span class="journey-level-label" id="journeyLevelLabel">Current = <strong>Low</strong></span>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 0: INTRODUCTION (Slides 1-4, no weight) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- 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</h1>
|
|
<p class="subtitle">From Vibe Coding to Agentic Engineering</p>
|
|
<p style="margin-top: 60px; font-size: 0.95rem; color: #888;">A journey through every best practice — with a real project.</p>
|
|
</div>
|
|
|
|
<!-- Slide 2: The Example Project -->
|
|
<div class="slide" data-slide="2">
|
|
<h1>The Example Project: TodoApp</h1>
|
|
<div class="trigger-box">
|
|
<h4>Running Example</h4>
|
|
<p>Every technique in this presentation is demonstrated on a <strong>TodoApp monorepo</strong> — showing the transformation from a plain project to one with full Claude Code configuration.</p>
|
|
</div>
|
|
<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 3: What is Vibe Coding? -->
|
|
<div class="slide" data-slide="3">
|
|
<h1>What is Vibe Coding?</h1>
|
|
<p>This is where everyone starts. The question is: how fast can you move beyond it?</p>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>What Happens (Low Level)</h4>
|
|
<p><code>> add a notes feature</code></p>
|
|
<p>Claude creates <code>/api/notes</code> with a random schema</p>
|
|
<p>Frontend gets a standalone page with no sidebar nav</p>
|
|
<p>Tests? None. Patterns? Ignored.</p>
|
|
<p style="margin-top: 16px; color: #c62828;">Every new feature is a coin flip. Code entropy increases with every prompt.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>What We Want (High Level)</h4>
|
|
<p>Claude knows the TodoApp architecture</p>
|
|
<p>New routes follow existing patterns in <code>routes/todos.py</code></p>
|
|
<p>Frontend uses <code>Sidebar.tsx</code> nav and Tailwind tokens</p>
|
|
<p>Tests written automatically matching <code>test_todos.py</code> style</p>
|
|
<p style="margin-top: 16px; color: #2e7d32;">Consistent, tested, production-quality code — every time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Journey Map -->
|
|
<div class="slide" data-slide="4">
|
|
<h1>The Journey</h1>
|
|
<div class="trigger-box">
|
|
<h4>From Low to High</h4>
|
|
<p>Each section adds techniques that move you from vibe coding toward fully agentic engineering.</p>
|
|
</div>
|
|
<div class="toc-list" style="margin-top: 24px;">
|
|
<div class="toc-item" onclick="goToSlide(5)"><span class="toc-number">1</span><span class="toc-name">Prerequisites</span></div>
|
|
<div class="toc-item" onclick="goToSlide(10)"><span class="toc-number">2</span><span class="toc-name">Better Prompting — Low</span></div>
|
|
<div class="toc-item" onclick="goToSlide(18)"><span class="toc-number">3</span><span class="toc-name">Project Memory — Medium</span></div>
|
|
<div class="toc-item" onclick="goToSlide(25)"><span class="toc-number">4</span><span class="toc-name">Structured Workflows — Medium</span></div>
|
|
<div class="toc-item" onclick="goToSlide(29)"><span class="toc-number">5</span><span class="toc-name">Domain Knowledge — High</span></div>
|
|
<div class="toc-item" onclick="goToSlide(34)"><span class="toc-number">6</span><span class="toc-name">Agentic Engineering — High</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 1: PREREQUISITES (Slides 5-9, no weight) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 5: Installing -->
|
|
<div class="slide" data-slide="5">
|
|
<h1>Installing Claude Code</h1>
|
|
<div class="trigger-box">
|
|
<h4>Prerequisite</h4>
|
|
<p>Homebrew must be installed on your Mac.</p>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>Install via Homebrew</h4>
|
|
<p>Run this in your terminal:</p>
|
|
<div class="code-block">brew install claude-code</div>
|
|
</div>
|
|
<h3>Verify Installation</h3>
|
|
<div class="code-block">claude --version</div>
|
|
<h3>Update Later</h3>
|
|
<div class="code-block">brew upgrade claude-code</div>
|
|
<p style="margin-top: 24px; color: #666;">Run <code>/doctor</code> anytime to check your installation health.</p>
|
|
</div>
|
|
|
|
<!-- Slide 6: Login — Subscription -->
|
|
<div class="slide" data-slide="6">
|
|
<h1>Login Option A: Subscription</h1>
|
|
<p>Use your Claude Pro or Max subscription via OAuth login:</p>
|
|
<div class="code-block"><span class="cmd">claude</span>
|
|
<span class="comment"># Select "Claude.ai" at the login prompt</span>
|
|
<span class="comment"># Opens browser for OAuth</span></div>
|
|
<h3>Subscription Tiers</h3>
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px;">
|
|
<thead>
|
|
<tr style="border-bottom: 2px solid #ddd; text-align: left;">
|
|
<th style="padding: 8px 12px;">Plan</th>
|
|
<th style="padding: 8px 12px;">Price</th>
|
|
<th style="padding: 8px 12px;">Weekly Limit</th>
|
|
<th style="padding: 8px 12px;">Sonnet 4.5</th>
|
|
<th style="padding: 8px 12px;">Opus 4.6</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 8px 12px;"><strong>Pro</strong></td>
|
|
<td style="padding: 8px 12px;">$20/mo</td>
|
|
<td style="padding: 8px 12px;">Base limit</td>
|
|
<td style="padding: 8px 12px; color: green;">✓</td>
|
|
<td style="padding: 8px 12px; color: #c00;">✗</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 8px 12px;"><strong>Max 5x</strong></td>
|
|
<td style="padding: 8px 12px;">$100/mo</td>
|
|
<td style="padding: 8px 12px;">5× Pro limit</td>
|
|
<td style="padding: 8px 12px; color: green;">✓</td>
|
|
<td style="padding: 8px 12px; color: green;">✓</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 12px;"><strong>Max 20x</strong></td>
|
|
<td style="padding: 8px 12px;">$200/mo</td>
|
|
<td style="padding: 8px 12px;">20× Pro limit</td>
|
|
<td style="padding: 8px 12px; color: green;">✓</td>
|
|
<td style="padding: 8px 12px; color: green;">✓</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p style="margin-top: 14px; color: #666; font-size: 0.85rem;">Weekly limits reset every 7 days. Usage is shared across Claude web, desktop, and Claude Code. Opus 4.6 requires a Max plan.</p>
|
|
</div>
|
|
|
|
<!-- Slide 7: Login — API Key -->
|
|
<div class="slide" data-slide="7">
|
|
<h1>Login Option B: API Key</h1>
|
|
<p>Pay per token with an Anthropic API key — no weekly caps:</p>
|
|
<h3>Token Pricing <span style="font-weight: 400; font-size: 0.8rem; color: #888;">(per million tokens)</span></h3>
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px;">
|
|
<thead>
|
|
<tr style="border-bottom: 2px solid #ddd; text-align: left;">
|
|
<th style="padding: 8px 12px;">Model</th>
|
|
<th style="padding: 8px 12px;">Input</th>
|
|
<th style="padding: 8px 12px;">Output</th>
|
|
<th style="padding: 8px 12px;">Context Window</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 8px 12px;"><strong>Opus 4.6</strong></td>
|
|
<td style="padding: 8px 12px;">$5 / MTok</td>
|
|
<td style="padding: 8px 12px;">$25 / MTok</td>
|
|
<td style="padding: 8px 12px;">200K (1M beta)</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 8px 12px;"><strong>Sonnet 4.5</strong></td>
|
|
<td style="padding: 8px 12px;">$3 / MTok</td>
|
|
<td style="padding: 8px 12px;">$15 / MTok</td>
|
|
<td style="padding: 8px 12px;">200K (1M beta)</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 12px;"><strong>Haiku 4.5</strong></td>
|
|
<td style="padding: 8px 12px;">$0.80 / MTok</td>
|
|
<td style="padding: 8px 12px;">$4 / MTok</td>
|
|
<td style="padding: 8px 12px;">200K (1M beta)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="how-to-trigger">
|
|
<h4>Setup</h4>
|
|
<div class="code-block"><span class="cmd">export</span> ANTHROPIC_API_KEY=sk-ant-...
|
|
<span class="cmd">claude</span></div>
|
|
</div>
|
|
<p><strong>Best for:</strong> Heavy usage, CI/CD pipelines, teams needing predictable billing</p>
|
|
</div>
|
|
|
|
<!-- Slide 8: First Session (this IS vibe coding) -->
|
|
<div class="slide" data-slide="8">
|
|
<h1>Your First Session</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Start Claude Code</h4>
|
|
<p>Navigate to your project and run:</p>
|
|
<div class="code-block"><span class="cmd">cd</span> ~/todoapp
|
|
<span class="cmd">claude</span></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>What Happens</h4>
|
|
<p>Claude Code scans your project structure, reads CLAUDE.md (if it exists), and opens an interactive REPL where you can type prompts.</p>
|
|
</div>
|
|
<h3>This IS Vibe Coding</h3>
|
|
<p>Right now, with no CLAUDE.md, no skills, no agents — you're at the <strong>Low</strong> level. Claude will guess at everything. That's okay. We'll fix it step by step.</p>
|
|
</div>
|
|
|
|
<!-- Slide 9: The Interface -->
|
|
<div class="slide" data-slide="9">
|
|
<h1>The Interface</h1>
|
|
<div class="code-block"><span class="comment">+-----------------------------------------+</span>
|
|
<span class="comment">|</span> <span class="string">Claude Code</span> v2.1.33
|
|
<span class="comment">|</span> Model: claude-opus-4-6
|
|
<span class="comment">|</span> Project: ~/todoapp
|
|
<span class="comment">+-----------------------------------------+</span>
|
|
|
|
<span class="cmd">></span> Type your prompt here...</div>
|
|
<h3>Quick Reference</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">⌨</span><div class="use-case-text"><strong>Enter</strong><span>Submit your prompt</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">↵</span><div class="use-case-text"><strong>Shift+Enter or \</strong><span>New line (multiline input)</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">■</span><div class="use-case-text"><strong>Ctrl+C</strong><span>Cancel current generation</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">▶</span><div class="use-case-text"><strong>Ctrl+D or /exit</strong><span>Exit Claude Code</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 2: BETTER PROMPTING (Slides 10-17, 0% -> 20%) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 10: Section Divider - Better Prompting -->
|
|
<div class="slide section-slide" data-slide="10" data-level="low">
|
|
<p class="section-number">Part 2</p>
|
|
<h1>Better Prompting</h1>
|
|
<p class="section-desc">Level: Low — effective prompting that produces real, production-quality results.</p>
|
|
</div>
|
|
|
|
<!-- Slide 11: Your First Prompt -->
|
|
<div class="slide" data-slide="11">
|
|
<h1>Your First Prompt</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<p>Start simple — ask Claude to understand your project:</p>
|
|
<div class="code-block"><span class="cmd">></span> Read the README.md and give me a summary of this project</div>
|
|
</div>
|
|
<p>Claude will use the <strong>Read</strong> tool to open the file, then summarize it. You'll see the tool call in the output.</p>
|
|
<h3>What Just Happened?</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">1️⃣</span><div class="use-case-text"><strong>Claude read your prompt</strong><span>Understood you want a summary</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">2️⃣</span><div class="use-case-text"><strong>Used the Read tool</strong><span>Opened README.md from your project</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">3️⃣</span><div class="use-case-text"><strong>Responded with a summary</strong><span>Based on actual file contents, not guessing</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: Good vs Bad Prompts -->
|
|
<div class="slide" data-slide="12">
|
|
<h1>Good vs Bad Prompts</h1>
|
|
<p>The difference between vibe coding and professional usage — shown on our TodoApp:</p>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>Vibe Coding</h4>
|
|
<div class="code-block"><span class="cmd">></span> add a notes feature</div>
|
|
<p style="margin-top: 12px;">Claude creates a random <code>/api/notes</code> endpoint with a new schema that doesn't match <code>models/todo.py</code>. Frontend page has no sidebar nav.</p>
|
|
<p style="color: #c62828;">Vague, no context, no constraints.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>Professional</h4>
|
|
<div class="code-block"><span class="cmd">></span> In backend/routes/todos.py, add a
|
|
PUT /api/todos/{id}/complete endpoint.
|
|
Follow the existing route pattern and
|
|
update the Todo model's is_completed field.
|
|
Add a test in tests/test_todos.py.</div>
|
|
<p style="color: #2e7d32;">Specific file, specific endpoint, specific pattern.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 13: Providing Context -->
|
|
<div class="slide" data-slide="13">
|
|
<h1>Providing Context</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Rule</h4>
|
|
<p>The more context you give, the better Claude performs. Use <code>@</code> to reference files directly in your prompt.</p>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>TodoApp Example</h4>
|
|
<div class="code-block"><span class="cmd">></span> Look at @backend/routes/todos.py and @backend/models/todo.py
|
|
Add a priority field to the Todo model and update
|
|
the create endpoint to accept it.</div>
|
|
</div>
|
|
<h3>Context Tips</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📄</span><div class="use-case-text"><strong>@file/path</strong><span>Reference specific files for Claude to read</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📸</span><div class="use-case-text"><strong>Paste screenshots</strong><span>Ctrl+V to paste images of errors or UI</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📋</span><div class="use-case-text"><strong>Paste error logs</strong><span>Copy the full error message into your prompt</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 14: Context Window & /compact -->
|
|
<div class="slide" data-slide="14">
|
|
<h1>Context Window & /compact</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Concept</h4>
|
|
<p>Claude has a <strong>context window</strong> — a limit on how much conversation it can remember. Every prompt, file read, and response fills it up.</p>
|
|
</div>
|
|
<img src="../assets/context-window.jpeg" alt="Context window diagram showing how the 1M token limit is divided" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>What Fills Context</h4>
|
|
<p>Your prompts and messages</p>
|
|
<p>Every file Claude reads</p>
|
|
<p>Bash command output</p>
|
|
<p>Claude's own responses</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>/compact — The Fix</h4>
|
|
<div class="code-block"><span class="cmd">></span> /compact</div>
|
|
<p>Compresses conversation history into a summary. Claude continues from that summary.</p>
|
|
</div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>Best Practice</h4>
|
|
<p>Run <code>/compact</code> manually at <strong>~50% context usage</strong>. Don't wait until it auto-compacts — you lose control over what gets preserved.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 15: /plan mode -->
|
|
<div class="slide" data-slide="15">
|
|
<h1>/plan — Plan Before Code</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /plan
|
|
<span class="cmd">></span> Add user authentication to the TodoApp backend</div>
|
|
</div>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>Without /plan</h4>
|
|
<p>Claude writes code immediately</p>
|
|
<p>Wrong approach — redo everything</p>
|
|
<p>50% of context gone before real work starts</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>With /plan</h4>
|
|
<p>Claude explores codebase read-only</p>
|
|
<p>Proposes approach for your approval</p>
|
|
<p>Right approach from the start</p>
|
|
</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Rule of Thumb</h4>
|
|
<p>Always start with plan mode for any task that touches more than 2-3 files or involves architectural decisions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 16: Plan Mode in Practice -->
|
|
<div class="slide" data-slide="16">
|
|
<h1>Plan Mode in Practice</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Step by Step</h4>
|
|
<div class="code-block"><span class="comment"># Step 1: Enter plan mode</span>
|
|
<span class="cmd">></span> /plan
|
|
|
|
<span class="comment"># Step 2: Describe what you want</span>
|
|
<span class="cmd">></span> Add pagination to the /api/todos endpoint
|
|
|
|
<span class="comment"># Step 3: Claude explores and writes a plan</span>
|
|
<span class="comment"># (reads routes/todos.py, checks models, proposes approach)</span>
|
|
|
|
<span class="comment"># Step 4: Review the plan and approve it</span>
|
|
<span class="comment"># Claude then executes the approved plan</span></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>TodoApp Benefit</h4>
|
|
<p>In plan mode, Claude discovers your existing SQLAlchemy pagination pattern before writing a single line — no reinventing the wheel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 17: Prompting Best Practices -->
|
|
<div class="slide" data-slide="17">
|
|
<h1>Prompting Best Practices</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🎯</span><div class="use-case-text"><strong>Be specific about files</strong><span>"In backend/routes/todos.py" not "in the backend code"</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔎</span><div class="use-case-text"><strong>Describe the problem, not just the fix</strong><span>"The API returns 500 when..." not "make it work"</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📐</span><div class="use-case-text"><strong>Reference existing patterns</strong><span>"Follow the pattern in routes/todos.py" gives Claude a template</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🧩</span><div class="use-case-text"><strong>One task at a time</strong><span>Small, focused requests get better results than mega-prompts</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Ask Claude to verify</strong><span>"Run pytest after making changes" catches errors early</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📸</span><div class="use-case-text"><strong>Provide screenshots for UI issues</strong><span>A picture is worth a thousand words of description</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 3: PROJECT MEMORY (Slides 18-24, 20% -> 40%) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 18: Section Divider - Project Memory -->
|
|
<div class="slide section-slide" data-slide="18" data-level="medium">
|
|
<p class="section-number">Part 3</p>
|
|
<h1>Project Memory</h1>
|
|
<p class="section-desc">Level: Medium — make Claude remember your project, conventions, and preferences.</p>
|
|
</div>
|
|
|
|
<!-- Slide 19: CLAUDE.md & /init -->
|
|
<div class="slide" data-slide="19">
|
|
<h1>CLAUDE.md & /init</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Concept</h4>
|
|
<p>CLAUDE.md is a markdown file that Claude reads at the <strong>start of every session</strong>. It's your project's instruction manual for Claude.</p>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>Create It</h4>
|
|
<div class="code-block"><span class="cmd">></span> /init</div>
|
|
</div>
|
|
<h3>TodoApp CLAUDE.md</h3>
|
|
<div class="code-block"><span class="comment"># CLAUDE.md</span>
|
|
|
|
<span class="key">## Project</span>
|
|
TodoApp monorepo: FastAPI backend + Next.js frontend.
|
|
|
|
<span class="key">## Structure</span>
|
|
- backend/routes/ — FastAPI route handlers
|
|
- backend/models/ — SQLAlchemy models
|
|
- frontend/components/ — React components
|
|
- frontend/lib/api.ts — API client
|
|
|
|
<span class="key">## Commands</span>
|
|
- cd backend && uvicorn main:app --reload
|
|
- cd frontend && npm run dev
|
|
- cd backend && pytest
|
|
|
|
<span class="key">## Conventions</span>
|
|
- Backend: follow route patterns in routes/todos.py
|
|
- Frontend: use Tailwind, add nav to Sidebar.tsx
|
|
- Always add tests for new endpoints</div>
|
|
</div>
|
|
|
|
<!-- Slide 20: What to Include in CLAUDE.md -->
|
|
<div class="slide" data-slide="20">
|
|
<h1>What to Include in CLAUDE.md</h1>
|
|
<div class="two-col">
|
|
<div class="col-card good">
|
|
<h4>Include</h4>
|
|
<p>Project architecture overview</p>
|
|
<p>Build and test commands</p>
|
|
<p>Key file locations</p>
|
|
<p>Coding conventions</p>
|
|
<p>Common patterns to follow</p>
|
|
<p>Critical do's and don'ts</p>
|
|
</div>
|
|
<div class="col-card bad">
|
|
<h4>Avoid</h4>
|
|
<p>Entire API documentation</p>
|
|
<p>Long code examples</p>
|
|
<p>Secrets or API keys</p>
|
|
<p>Information that changes often</p>
|
|
<p>Anything over 150 lines total</p>
|
|
</div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>Critical Rule</h4>
|
|
<p>Keep CLAUDE.md under <strong>150 lines</strong>. Longer files dilute the instructions — Claude may ignore parts of it. Use Rules and Skills for detail.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 21: Keep Under 150 Lines -->
|
|
<div class="slide" data-slide="21">
|
|
<h1>Keep It Under 150 Lines</h1>
|
|
<h3>If You Need More Space</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📄</span><div class="use-case-text"><strong>Use Rules</strong><span>Put topic-specific instructions in <code>.claude/rules/*.md</code> files</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📚</span><div class="use-case-text"><strong>Use Skills</strong><span>Put domain knowledge in <code>.claude/skills/</code> — loaded on demand</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔗</span><div class="use-case-text"><strong>Reference files</strong><span>Point to docs rather than inlining content</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>The Hierarchy</h4>
|
|
<p><strong>CLAUDE.md</strong> (always loaded, <150 lines) → <strong>Rules</strong> (path-scoped, auto-loaded) → <strong>Skills</strong> (on-demand, any length).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 22: Rules -->
|
|
<div class="slide" data-slide="22">
|
|
<h1>Rules (.claude/rules/)</h1>
|
|
<div class="trigger-box">
|
|
<h4>What Are Rules?</h4>
|
|
<p>Modular, topic-specific instructions in individual markdown files. Unlike CLAUDE.md, rules can be <strong>scoped to specific paths</strong>.</p>
|
|
</div>
|
|
<h3>TodoApp Backend Testing Rule</h3>
|
|
<div class="code-block"><span class="comment"># .claude/rules/backend-testing.md</span>
|
|
---
|
|
<span class="key">globs</span>: [<span class="string">"backend/tests/**"</span>]
|
|
---
|
|
When writing tests for the backend:
|
|
- Use pytest with the existing conftest.py fixtures
|
|
- Follow the pattern in test_todos.py:
|
|
- Use TestClient from FastAPI
|
|
- Create test data with factory functions
|
|
- Assert status codes AND response body
|
|
- Clean up test database after each test
|
|
- Name tests: test_{action}_{entity}_{scenario}
|
|
- Always test both success and error cases</div>
|
|
<p>This rule only activates when Claude is working on test files — keeping context clean for other tasks.</p>
|
|
</div>
|
|
|
|
<!-- Slide 23: /memory & Hierarchy [MERGED] -->
|
|
<div class="slide" data-slide="23">
|
|
<h1>/memory & Memory Hierarchy</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /memory</div>
|
|
</div>
|
|
<p>Opens your CLAUDE.md memory files in an editor. Changes here persist across all sessions.</p>
|
|
<h3>Three Scopes (loaded in order)</h3>
|
|
<div class="code-block"><span class="comment"># All combined at session start:</span>
|
|
~/.claude/CLAUDE.md <span class="comment"># Global — all projects</span>
|
|
.claude/CLAUDE.md <span class="comment"># Project — shared with team via git</span>
|
|
.claude/CLAUDE.local.md <span class="comment"># Local — personal, git-ignored</span></div>
|
|
<div class="trigger-box">
|
|
<h4>TodoApp Tip</h4>
|
|
<p>Put your TodoApp CLAUDE.md in the repo root so the whole team shares it. Put personal preferences (editor, style) in <code>CLAUDE.local.md</code>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 24: Memory Best Practices -->
|
|
<div class="slide" data-slide="24">
|
|
<h1>Memory Best Practices</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📏</span><div class="use-case-text"><strong>CLAUDE.md under 150 lines</strong><span>Brief, focused, high-signal instructions</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📂</span><div class="use-case-text"><strong>Use rules for specifics</strong><span>Path-scoped rules in .claude/rules/ for targeted guidance</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">👥</span><div class="use-case-text"><strong>Commit project CLAUDE.md</strong><span>Team shares project conventions via git</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔒</span><div class="use-case-text"><strong>Use .local.md for personal prefs</strong><span>Git-ignored, won't affect teammates</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔄</span><div class="use-case-text"><strong>Review and trim regularly</strong><span>Outdated instructions cause confusion</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 4: STRUCTURED WORKFLOWS (Slides 25-28, 40% -> 50%) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 25: Section Divider - Structured Workflows -->
|
|
<div class="slide section-slide" data-slide="25">
|
|
<p class="section-number">Part 4</p>
|
|
<h1>Structured Workflows</h1>
|
|
<p class="section-desc">Level: Medium — systematic approaches that prevent wasted effort.</p>
|
|
</div>
|
|
|
|
<!-- Slide 26: Task Lists -->
|
|
<div class="slide" data-slide="26">
|
|
<h1>Task Lists</h1>
|
|
<p>For complex tasks, Claude creates a <strong>task list</strong> to track progress:</p>
|
|
<div class="code-block"><span class="cmd">></span> Add user authentication to the TodoApp:
|
|
- POST /api/register endpoint
|
|
- POST /api/login endpoint
|
|
- JWT auth middleware
|
|
- Protect /api/todos endpoints
|
|
- Tests for all auth endpoints</div>
|
|
<p>Claude breaks this into individual tasks and shows progress as it works through each one.</p>
|
|
<div class="trigger-box">
|
|
<h4>Best Practice</h4>
|
|
<p>Break subtasks small enough that each can be completed in under <strong>50% context</strong>. Commit after each subtask.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 27: /model Selection -->
|
|
<div class="slide" data-slide="27">
|
|
<h1>/model — Model Selection</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /model</div>
|
|
</div>
|
|
<p>Opens the model picker. Match the model to the task:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🧠</span><div class="use-case-text"><strong>Opus 4.6 (Default)</strong><span>Complex tasks — "Add auth to the TodoApp backend with JWT"</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚡</span><div class="use-case-text"><strong>Sonnet 4.5</strong><span>Everyday coding — "Add a completed_at field to the Todo model"</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🏎</span><div class="use-case-text"><strong>Haiku 4.5</strong><span>Simple tasks — "Read backend/routes/todos.py and summarize the endpoints"</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>Use <code>Option+P</code> (Mac) or <code>Alt+P</code> to quickly switch models. Use <code>/fast</code> for faster Opus output on non-complex tasks.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 28: Workflow Best Practices -->
|
|
<div class="slide" data-slide="28">
|
|
<h1>Workflow Best Practices</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🗺</span><div class="use-case-text"><strong>Always start with plan mode</strong><span>For any non-trivial task</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🧩</span><div class="use-case-text"><strong>Break tasks into small pieces</strong><span>Each subtask should complete in under 50% context</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">💾</span><div class="use-case-text"><strong>Commit after each subtask</strong><span>Clean rollback points, not one mega-commit</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📦</span><div class="use-case-text"><strong>Manual /compact at ~50%</strong><span>Don't wait for auto-compact</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🤖</span><div class="use-case-text"><strong>Vanilla Claude Code for small tasks</strong><span>Simple tasks don't need elaborate workflows</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 5: DOMAIN KNOWLEDGE (Slides 29-33, 50% -> 65%) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 29: Section Divider - Domain Knowledge -->
|
|
<div class="slide section-slide" data-slide="29" data-level="high">
|
|
<p class="section-number">Part 5</p>
|
|
<h1>Domain Knowledge</h1>
|
|
<p class="section-desc">Level: High — reusable knowledge that Claude loads on-demand.</p>
|
|
</div>
|
|
|
|
<!-- Slide 30: What Are Skills -->
|
|
<div class="slide" data-slide="30">
|
|
<h1>What Are Skills?</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Concept</h4>
|
|
<p>Skills are markdown files that contain <strong>domain knowledge</strong> — instructions, patterns, or workflows that Claude can load when needed. Think of them as micro-manuals.</p>
|
|
</div>
|
|
<h3>Why Skills?</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📚</span><div class="use-case-text"><strong>Progressive Disclosure</strong><span>Knowledge loaded only when relevant — doesn't bloat every session</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">♻</span><div class="use-case-text"><strong>Reusable</strong><span>Same skill works across agents and workflows</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">👥</span><div class="use-case-text"><strong>Shareable</strong><span>Commit to git — your whole team benefits</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Skills vs CLAUDE.md</h4>
|
|
<p><strong>CLAUDE.md</strong> = always loaded, every session. <strong>Skills</strong> = loaded on-demand, when relevant. Use skills for knowledge that's only needed sometimes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 31: Creating Skills - TodoApp -->
|
|
<div class="slide" data-slide="31">
|
|
<h1>Creating Skills: TodoApp Frontend</h1>
|
|
<h3>Frontend Conventions Skill</h3>
|
|
<div class="code-block"><span class="comment"># .claude/skills/frontend-conventions/SKILL.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">frontend-conventions</span>
|
|
<span class="key">description</span>: <span class="string">TodoApp frontend patterns and conventions</span>
|
|
---
|
|
|
|
<span class="comment"># Frontend Conventions</span>
|
|
|
|
When creating or modifying frontend components:
|
|
|
|
<span class="key">## Sidebar Navigation</span>
|
|
- Add new page routes to frontend/components/Sidebar.tsx
|
|
- Use the existing NavLink pattern with icon + label
|
|
- Keep alphabetical order in the nav list
|
|
|
|
<span class="key">## Component Patterns</span>
|
|
- Use functional components with TypeScript
|
|
- Import API functions from lib/api.ts
|
|
- Follow TodoList.tsx as the reference component
|
|
- Use Tailwind classes: bg-white, rounded-lg, shadow-sm
|
|
|
|
<span class="key">## API Integration</span>
|
|
- All API calls go through lib/api.ts
|
|
- Use the existing fetch wrapper with error handling
|
|
- Base URL: process.env.NEXT_PUBLIC_API_URL</div>
|
|
</div>
|
|
|
|
<!-- Slide 32: Skill Frontmatter & Invocation -->
|
|
<div class="slide" data-slide="32">
|
|
<h1>Skill Frontmatter & Invocation</h1>
|
|
<h3>Frontmatter Options</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📜</span><div class="use-case-text"><strong>name</strong><span>Skill identifier (uses directory name if omitted)</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📝</span><div class="use-case-text"><strong>description</strong><span>When to invoke — helps Claude auto-discover the skill</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🤖</span><div class="use-case-text"><strong>model</strong><span>Override which model runs the skill</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔧</span><div class="use-case-text"><strong>allowed-tools</strong><span>Restrict which tools the skill can use</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔁</span><div class="use-case-text"><strong>context: fork</strong><span>Run the skill in an isolated subagent context for complex workflows</span></div></div>
|
|
</div>
|
|
<h3>Invocation & Execution Modes</h3>
|
|
<div class="code-block"><span class="comment"># 1. Manual: slash command</span>
|
|
<span class="cmd">></span> /frontend-conventions
|
|
|
|
<span class="comment"># 2. Auto: Claude discovers via description field</span>
|
|
<span class="comment"># (happens when task matches description)</span>
|
|
|
|
<span class="comment"># 3. Preloaded: in an agent's frontmatter</span>
|
|
<span class="key">skills</span>:
|
|
- frontend-conventions
|
|
|
|
<span class="comment"># 4. Optional isolation for heavy workflows</span>
|
|
<span class="key">context</span>: <span class="string">fork</span></div>
|
|
</div>
|
|
|
|
<!-- Slide 33: Skills Summary -->
|
|
<div class="slide" data-slide="33">
|
|
<h1>Skills Summary</h1>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>What They Are</h4>
|
|
<p>Markdown files with domain knowledge</p>
|
|
<p>Live in <code>.claude/skills/</code></p>
|
|
<p>Have SKILL.md + optional supporting files</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>How to Use</h4>
|
|
<p><code>/skill-name</code> — manual invoke</p>
|
|
<p>Auto-discovered by description</p>
|
|
<p>Preloaded into agents via <code>skills:</code></p>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># Skill directory structure</span>
|
|
.claude/
|
|
skills/
|
|
frontend-conventions/
|
|
SKILL.md <span class="comment"># Main skill file (required)</span>
|
|
backend-patterns/
|
|
SKILL.md
|
|
error-handling.md <span class="comment"># Supporting file (optional)</span></div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- PART 6: AGENTIC ENGINEERING (Slides 34-46, 65% -> 75%) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 34: Section Divider - Agentic Engineering -->
|
|
<div class="slide section-slide" data-slide="34" data-level="high">
|
|
<p class="section-number">Part 6</p>
|
|
<h1>Agentic Engineering</h1>
|
|
<p class="section-desc">Level: High — custom agents that know your codebase and follow your patterns.</p>
|
|
</div>
|
|
|
|
<!-- Slide 35: What Are Agents -->
|
|
<div class="slide" data-slide="35">
|
|
<h1>What Are Agents?</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Concept</h4>
|
|
<p>Agents are markdown files in <code>.claude/agents/</code> that define a <strong>custom Claude persona</strong> with its own tools, model, skills, and behavior.</p>
|
|
</div>
|
|
<h3>Two Ways to Use Agents</h3>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>As Main Agent</h4>
|
|
<p>Replaces default Claude for your conversation.</p>
|
|
<div class="code-block"><span class="cmd">$</span> claude --agent frontend-engineer</div>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>As Subagent</h4>
|
|
<p>Spawned in an isolated context via Agent tool.</p>
|
|
<div class="code-block">Task(
|
|
subagent_type=<span class="string">"frontend-engineer"</span>
|
|
prompt=<span class="string">"Add a settings page"</span>
|
|
)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 36: Frontend Engineer Agent -->
|
|
<div class="slide" data-slide="36">
|
|
<h1>Frontend Engineer Agent</h1>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>Without Agent</h4>
|
|
<p><code>> add a settings page</code></p>
|
|
<p>Claude creates <code>pages/settings.tsx</code> with:</p>
|
|
<p>• Inline CSS (no Tailwind)</p>
|
|
<p>• Direct fetch calls (ignores api.ts)</p>
|
|
<p>• No sidebar nav entry</p>
|
|
<p style="color: #c62828;">Standalone page that doesn't fit the app.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>With Agent</h4>
|
|
<p>Frontend agent already knows:</p>
|
|
<p>• Use Tailwind tokens from the design system</p>
|
|
<p>• Import API functions from <code>lib/api.ts</code></p>
|
|
<p>• Add route to <code>Sidebar.tsx</code></p>
|
|
<p>• Follow <code>TodoList.tsx</code> component pattern</p>
|
|
<p style="color: #2e7d32;">Integrated page matching the app perfectly.</p>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># .claude/agents/frontend-engineer.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">frontend-engineer</span>
|
|
<span class="key">description</span>: <span class="string">Frontend development following TodoApp conventions</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Write, Edit, Bash, Glob, Grep</span>
|
|
<span class="key">model</span>: <span class="string">sonnet</span>
|
|
<span class="key">skills</span>:
|
|
- frontend-conventions
|
|
---
|
|
You are a frontend engineer for the TodoApp.
|
|
Always add new pages to the Sidebar navigation.
|
|
Use the existing API client in lib/api.ts.
|
|
Follow TodoList.tsx as your reference component.</div>
|
|
</div>
|
|
|
|
<!-- Slide 37: Backend Engineer Agent -->
|
|
<div class="slide" data-slide="37">
|
|
<h1>Backend Engineer Agent</h1>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>Without Agent</h4>
|
|
<p><code>> add a tags feature</code></p>
|
|
<p>Claude creates random endpoint structure</p>
|
|
<p>Different error handling than existing routes</p>
|
|
<p>No tests, no model validation</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>With Agent</h4>
|
|
<p>Backend agent follows existing patterns:</p>
|
|
<p>• Route structure from <code>routes/todos.py</code></p>
|
|
<p>• SQLAlchemy model like <code>models/todo.py</code></p>
|
|
<p>• Tests matching <code>test_todos.py</code> style</p>
|
|
<p>• Pydantic schemas for validation</p>
|
|
</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># .claude/agents/backend-engineer.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">backend-engineer</span>
|
|
<span class="key">description</span>: <span class="string">Backend development following TodoApp patterns</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Write, Edit, Bash, Glob, Grep</span>
|
|
<span class="key">model</span>: <span class="string">sonnet</span>
|
|
<span class="key">skills</span>:
|
|
- backend-patterns
|
|
---
|
|
You are a backend engineer for the TodoApp.
|
|
Follow the route patterns in routes/todos.py.
|
|
Create SQLAlchemy models matching models/todo.py.
|
|
Always add pytest tests for new endpoints.
|
|
Use Pydantic schemas for request/response validation.</div>
|
|
</div>
|
|
|
|
<!-- Slide 38: Agent Frontmatter -->
|
|
<div class="slide" data-slide="38">
|
|
<h1>Agent Frontmatter</h1>
|
|
<div class="code-block"><span class="comment"># .claude/agents/code-reviewer.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">code-reviewer</span>
|
|
<span class="key">description</span>: <span class="string">Reviews code for quality and best practices</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Grep, Glob</span>
|
|
<span class="key">model</span>: <span class="string">sonnet</span>
|
|
<span class="key">color</span>: <span class="string">green</span>
|
|
<span class="key">skills</span>:
|
|
- code-review
|
|
<span class="key">memory</span>: <span class="string">user</span>
|
|
---
|
|
|
|
You are a code reviewer. Check for security issues,
|
|
performance problems, and suggest improvements.
|
|
Review your memory for patterns you've seen before.</div>
|
|
<h3>Key Fields</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🔧</span><div class="use-case-text"><strong>tools</strong><span>What the agent can do (Read, Write, Edit, Bash, etc.)</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📚</span><div class="use-case-text"><strong>skills</strong><span>Knowledge preloaded at startup</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🧠</span><div class="use-case-text"><strong>memory</strong><span>Persistent learning across sessions (user/project/local)</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 39: Agent Tools & Skills -->
|
|
<div class="slide" data-slide="39">
|
|
<h1>Agent Tools & Skills</h1>
|
|
<h3>Restricting Tools</h3>
|
|
<div class="code-block"><span class="comment"># Read-only agent — can't modify anything</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Grep, Glob</span>
|
|
|
|
<span class="comment"># Full access agent</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Write, Edit, Bash, WebFetch</span>
|
|
|
|
<span class="comment"># Research-only agent</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Grep, Glob, WebSearch, WebFetch</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Key Pattern</h4>
|
|
<p>Skills provide <strong>static knowledge</strong> (what to do). Agents provide <strong>execution context</strong> (how to do it, with which tools). Together, they're powerful.</p>
|
|
</div>
|
|
<h3>Choosing a Model</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🧠</span><div class="use-case-text"><strong>opus</strong><span>Complex reasoning, architecture decisions</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚡</span><div class="use-case-text"><strong>sonnet</strong><span>Good balance of speed and capability</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🏎</span><div class="use-case-text"><strong>haiku</strong><span>Fast, cheap — great for simple, focused tasks</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 40: Subagents -->
|
|
<div class="slide" data-slide="40">
|
|
<h1>Subagents via Task Tool</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Concept</h4>
|
|
<p>Subagents run in an <strong>isolated context</strong> — separate from the main conversation. They do their work, return a summary, and their context is discarded.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># Claude spawns a subagent automatically or you can ask:</span>
|
|
<span class="cmd">></span> Use the frontend-engineer agent to add a settings page
|
|
|
|
<span class="comment"># Claude uses the Agent tool internally:</span>
|
|
Task(
|
|
subagent_type=<span class="string">"frontend-engineer"</span>,
|
|
prompt=<span class="string">"Add a user settings page to the TodoApp"</span>
|
|
)</div>
|
|
<h3>Built-in Subagent Types</h3>
|
|
<p>
|
|
<span class="matcher-tag">Explore</span>
|
|
<span class="matcher-tag">Plan</span>
|
|
<span class="matcher-tag">Bash</span>
|
|
<span class="matcher-tag">Your Custom Agents</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Slide 41: Commands & Orchestration -->
|
|
<div class="slide" data-slide="41">
|
|
<h1>Commands & Orchestration</h1>
|
|
<p>Commands are the entry points for complex workflows — the <strong>Command → Agent → Skills</strong> pattern:</p>
|
|
<div class="code-block"><span class="comment"># .claude/commands/add-feature.md</span>
|
|
---
|
|
<span class="key">description</span>: <span class="string">Add a new feature to the TodoApp</span>
|
|
<span class="key">model</span>: <span class="string">opus</span>
|
|
---
|
|
|
|
<span class="comment"># Add Feature Command</span>
|
|
|
|
1. Ask the user what feature to add (AskUserQuestion)
|
|
2. Invoke the backend-engineer agent for API work:
|
|
- Task(subagent_type="backend-engineer", ...)
|
|
3. Invoke the frontend-engineer agent for UI work:
|
|
- Task(subagent_type="frontend-engineer", ...)
|
|
4. Run tests to verify: pytest + npm test
|
|
5. Summarize what was built</div>
|
|
<div class="trigger-box">
|
|
<h4>Invoke It</h4>
|
|
<p>Commands live in <code>.claude/commands/</code>. Users invoke them as slash commands: <code>> /add-feature</code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 42: Hooks + MCP -->
|
|
<div class="slide" data-slide="42">
|
|
<h1>Hooks & MCP Servers</h1>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>Hooks</h4>
|
|
<p>Custom scripts at specific moments in Claude's lifecycle:</p>
|
|
<p><strong>PreToolUse</strong> — validate commands</p>
|
|
<p><strong>PostToolUse</strong> — auto-format code</p>
|
|
<p><strong>Stop</strong> — check task completion</p>
|
|
<p><strong>SessionStart</strong> — load context</p>
|
|
<p style="margin-top: 12px; color: #666;">16 hook events, 5 can block execution.</p>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>MCP Servers</h4>
|
|
<p>Connect Claude to external tools via Model Context Protocol:</p>
|
|
<p><strong>Playwright</strong> — browser automation</p>
|
|
<p><strong>Chrome DevTools</strong> — console logs</p>
|
|
<p><strong>Databases</strong> — query data directly</p>
|
|
<div class="code-block"><span class="cmd">></span> /mcp</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 43: Full Architecture -->
|
|
<div class="slide" data-slide="43">
|
|
<h1>Command → Agent → Skills</h1>
|
|
<p>The full architecture pattern for complex workflows:</p>
|
|
<div class="code-block"><span class="comment">+-----------------------------------------------+</span>
|
|
<span class="comment">|</span> <span class="key">/add-feature</span> (Command) <span class="comment">|</span>
|
|
<span class="comment">|</span> Entry point — user invokes this <span class="comment">|</span>
|
|
<span class="comment">|</span> | <span class="comment">|</span>
|
|
<span class="comment">|</span> +----------+----------+ <span class="comment">|</span>
|
|
<span class="comment">|</span> v v <span class="comment">|</span>
|
|
<span class="comment">|</span> <span class="key">backend-engineer</span> <span class="key">frontend-engineer</span> <span class="comment">|</span>
|
|
<span class="comment">|</span> (Agent) (Agent) <span class="comment">|</span>
|
|
<span class="comment">|</span> | | <span class="comment">|</span>
|
|
<span class="comment">|</span> <span class="string">backend-patterns</span> <span class="string">frontend-conventions</span> <span class="comment">|</span>
|
|
<span class="comment">|</span> (Skill) (Skill) <span class="comment">|</span>
|
|
<span class="comment">+-----------------------------------------------+</span></div>
|
|
<div class="trigger-box">
|
|
<h4>Why It Works</h4>
|
|
<p><strong>Commands</strong> = entry point. <strong>Agents</strong> = orchestration. <strong>Skills</strong> = domain knowledge. Clean separation, maximum reusability.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 44: The High Level Slide -->
|
|
<div class="slide section-slide" data-slide="44">
|
|
<p class="celebration">🎉</p>
|
|
<h1>High — Agentic Engineering</h1>
|
|
<p class="section-desc">Your TodoApp now has: CLAUDE.md for project context, Rules for path-scoped conventions, Skills for domain knowledge, Agents for consistent execution, Commands for orchestrated workflows, Hooks for lifecycle automation, and MCP servers for external tools.</p>
|
|
</div>
|
|
|
|
<!-- Slide 45: Agent Memory -->
|
|
<div class="slide" data-slide="45">
|
|
<h1>Agent Memory</h1>
|
|
<div class="trigger-box">
|
|
<h4>Key Feature</h4>
|
|
<p>Agents can <strong>learn across sessions</strong>. Add <code>memory: user</code> to the frontmatter and the agent builds its own persistent knowledge store.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># Agent remembers patterns it discovers</span>
|
|
~/.claude/agent-memory/code-reviewer/
|
|
MEMORY.md <span class="comment"># First 200 lines auto-loaded</span>
|
|
react-patterns.md <span class="comment"># Topic-specific notes</span>
|
|
security-checklist.md <span class="comment"># Learned over time</span></div>
|
|
<h3>Memory Scopes</h3>
|
|
<p>
|
|
<span class="matcher-tag">user — cross-project</span>
|
|
<span class="matcher-tag">project — team-shared</span>
|
|
<span class="matcher-tag">local — personal</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Slide 46: Agents Summary -->
|
|
<div class="slide" data-slide="46">
|
|
<h1>Agents Summary</h1>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>Creating Agents</h4>
|
|
<p>Drop <code>.md</code> files in <code>.claude/agents/</code></p>
|
|
<p>Set name, tools, model, skills, memory</p>
|
|
<p>Use <code>/agents</code> to manage interactively</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Using Agents</h4>
|
|
<p><strong>Main agent:</strong> <code>"agent"</code> in settings.json</p>
|
|
<p><strong>Subagent:</strong> Agent tool spawns it</p>
|
|
<p><strong>CLI:</strong> <code>--agent name</code></p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Best Practices</h4>
|
|
<p>Feature-specific agents, not generic ones</p>
|
|
<p>Preload skills for domain knowledge</p>
|
|
<p>Use haiku model for simple focused tasks</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Architecture</h4>
|
|
<p>Command → Agent → Skills</p>
|
|
<p>Progressive disclosure of knowledge</p>
|
|
<p>Single execution context per agent</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- APPENDIX: REFERENCE (Slides 47+, no weight) -->
|
|
<!-- ============================================================ -->
|
|
|
|
<!-- Slide 47: Section Divider - Appendix -->
|
|
<div class="slide section-slide" data-slide="47">
|
|
<p class="section-number">Appendix</p>
|
|
<h1>Reference</h1>
|
|
<p class="section-desc">Command references, workflows, settings, and customization options.</p>
|
|
</div>
|
|
|
|
<!-- Slide 48: How Claude Uses Tools -->
|
|
<div class="slide" data-slide="48">
|
|
<h1>How Claude Uses Tools</h1>
|
|
<p>Claude Code doesn't just generate text — it <strong>takes actions</strong> using tools:</p>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>File Tools</h4>
|
|
<p><strong>Read</strong> — Read file contents</p>
|
|
<p><strong>Edit</strong> — Modify existing files</p>
|
|
<p><strong>Write</strong> — Create new files</p>
|
|
<p><strong>Glob</strong> — Find files by pattern</p>
|
|
<p><strong>Grep</strong> — Search file contents</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Action Tools</h4>
|
|
<p><strong>Bash</strong> — Run shell commands</p>
|
|
<p><strong>Task</strong> — Spawn subagents</p>
|
|
<p><strong>WebFetch</strong> — Fetch URLs</p>
|
|
<p><strong>WebSearch</strong> — Search the web</p>
|
|
<p><strong>Skill</strong> — Invoke skills</p>
|
|
</div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>Important</h4>
|
|
<p>Claude asks for permission before running potentially dangerous commands. Always review what it's about to do.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 49: File Operations -->
|
|
<div class="slide" data-slide="49">
|
|
<h1>File Operations</h1>
|
|
<h3>Reading Files</h3>
|
|
<div class="code-block"><span class="cmd">></span> Read the package.json file</div>
|
|
<h3>Editing Files</h3>
|
|
<div class="code-block"><span class="cmd">></span> In src/utils/format.ts, change the date format from MM/DD to DD/MM</div>
|
|
<h3>Creating Files</h3>
|
|
<div class="code-block"><span class="cmd">></span> Create a new test file for the user service at tests/user.test.ts</div>
|
|
<div class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>Always tell Claude <strong>which file</strong> to edit. Don't say "fix the bug" — say "fix the null check in <code>src/handlers/auth.ts</code> line 42".</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 50: Bash & Search -->
|
|
<div class="slide" data-slide="50">
|
|
<h1>Bash Commands & Search</h1>
|
|
<h3>Running Commands</h3>
|
|
<div class="code-block"><span class="cmd">></span> Run the test suite: npm test
|
|
<span class="cmd">></span> Check which port the server is using
|
|
<span class="cmd">></span> Install express as a dependency</div>
|
|
<h3>Searching the Codebase</h3>
|
|
<div class="code-block"><span class="cmd">></span> Find all files that import the UserService class
|
|
<span class="cmd">></span> Search for any TODO comments in the src directory
|
|
<span class="cmd">></span> Find where the API_KEY environment variable is used</div>
|
|
<div class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>Use <code>!</code> prefix for quick bash commands: <code>!git status</code> runs the command and shows output without Claude analyzing it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 51: /help -->
|
|
<div class="slide" data-slide="51">
|
|
<h1>/help</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /help</div>
|
|
</div>
|
|
<p>Shows all available slash commands. This is your starting point when you forget a command.</p>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>Daily Use</h4>
|
|
<p><code>/model</code> — Switch models</p>
|
|
<p><code>/plan</code> — Plan before coding</p>
|
|
<p><code>/compact</code> — Free up context</p>
|
|
<p><code>/cost</code> — Check spending</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Project Setup</h4>
|
|
<p><code>/init</code> — Create CLAUDE.md</p>
|
|
<p><code>/memory</code> — Edit memory</p>
|
|
<p><code>/config</code> — Settings</p>
|
|
<p><code>/doctor</code> — Diagnostics</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 52: Effort Level -->
|
|
<div class="slide" data-slide="52">
|
|
<h1>/model — Effort Level</h1>
|
|
<p>When Opus 4.6 is selected, you can adjust the <strong>effort level</strong>:</p>
|
|
<div class="how-to-trigger">
|
|
<h4>How to Set</h4>
|
|
<p>Run <code>/model</code>, select Opus, then use <code>← →</code> arrow keys to change effort.</p>
|
|
</div>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🔥</span><div class="use-case-text"><strong>High (Default)</strong><span>Full reasoning depth — complex architecture, tricky bugs, large refactors</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚖</span><div class="use-case-text"><strong>Medium</strong><span>Balanced — everyday coding tasks</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">💨</span><div class="use-case-text"><strong>Low</strong><span>Minimal reasoning — quick, simple tasks where speed matters</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 53: /fast -->
|
|
<div class="slide" data-slide="53">
|
|
<h1>/fast — Faster Output</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /fast</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>What It Does</h4>
|
|
<p>Toggles fast mode — same Opus 4.6 model with faster token output. It does NOT switch to a different model.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 54: /context & /cost -->
|
|
<div class="slide" data-slide="54">
|
|
<h1>/context & /cost</h1>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>/context — Visualize Usage</h4>
|
|
<div class="code-block"><span class="cmd">></span> /context</div>
|
|
<p>Shows a colored grid of your context window — how much is used, what's taking space.</p>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>/cost — Track Spending</h4>
|
|
<div class="code-block"><span class="cmd">></span> /cost</div>
|
|
<p>Shows token usage and cost for the current session.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 55: /clear & /rewind -->
|
|
<div class="slide" data-slide="55">
|
|
<h1>/clear & /rewind</h1>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>/clear — Fresh Start</h4>
|
|
<div class="code-block"><span class="cmd">></span> /clear</div>
|
|
<p>Clears conversation history completely. Use when switching tasks.</p>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>/rewind — Go Back</h4>
|
|
<div class="code-block"><span class="cmd">></span> /rewind</div>
|
|
<p>Rewinds conversation and/or code to an earlier point.</p>
|
|
</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>When to Use Which</h4>
|
|
<p><strong>/clear</strong> = new topic. <strong>/rewind</strong> = same topic, wrong turn. <strong>/compact</strong> = same topic, low on context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 56: /resume -->
|
|
<div class="slide" data-slide="56">
|
|
<h1>/resume — Resume Sessions</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="comment"># Resume most recent session</span>
|
|
<span class="cmd">$</span> claude --resume
|
|
|
|
<span class="comment"># Or from inside Claude Code:</span>
|
|
<span class="cmd">></span> /resume</div>
|
|
</div>
|
|
<p>Opens a session picker showing your recent conversations. Select one to continue where you left off.</p>
|
|
</div>
|
|
|
|
<!-- Slide 57: /doctor -->
|
|
<div class="slide" data-slide="57">
|
|
<h1>/doctor — Diagnostics</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /doctor</div>
|
|
</div>
|
|
<p>Checks the health of your Claude Code installation:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Authentication</strong><span>Verifies your login is valid</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Configuration</strong><span>Checks settings.json for errors</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Permissions</strong><span>Detects unreachable permission rules</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Updates</strong><span>Checks if a newer version is available</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 58: /config -->
|
|
<div class="slide" data-slide="58">
|
|
<h1>/config — Configuration</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /config</div>
|
|
</div>
|
|
<p>Opens the interactive settings UI. Key things you can configure:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🎨</span><div class="use-case-text"><strong>Theme</strong><span>Light or dark mode</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📝</span><div class="use-case-text"><strong>Output Style</strong><span>Explanatory, Learning, or Custom</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔔</span><div class="use-case-text"><strong>Notifications</strong><span>Enable desktop notifications</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔒</span><div class="use-case-text"><strong>Permission Mode</strong><span>How Claude asks for approval</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 59: /permissions -->
|
|
<div class="slide" data-slide="59">
|
|
<h1>/permissions — Tool Access Control</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /permissions</div>
|
|
</div>
|
|
<p>Manage what Claude can do without asking. Supports <strong>wildcard syntax</strong>:</p>
|
|
<div class="code-block"><span class="comment">// Allow patterns</span>
|
|
Bash(npm run *) <span class="comment">// Any npm script</span>
|
|
Bash(git *) <span class="comment">// All git commands</span>
|
|
Edit(src/**) <span class="comment">// Edit any file in src/</span>
|
|
|
|
<span class="comment">// Deny patterns</span>
|
|
Bash(rm -rf *) <span class="comment">// Block destructive commands</span>
|
|
Read(.env) <span class="comment">// Block reading secrets</span></div>
|
|
</div>
|
|
|
|
<!-- Slide 60: /sandbox -->
|
|
<div class="slide" data-slide="60">
|
|
<h1>/sandbox — Sandboxing</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /sandbox</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>What It Does</h4>
|
|
<p>Enables file and network isolation for bash commands. Safer, with fewer permission prompts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 61: Commands Cheat Sheet -->
|
|
<div class="slide" data-slide="61">
|
|
<h1>Commands Cheat Sheet</h1>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>Session</h4>
|
|
<p><code>/clear</code> — Fresh start</p>
|
|
<p><code>/compact</code> — Free context</p>
|
|
<p><code>/resume</code> — Continue session</p>
|
|
<p><code>/rewind</code> — Undo changes</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Model & Mode</h4>
|
|
<p><code>/model</code> — Switch models</p>
|
|
<p><code>/fast</code> — Toggle speed</p>
|
|
<p><code>/plan</code> — Plan mode</p>
|
|
<p><code>/config</code> — Settings</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Project</h4>
|
|
<p><code>/init</code> — Create CLAUDE.md</p>
|
|
<p><code>/memory</code> — Edit memory</p>
|
|
<p><code>/permissions</code> — Tool access</p>
|
|
<p><code>/sandbox</code> — Sandboxing</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Info & Debug</h4>
|
|
<p><code>/context</code> — Context usage</p>
|
|
<p><code>/cost</code> — Token spending</p>
|
|
<p><code>/doctor</code> — Health check</p>
|
|
<p><code>/help</code> — All commands</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 62: Commit Workflow -->
|
|
<div class="slide" data-slide="62">
|
|
<h1>The Commit Workflow</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Ask Claude to Commit</h4>
|
|
<div class="code-block"><span class="cmd">></span> Commit these changes with a descriptive message</div>
|
|
</div>
|
|
<p>Claude will:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">1️⃣</span><div class="use-case-text"><strong>Run git status & diff</strong><span>Reviews all staged and unstaged changes</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">2️⃣</span><div class="use-case-text"><strong>Draft a commit message</strong><span>Focuses on "why" not "what", following your repo's style</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">3️⃣</span><div class="use-case-text"><strong>Stage and commit</strong><span>Adds specific files (not git add -A) and creates the commit</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 63: PR Workflow -->
|
|
<div class="slide" data-slide="63">
|
|
<h1>The PR Workflow</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Ask Claude to Create a PR</h4>
|
|
<div class="code-block"><span class="cmd">></span> Create a pull request for these changes</div>
|
|
</div>
|
|
<p>Claude will:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">1️⃣</span><div class="use-case-text"><strong>Review all commits on the branch</strong><span>Analyzes the full diff from base branch</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">2️⃣</span><div class="use-case-text"><strong>Write PR title & description</strong><span>Summary, test plan, and changes overview</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">3️⃣</span><div class="use-case-text"><strong>Push and create PR via gh CLI</strong><span>Uses GitHub CLI to create the pull request</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 64: Default Main Agent -->
|
|
<div class="slide" data-slide="64">
|
|
<h1>Setting a Default Agent</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Via settings.json</h4>
|
|
<div class="code-block"><span class="comment">// .claude/settings.json</span>
|
|
{
|
|
<span class="key">"agent"</span>: <span class="string">"frontend-engineer"</span>
|
|
}</div>
|
|
</div>
|
|
<p>Now every time you run <code>claude</code> in this project, you'll talk to the <code>frontend-engineer</code> agent instead of default Claude.</p>
|
|
<h3>Per-Session Override</h3>
|
|
<div class="code-block"><span class="cmd">$</span> claude --agent backend-engineer</div>
|
|
<div class="trigger-box">
|
|
<h4>Manage Agents</h4>
|
|
<p>Run <code>/agents</code> to view, create, edit, or delete agents interactively.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 65: settings.json -->
|
|
<div class="slide" data-slide="65">
|
|
<h1>settings.json Overview</h1>
|
|
<div class="trigger-box">
|
|
<h4>Settings Hierarchy</h4>
|
|
<p>Settings cascade from most specific to least specific. Higher priority wins.</p>
|
|
</div>
|
|
<div class="code-block"><span class="comment"># User-writable override order (highest to lowest):</span>
|
|
1. Command line flags <span class="comment"># --model opus</span>
|
|
2. .claude/settings.local.json <span class="comment"># Personal, git-ignored</span>
|
|
3. .claude/settings.json <span class="comment"># Team-shared, committed</span>
|
|
4. ~/.claude/settings.local.json <span class="comment"># Global personal override</span>
|
|
5. ~/.claude/settings.json <span class="comment"># Global personal default</span>
|
|
|
|
<span class="comment"># Policy layer:</span>
|
|
managed-settings.json <span class="comment"># Organization policy (enforced)</span></div>
|
|
</div>
|
|
|
|
<!-- Slide 66: Spinner Verbs -->
|
|
<div class="slide" data-slide="66">
|
|
<h1>Spinner Verbs</h1>
|
|
<p>Customize the loading messages that appear while Claude thinks:</p>
|
|
<div class="code-block"><span class="comment">// .claude/settings.json</span>
|
|
{
|
|
<span class="key">"spinnerVerbs"</span>: {
|
|
<span class="key">"mode"</span>: <span class="string">"replace"</span>,
|
|
<span class="key">"verbs"</span>: [
|
|
<span class="string">"Cooking"</span>,
|
|
<span class="string">"Brewing"</span>,
|
|
<span class="string">"Crafting"</span>,
|
|
<span class="string">"Conjuring"</span>,
|
|
<span class="string">"Manifesting"</span>
|
|
]
|
|
}
|
|
}</div>
|
|
</div>
|
|
|
|
<!-- Slide 67: Status Line -->
|
|
<div class="slide" data-slide="67">
|
|
<h1>Status Line</h1>
|
|
<p>A custom info bar below the composer showing model, context, cost, git branch, etc.</p>
|
|
<div class="how-to-trigger">
|
|
<h4>Quick Setup</h4>
|
|
<div class="code-block"><span class="cmd">></span> /statusline</div>
|
|
</div>
|
|
<div class="code-block"><span class="comment">// .claude/settings.json</span>
|
|
{
|
|
<span class="key">"statusLine"</span>: {
|
|
<span class="key">"type"</span>: <span class="string">"command"</span>,
|
|
<span class="key">"command"</span>: <span class="string">"git branch --show-current 2>/dev/null"</span>
|
|
}
|
|
}</div>
|
|
</div>
|
|
|
|
<!-- Slide 68: Output Styles -->
|
|
<div class="slide" data-slide="68">
|
|
<h1>Output Styles</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Set via /config</h4>
|
|
<div class="code-block"><span class="cmd">></span> /config
|
|
<span class="comment"># Navigate to Output Style</span></div>
|
|
</div>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📖</span><div class="use-case-text"><strong>Explanatory</strong><span>Claude explains code patterns and frameworks as it works</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🎓</span><div class="use-case-text"><strong>Learning</strong><span>Claude coaches you through making changes yourself</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✏</span><div class="use-case-text"><strong>Custom</strong><span>Define your own output style</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 69: Keybindings -->
|
|
<div class="slide" data-slide="69">
|
|
<h1>Keybindings</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Customize Keys</h4>
|
|
<div class="code-block"><span class="cmd">></span> /keybindings</div>
|
|
</div>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>Navigation</h4>
|
|
<p><code>Option+P</code> — Switch model</p>
|
|
<p><code>Ctrl+L</code> — Clear screen</p>
|
|
<p><code>Esc Esc</code> — Rewind</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Editing</h4>
|
|
<p><code>Ctrl+G</code> — Open in editor</p>
|
|
<p><code>Ctrl+V</code> — Paste image</p>
|
|
<p><code>Shift+Tab</code> — Toggle permissions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 70: Terminal & Vim -->
|
|
<div class="slide" data-slide="70">
|
|
<h1>Terminal Setup & Vim Mode</h1>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>/terminal-setup</h4>
|
|
<div class="code-block"><span class="cmd">></span> /terminal-setup</div>
|
|
<p>Enables <code>Shift+Enter</code> for newlines in IDE terminals.</p>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>/vim</h4>
|
|
<div class="code-block"><span class="cmd">></span> /vim</div>
|
|
<p>Enables vim-style editing mode in the Claude Code prompt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 71: Customization Summary -->
|
|
<div class="slide" data-slide="71">
|
|
<h1>Customization Summary</h1>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h4>Quick Wins</h4>
|
|
<p><code>spinnerVerbs</code> — Fun loading messages</p>
|
|
<p><code>/statusline</code> — Info bar</p>
|
|
<p><code>/config</code> → Output Style</p>
|
|
<p><code>/keybindings</code> — Custom keys</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Power Features</h4>
|
|
<p>Hooks — Custom lifecycle scripts</p>
|
|
<p>Plugins — Installable packages</p>
|
|
<p>MCP Servers — External tools</p>
|
|
<p>Sandbox — Security isolation</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 72: Debugging Tips -->
|
|
<div class="slide" data-slide="72">
|
|
<h1>Debugging Tips</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🩺</span><div class="use-case-text"><strong>Run /doctor</strong><span>First thing to try when something isn't working</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🖥</span><div class="use-case-text"><strong>Background tasks for logs</strong><span>Ask Claude to run the server as a background task so you can see logs while working</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🌐</span><div class="use-case-text"><strong>Browser MCPs for console logs</strong><span>Use Playwright, Chrome DevTools, or Claude in Chrome to let Claude see browser console</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📸</span><div class="use-case-text"><strong>Screenshots for UI issues</strong><span>Paste screenshots directly — Ctrl+V. Worth a thousand words.</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 73: Golden Rules -->
|
|
<div class="slide" data-slide="73">
|
|
<h1>The Golden Rules</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">1️⃣</span><div class="use-case-text"><strong>Always start with plan mode</strong><span>For any non-trivial task. Review the plan before Claude writes code.</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">2️⃣</span><div class="use-case-text"><strong>Keep CLAUDE.md under 150 lines</strong><span>Longer instructions get diluted. Use skills and rules for detail.</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">3️⃣</span><div class="use-case-text"><strong>Manual /compact at ~50%</strong><span>Don't wait for auto-compact. Stay in control of what's preserved.</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">4️⃣</span><div class="use-case-text"><strong>Commit after each subtask</strong><span>Small, frequent commits. Clean rollback points.</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">5️⃣</span><div class="use-case-text"><strong>One task at a time</strong><span>Small, focused requests get better results than mega-prompts.</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">6️⃣</span><div class="use-case-text"><strong>Be specific about files</strong><span>"Fix the null check in backend/routes/todos.py line 42" not "fix the bug".</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 74: Resources -->
|
|
<div class="slide" data-slide="74">
|
|
<h1>Resources</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📖</span><div class="use-case-text"><strong>Claude Code Docs</strong><span>code.claude.com/docs/en</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">💡</span><div class="use-case-text"><strong>Boris Cherny's 12 Tips</strong><span>tips/claude-boris-12-tips-12-feb-26.md</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🏗</span><div class="use-case-text"><strong>This Repository</strong><span>Working examples of skills, agents, hooks, and the Command → Agent → Skills pattern</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔧</span><div class="use-case-text"><strong>Claude Code Hooks</strong><span>github.com/shanraisshan/claude-code-hooks</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 75: Next Steps -->
|
|
<div class="slide" data-slide="75">
|
|
<h1>Your Next Steps</h1>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">1️⃣</span><div class="use-case-text"><strong>Install & Login</strong><span>Get Claude Code running on your machine today</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">2️⃣</span><div class="use-case-text"><strong>Run /init on your project</strong><span>Create a CLAUDE.md — give Claude context about your codebase</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">3️⃣</span><div class="use-case-text"><strong>Use plan mode for your first real task</strong><span>Pick a bug or small feature and work through it with planning</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">4️⃣</span><div class="use-case-text"><strong>Create your first skill</strong><span>Document a workflow your team repeats and make it a skill</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">5️⃣</span><div class="use-case-text"><strong>Build a feature-specific agent</strong><span>Give Claude domain knowledge about your codebase</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 76: Thank You -->
|
|
<div class="slide title-slide" data-slide="76">
|
|
<div class="title-logo">
|
|
<img src="../../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
|
|
</div>
|
|
<h1>Thank You!</h1>
|
|
<p class="subtitle">Questions?</p>
|
|
<p style="margin-top: 40px; font-size: 1rem; color: #666;">github.com/shanraisshan/claude-code-best-practice</p>
|
|
</div>
|
|
|
|
<!-- Header Logo -->
|
|
<div class="header-logo">
|
|
<img src="../../!/claude-jumping.svg" alt="Claude Code mascot" />
|
|
</div>
|
|
|
|
<div class="navigation">
|
|
<button class="nav-btn" id="prevBtn" onclick="prevSlide()">←</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 (order 1=bottom, 4=top)
|
|
const LEVELS = {
|
|
'low': { order: 1, color: 'hsl(0, 70%, 45%)', height: '25%', label: 'Low' },
|
|
'medium': { order: 2, color: 'hsl(40, 70%, 45%)', height: '50%', label: 'Medium' },
|
|
'high': { order: 3, color: 'hsl(80, 70%, 45%)', height: '75%', label: 'High' },
|
|
'pro': { order: 4, color: 'hsl(120, 70%, 45%)', height: '100%', label: 'Pro' }
|
|
};
|
|
|
|
// Build slide-to-level map: inherit level from previous data-level slide
|
|
const SLIDE_LEVELS = {};
|
|
let lastLevel = null;
|
|
slides.forEach((s) => {
|
|
const num = parseInt(s.dataset.slide);
|
|
if (s.dataset.level) { lastLevel = s.dataset.level; }
|
|
SLIDE_LEVELS[num] = lastLevel;
|
|
});
|
|
|
|
let prevDisplayedLevel = null;
|
|
|
|
function updateJourneyBar(slideNum) {
|
|
const bar = document.getElementById('journeyBar');
|
|
const fill = document.getElementById('journeyFill');
|
|
const labelEl = document.getElementById('journeyLevelLabel');
|
|
if (slideNum <= 1) { bar.classList.add('hidden'); prevDisplayedLevel = null; return; }
|
|
bar.classList.remove('hidden');
|
|
const levelKey = SLIDE_LEVELS[slideNum];
|
|
if (!levelKey || !LEVELS[levelKey]) {
|
|
fill.style.height = '0%';
|
|
if (labelEl) { labelEl.innerHTML = ''; }
|
|
return;
|
|
}
|
|
const lvl = LEVELS[levelKey];
|
|
fill.style.height = lvl.height;
|
|
fill.style.backgroundColor = lvl.color;
|
|
if (labelEl) { labelEl.innerHTML = 'Current = <strong style="color:' + lvl.color + '">' + lvl.label + '</strong>'; }
|
|
|
|
// Show level badge when level changes
|
|
document.querySelectorAll('.level-badge').forEach(b => b.remove());
|
|
const slideEl = document.querySelector(`[data-slide="${slideNum}"]`);
|
|
if (slideEl && slideEl.dataset.level && slideEl.dataset.level !== prevDisplayedLevel) {
|
|
const h1 = slideEl.querySelector('h1');
|
|
if (h1) {
|
|
const badge = document.createElement('span');
|
|
badge.className = 'level-badge';
|
|
badge.textContent = '\u2192 ' + lvl.label;
|
|
h1.appendChild(badge);
|
|
}
|
|
}
|
|
prevDisplayedLevel = levelKey;
|
|
}
|
|
|
|
function showSlide(n) {
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
if (n > totalSlides) currentSlide = totalSlides;
|
|
if (n < 1) currentSlide = 1;
|
|
document.querySelector(`[data-slide="${currentSlide}"]`).classList.add('active');
|
|
document.getElementById('slideCounter').textContent = `${currentSlide} / ${totalSlides}`;
|
|
document.getElementById('progress').style.width = `${(currentSlide / totalSlides) * 100}%`;
|
|
document.getElementById('prevBtn').disabled = currentSlide === 1;
|
|
document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
|
|
updateJourneyBar(currentSlide);
|
|
}
|
|
function nextSlide() { currentSlide++; showSlide(currentSlide); }
|
|
function prevSlide() { currentSlide--; showSlide(currentSlide); }
|
|
function goToSlide(n) { currentSlide = n; showSlide(currentSlide); }
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
|
|
else if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
|
|
});
|
|
let touchStartX = 0;
|
|
document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
|
|
document.addEventListener('touchend', (e) => {
|
|
const diff = touchStartX - e.changedTouches[0].clientX;
|
|
if (Math.abs(diff) > 50) { if (diff > 0) nextSlide(); else prevSlide(); }
|
|
});
|
|
showSlide(currentSlide);
|
|
</script>
|
|
</body>
|
|
</html>
|