Shayan Rais
1590 lines
91 KiB
HTML
1590 lines
91 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code — Complete Onboarding Guide</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; }
|
|
.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%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="progress" id="progress"></div>
|
|
|
|
<!-- Slide 1: Title -->
|
|
<div class="slide active title-slide" data-slide="1">
|
|
<div class="title-logo">
|
|
<img src="../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
|
|
</div>
|
|
<h1>Claude Code</h1>
|
|
<p class="subtitle">Complete Onboarding Guide for Developers</p>
|
|
<p style="margin-top: 60px; font-size: 0.95rem; color: #888;">From First Prompt to Production Workflows</p>
|
|
</div>
|
|
|
|
<!-- Slide 2: What You'll Learn -->
|
|
<div class="slide" data-slide="2">
|
|
<h1>What You'll Learn</h1>
|
|
<div class="trigger-box">
|
|
<h4>Goal</h4>
|
|
<p>Go beyond vibe coding. Learn to use Claude Code as a professional tool — from basic prompting to custom agents and team workflows.</p>
|
|
</div>
|
|
<div class="toc-list" style="margin-top: 24px;">
|
|
<div class="toc-item" onclick="goToSlide(3)"><span class="toc-name">Getting Started</span></div>
|
|
<div class="toc-item" onclick="goToSlide(7)"><span class="toc-name">Beyond Vibe Coding</span></div>
|
|
<div class="toc-item" onclick="goToSlide(16)"><span class="toc-name">Essential Commands</span></div>
|
|
<div class="toc-item" onclick="goToSlide(32)"><span class="toc-name">Workflows</span></div>
|
|
<div class="toc-item" onclick="goToSlide(39)"><span class="toc-name">CLAUDE.md & Memory</span></div>
|
|
<div class="toc-item" onclick="goToSlide(47)"><span class="toc-name">Skills</span></div>
|
|
<div class="toc-item" onclick="goToSlide(54)"><span class="toc-name">Agents</span></div>
|
|
<div class="toc-item" onclick="goToSlide(65)"><span class="toc-name">Customization</span></div>
|
|
<div class="toc-item" onclick="goToSlide(76)"><span class="toc-name">Tips & Next Steps</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Installing -->
|
|
<div class="slide" data-slide="3">
|
|
<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 4: Login Options -->
|
|
<div class="slide" data-slide="4">
|
|
<h1>Login Options</h1>
|
|
<p>Two ways to authenticate with Claude Code:</p>
|
|
<div class="two-col">
|
|
<div class="col-card">
|
|
<h4>Option A: Subscription (claude.ai)</h4>
|
|
<p>Use your Claude Pro/Team/Enterprise subscription.</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>
|
|
<p style="margin-top: 12px;"><strong>Best for:</strong> Individual developers, teams with existing subscriptions</p>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>Option B: API Key</h4>
|
|
<p>Use an Anthropic API key (pay per token).</p>
|
|
<div class="code-block"><span class="cmd">export ANTHROPIC_API_KEY=sk-ant-...</span>
|
|
<span class="cmd">claude</span></div>
|
|
<p style="margin-top: 12px;"><strong>Best for:</strong> CI/CD, automation, pay-as-you-go usage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: First Session -->
|
|
<div class="slide" data-slide="5">
|
|
<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> ~/my-project
|
|
<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>Key Concept</h3>
|
|
<p>Claude Code is <strong>project-aware</strong>. Always run it from your project's root directory so it understands your codebase.</p>
|
|
</div>
|
|
|
|
<!-- Slide 6: The Interface -->
|
|
<div class="slide" data-slide="6">
|
|
<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: ~/my-project
|
|
<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>
|
|
|
|
<!-- Slide 7: Section - Beyond Vibe Coding -->
|
|
<div class="slide section-slide" data-slide="7">
|
|
|
|
<h1>Beyond Vibe Coding</h1>
|
|
<p class="section-desc">Effective prompting that produces real, production-quality results — not AI slop.</p>
|
|
</div>
|
|
|
|
<!-- Slide 8: Your First Prompt -->
|
|
<div class="slide" data-slide="8">
|
|
<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 9: Good vs Bad Prompts -->
|
|
<div class="slide" data-slide="9">
|
|
<h1>Good vs Bad Prompts</h1>
|
|
<p>The difference between vibe coding and professional usage:</p>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>❌ Vibe Coding</h4>
|
|
<p><code>make it work</code></p>
|
|
<p><code>fix the bug</code></p>
|
|
<p><code>add a login page</code></p>
|
|
<p><code>refactor everything</code></p>
|
|
<p style="margin-top: 16px; color: #c62828;">Vague, no context, no constraints. Claude guesses — and often guesses wrong.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>✅ Professional</h4>
|
|
<p><code>The /api/users endpoint returns 500 when email is null. Add validation in src/routes/users.ts</code></p>
|
|
<p><code>Add JWT auth middleware to the Express routes in src/middleware/. Follow the existing pattern in auth.ts</code></p>
|
|
<p style="margin-top: 16px; color: #2e7d32;">Specific file, specific problem, specific approach.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Providing Context -->
|
|
<div class="slide" data-slide="10">
|
|
<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>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> Look at @src/api/routes.ts and @src/models/user.ts
|
|
Add input validation for the create user endpoint</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 11: How Claude Uses Tools -->
|
|
<div class="slide" data-slide="11">
|
|
<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 12: File Operations -->
|
|
<div class="slide" data-slide="12">
|
|
<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 13: Bash & Search -->
|
|
<div class="slide" data-slide="13">
|
|
<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 14: Context Window -->
|
|
<div class="slide" data-slide="14">
|
|
<h1>Understanding the Context Window</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. Think of it as short-term memory.</p>
|
|
</div>
|
|
<h3>What Fills Up Context</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">💬</span><div class="use-case-text"><strong>Your prompts</strong><span>Every message you type</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📄</span><div class="use-case-text"><strong>File contents</strong><span>Every file Claude reads gets added to context</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🖥️</span><div class="use-case-text"><strong>Command output</strong><span>Results from bash commands and tool calls</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🤖</span><div class="use-case-text"><strong>Claude's responses</strong><span>Everything Claude says back to you</span></div></div>
|
|
</div>
|
|
<div class="warning-box">
|
|
<h4>When Context Fills Up</h4>
|
|
<p>Claude auto-compacts (summarizes) old messages. Run <code>/compact</code> manually at ~50% to stay in control.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 15: Prompting Best Practices -->
|
|
<div class="slide" data-slide="15">
|
|
<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 src/api/users.ts" not "in the user 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 auth.ts" 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 the tests 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>
|
|
|
|
<!-- Slide 16: Section - Essential Commands -->
|
|
<div class="slide section-slide" data-slide="16">
|
|
|
|
<h1>Essential Commands</h1>
|
|
<p class="section-desc">Slash commands that transform Claude Code from a chatbot into a power tool.</p>
|
|
</div>
|
|
|
|
<!-- Slide 17: /help -->
|
|
<div class="slide" data-slide="17">
|
|
<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>
|
|
<h3>Commands You'll Use Most</h3>
|
|
<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 18: /model -->
|
|
<div class="slide" data-slide="18">
|
|
<h1>/model — Switch Models</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. Use arrow keys to select:</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>Most capable — complex tasks, architecture, debugging</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>Fast and capable — everyday coding, quick edits</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>Fastest — simple tasks, file reads, quick questions</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Keyboard Shortcut</h4>
|
|
<p>Press <code>Option+P</code> (Mac) or <code>Alt+P</code> to quickly switch models.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 19: Effort Level -->
|
|
<div class="slide" data-slide="19">
|
|
<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 class="trigger-box">
|
|
<h4>Boris Cherny's Preference</h4>
|
|
<p>The creator of Claude Code uses <strong>High for everything</strong>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 20: /fast -->
|
|
<div class="slide" data-slide="20">
|
|
<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>
|
|
<p>Use fast mode when you need quick responses and don't need deep reasoning. Toggle it off for complex tasks.</p>
|
|
</div>
|
|
|
|
<!-- Slide 21: /plan -->
|
|
<div class="slide" data-slide="21">
|
|
<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 with JWT tokens</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>What It Does</h4>
|
|
<p>Enters read-only <strong>plan mode</strong> where Claude explores the codebase and proposes an approach — without making any changes.</p>
|
|
</div>
|
|
<h3>Why Plan First?</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🗺️</span><div class="use-case-text"><strong>See the full picture</strong><span>Claude explores before committing to an approach</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>Approve before changes</strong><span>Review the plan and give the green light</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">💰</span><div class="use-case-text"><strong>Save tokens and time</strong><span>Catch wrong approaches before Claude writes code</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 22: /compact -->
|
|
<div class="slide" data-slide="22">
|
|
<h1>/compact — Manage Context</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /compact
|
|
<span class="comment"># Or with focus instructions:</span>
|
|
<span class="cmd">></span> /compact focus on the authentication changes</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>What It Does</h4>
|
|
<p>Compresses the conversation history to free up context window space. Claude summarizes everything so far and continues from that summary.</p>
|
|
</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 23: /context & /cost -->
|
|
<div class="slide" data-slide="23">
|
|
<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. Use this to decide when to <code>/compact</code>.</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. Useful for monitoring API spending when using an API key.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 24: /clear & /rewind -->
|
|
<div class="slide" data-slide="24">
|
|
<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 to a completely different task.</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. Undo Claude's changes if they went wrong.</p>
|
|
</div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>When to Use Which</h4>
|
|
<p><strong>/clear</strong> = new topic entirely. <strong>/rewind</strong> = same topic, wrong turn. <strong>/compact</strong> = same topic, running low on context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 25: /resume -->
|
|
<div class="slide" data-slide="25">
|
|
<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 class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>Use <code>/rename my-feature</code> to name sessions so they're easy to find later.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 26: /memory -->
|
|
<div class="slide" data-slide="26">
|
|
<h1>/memory — Persistent Context</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</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🌍</span><div class="use-case-text"><strong>User Memory (~/.claude/CLAUDE.md)</strong><span>Applies to all your projects — personal preferences</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📁</span><div class="use-case-text"><strong>Project Memory (.claude/CLAUDE.md)</strong><span>Shared with your team via git</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔒</span><div class="use-case-text"><strong>Local Memory (.claude/CLAUDE.local.md)</strong><span>Personal, project-specific, git-ignored</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 27: /doctor -->
|
|
<div class="slide" data-slide="27">
|
|
<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 28: /config -->
|
|
<div class="slide" data-slide="28">
|
|
<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 response tone</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 29: /permissions -->
|
|
<div class="slide" data-slide="29">
|
|
<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>
|
|
Edit(*.ts) <span class="comment">// Edit any TypeScript file</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 class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>Use <code>/permissions</code> with wildcard patterns instead of <code>--dangerously-skip-permissions</code>. Much safer.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 30: /sandbox -->
|
|
<div class="slide" data-slide="30">
|
|
<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. Claude runs commands in a restricted environment — safer, with fewer permission prompts.</p>
|
|
</div>
|
|
<h3>Benefits</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🛡️</span><div class="use-case-text"><strong>Safety</strong><span>Commands can't access files outside your project</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚡</span><div class="use-case-text"><strong>Fewer Prompts</strong><span>Sandboxed commands auto-approve, reducing interruptions</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 31: Commands Cheat Sheet -->
|
|
<div class="slide" data-slide="31">
|
|
<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 32: Section - Workflows -->
|
|
<div class="slide section-slide" data-slide="32">
|
|
|
|
<h1>Workflows</h1>
|
|
<p class="section-desc">Plan first, execute second. Professional workflows that prevent wasted effort.</p>
|
|
</div>
|
|
|
|
<!-- Slide 33: Why Plan First -->
|
|
<div class="slide" data-slide="33">
|
|
<h1>Why Plan Before Code</h1>
|
|
<div class="two-col">
|
|
<div class="col-card bad">
|
|
<h4>❌ Without Planning</h4>
|
|
<p>1. Ask Claude to add a feature</p>
|
|
<p>2. Claude writes code immediately</p>
|
|
<p>3. Wrong approach — redo everything</p>
|
|
<p>4. Context wasted, tokens burned</p>
|
|
<p style="margin-top: 16px; color: #c62828;">50% of context gone before the real work starts.</p>
|
|
</div>
|
|
<div class="col-card good">
|
|
<h4>✅ With Planning</h4>
|
|
<p>1. Enter plan mode</p>
|
|
<p>2. Claude explores and proposes approach</p>
|
|
<p>3. You review and approve</p>
|
|
<p>4. Claude executes the approved plan</p>
|
|
<p style="margin-top: 16px; color: #2e7d32;">Right approach from the start. Context preserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 34: Plan Mode in Practice -->
|
|
<div class="slide" data-slide="34">
|
|
<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/products endpoint
|
|
|
|
<span class="comment"># Step 3: Claude explores and writes a plan</span>
|
|
<span class="comment"># (reads files, checks patterns, 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>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 35: Task Lists -->
|
|
<div class="slide" data-slide="35">
|
|
<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 with JWT, including:
|
|
- Login endpoint
|
|
- Register endpoint
|
|
- Auth middleware
|
|
- Token refresh
|
|
- Tests for all 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 36: Commit Workflow -->
|
|
<div class="slide" data-slide="36">
|
|
<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 class="warning-box">
|
|
<h4>Important</h4>
|
|
<p>Commit often — as soon as a task is completed. This gives you clean rollback points.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 37: PR Workflow -->
|
|
<div class="slide" data-slide="37">
|
|
<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 38: Workflow Best Practices -->
|
|
<div class="slide" data-slide="38">
|
|
<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>
|
|
|
|
<!-- Slide 39: Section - Memory -->
|
|
<div class="slide section-slide" data-slide="39">
|
|
|
|
<h1>CLAUDE.md & Memory</h1>
|
|
<p class="section-desc">Make Claude remember your project, conventions, and preferences across every session.</p>
|
|
</div>
|
|
|
|
<!-- Slide 40: What is CLAUDE.md -->
|
|
<div class="slide" data-slide="40">
|
|
<h1>What is CLAUDE.md?</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>
|
|
<p>Think of it like a README, but for Claude. It tells Claude:</p>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📋</span><div class="use-case-text"><strong>Project overview</strong><span>What this project does, its architecture</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📐</span><div class="use-case-text"><strong>Coding conventions</strong><span>Style guide, patterns to follow</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🏗️</span><div class="use-case-text"><strong>Key components</strong><span>Important files, directory structure</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚠️</span><div class="use-case-text"><strong>Critical rules</strong><span>Things Claude must always or never do</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 41: Creating CLAUDE.md -->
|
|
<div class="slide" data-slide="41">
|
|
<h1>Creating CLAUDE.md</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /init</div>
|
|
</div>
|
|
<p>Claude scans your project and generates a CLAUDE.md with:</p>
|
|
<div class="code-block"><span class="comment"># CLAUDE.md</span>
|
|
|
|
<span class="key">## Project Overview</span>
|
|
A Node.js REST API for managing user accounts...
|
|
|
|
<span class="key">## Key Components</span>
|
|
- src/routes/ — API endpoints
|
|
- src/models/ — Database models
|
|
- src/middleware/ — Auth and validation
|
|
|
|
<span class="key">## Development Commands</span>
|
|
- npm run dev — Start development server
|
|
- npm test — Run test suite
|
|
|
|
<span class="key">## Coding Conventions</span>
|
|
- Use TypeScript strict mode
|
|
- Follow existing error handling patterns in src/utils/errors.ts</div>
|
|
</div>
|
|
|
|
<!-- Slide 42: What to Include -->
|
|
<div class="slide" data-slide="42">
|
|
<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>
|
|
|
|
<!-- Slide 43: Keep Under 150 Lines -->
|
|
<div class="slide" data-slide="43">
|
|
<h1>Keep It Under 150 Lines</h1>
|
|
<div class="warning-box">
|
|
<h4>Critical Rule</h4>
|
|
<p>CLAUDE.md should not exceed 150 lines. Longer files dilute the instructions — Claude may ignore parts of it.</p>
|
|
</div>
|
|
<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>
|
|
|
|
<!-- Slide 44: /memory -->
|
|
<div class="slide" data-slide="44">
|
|
<h1>/memory Command</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> /memory</div>
|
|
</div>
|
|
<p>Opens all your CLAUDE.md files in an editor so you can add or modify instructions.</p>
|
|
<h3>Memory Hierarchy</h3>
|
|
<div class="code-block"><span class="comment"># Loaded in this order (all combined):</span>
|
|
~/.claude/CLAUDE.md <span class="comment"># Global — all projects</span>
|
|
.claude/CLAUDE.md <span class="comment"># Project — shared with team</span>
|
|
.claude/CLAUDE.local.md <span class="comment"># Local — personal, git-ignored</span></div>
|
|
<p>Claude also learns automatically — it may add notes to a separate auto-memory file as you work.</p>
|
|
</div>
|
|
|
|
<!-- Slide 45: Rules -->
|
|
<div class="slide" data-slide="45">
|
|
<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>
|
|
<div class="code-block"><span class="comment"># .claude/rules/testing.md</span>
|
|
---
|
|
globs: ["src/**/*.test.ts", "tests/**"]
|
|
---
|
|
When writing tests:
|
|
- Use vitest, not jest
|
|
- Follow AAA pattern (Arrange, Act, Assert)
|
|
- Mock external dependencies</div>
|
|
<p>This rule only activates when Claude is working on test files — keeping context clean for other tasks.</p>
|
|
</div>
|
|
|
|
<!-- Slide 46: Memory Best Practices -->
|
|
<div class="slide" data-slide="46">
|
|
<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>
|
|
|
|
<!-- Slide 47: Section - Skills -->
|
|
<div class="slide section-slide" data-slide="47">
|
|
|
|
<h1>Skills</h1>
|
|
<p class="section-desc">Reusable knowledge and workflows that Claude loads on-demand — like giving it a manual.</p>
|
|
</div>
|
|
|
|
<!-- Slide 48: What Are Skills -->
|
|
<div class="slide" data-slide="48">
|
|
<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>
|
|
|
|
<!-- Slide 49: Skill Structure -->
|
|
<div class="slide" data-slide="49">
|
|
<h1>Skill Directory Structure</h1>
|
|
<div class="code-block"><span class="comment"># Skills live in .claude/skills/</span>
|
|
.claude/
|
|
skills/
|
|
weather-fetcher/
|
|
SKILL.md <span class="comment"># Main skill file (required)</span>
|
|
examples.md <span class="comment"># Supporting file (optional)</span>
|
|
weather-transformer/
|
|
SKILL.md
|
|
api-conventions/
|
|
SKILL.md
|
|
error-patterns.md</div>
|
|
<div class="trigger-box">
|
|
<h4>Key Rule</h4>
|
|
<p>Each skill lives in its own directory under <code>.claude/skills/</code>. The <code>SKILL.md</code> file is the entry point.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 50: SKILL.md Frontmatter -->
|
|
<div class="slide" data-slide="50">
|
|
<h1>SKILL.md Frontmatter</h1>
|
|
<div class="code-block"><span class="comment"># .claude/skills/weather-fetcher/SKILL.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">weather-fetcher</span>
|
|
<span class="key">description</span>: <span class="string">Fetch weather data from wttr.in API</span>
|
|
---
|
|
|
|
Fetch the current temperature for a city using:
|
|
|
|
curl -s "wttr.in/{city}?format=%t"
|
|
|
|
Return only the temperature value in Celsius.</div>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Slide 51: Creating a Skill -->
|
|
<div class="slide" data-slide="51">
|
|
<h1>Creating Your First Skill</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Try This</h4>
|
|
<div class="code-block"><span class="cmd">></span> Create a skill called "code-review" in .claude/skills/
|
|
that tells Claude how to review code:
|
|
- Check for security issues
|
|
- Check for performance problems
|
|
- Verify error handling
|
|
- Suggest improvements</div>
|
|
</div>
|
|
<p>Claude will create:</p>
|
|
<div class="code-block">.claude/skills/code-review/SKILL.md</div>
|
|
<div class="trigger-box">
|
|
<h4>Pro Tip</h4>
|
|
<p>You can also create skills manually — they're just markdown files. No special tooling required.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 52: Invoking Skills -->
|
|
<div class="slide" data-slide="52">
|
|
<h1>Invoking Skills</h1>
|
|
<h3>Manual Invocation (Slash Command)</h3>
|
|
<div class="code-block"><span class="cmd">></span> /weather-fetcher
|
|
<span class="cmd">></span> /code-review</div>
|
|
<p>Type <code>/</code> and the skill name to invoke it. The skill's content gets loaded into Claude's context.</p>
|
|
<h3>Auto-Invocation</h3>
|
|
<p>If a skill has a <code>description</code> field, Claude can discover and load it automatically when relevant.</p>
|
|
<h3>Preloaded into Agents</h3>
|
|
<div class="code-block"><span class="comment"># In an agent's frontmatter:</span>
|
|
<span class="key">skills</span>:
|
|
- weather-fetcher
|
|
- weather-transformer</div>
|
|
<p>Skills preloaded into agents are available from the start — no manual invocation needed.</p>
|
|
</div>
|
|
|
|
<!-- Slide 53: Skills Summary -->
|
|
<div class="slide" data-slide="53">
|
|
<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="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 54: Section - Agents -->
|
|
<div class="slide section-slide" data-slide="54">
|
|
|
|
<h1>Agents</h1>
|
|
<p class="section-desc">Custom agents with their own tools, skills, and personality — from simple helpers to complex workflows.</p>
|
|
</div>
|
|
|
|
<!-- Slide 55: What Are Agents -->
|
|
<div class="slide" data-slide="55">
|
|
<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 the default Claude for your entire conversation.</p>
|
|
<div class="code-block"><span class="comment"># Set in settings.json</span>
|
|
<span class="key">"agent"</span>: <span class="string">"my-agent"</span>
|
|
|
|
<span class="comment"># Or via CLI flag</span>
|
|
<span class="cmd">$</span> claude --agent my-agent</div>
|
|
</div>
|
|
<div class="col-card">
|
|
<h4>As Subagent</h4>
|
|
<p>Spawned by Claude in an isolated context via the Task tool.</p>
|
|
<div class="code-block"><span class="comment"># Claude spawns it:</span>
|
|
Task(
|
|
subagent_type="my-agent"
|
|
prompt="Review this PR"
|
|
)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 56: Agent Frontmatter -->
|
|
<div class="slide" data-slide="56">
|
|
<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>
|
|
<p><code>tools</code> — what the agent can do. <code>skills</code> — knowledge preloaded at startup. <code>memory</code> — persistent learning across sessions.</p>
|
|
</div>
|
|
|
|
<!-- Slide 57: Weather Agent -->
|
|
<div class="slide" data-slide="57">
|
|
<h1>Example: The Weather Agent</h1>
|
|
<p>This repository includes a working example of the <strong>Command → Agent → Skills</strong> pattern:</p>
|
|
<div class="code-block"><span class="comment"># .claude/agents/weather.md</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">weather</span>
|
|
<span class="key">description</span>: <span class="string">Fetch and transform weather data</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Write, WebFetch, Bash</span>
|
|
<span class="key">model</span>: <span class="string">haiku</span>
|
|
<span class="key">color</span>: <span class="string">cyan</span>
|
|
<span class="key">skills</span>:
|
|
- weather-fetcher
|
|
- weather-transformer
|
|
---
|
|
|
|
You are a weather agent. Use your preloaded skills
|
|
to fetch weather data and apply transformations.</div>
|
|
<div class="trigger-box">
|
|
<h4>How It Works</h4>
|
|
<p>The agent starts with both skills already loaded — it knows <strong>how to fetch</strong> weather and <strong>how to transform</strong> the data without being told.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 58: Agent Tools -->
|
|
<div class="slide" data-slide="58">
|
|
<h1>Agent Tools & Model</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>
|
|
<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 59: Agents with Skills -->
|
|
<div class="slide" data-slide="59">
|
|
<h1>Agents with Preloaded Skills</h1>
|
|
<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>
|
|
<div class="code-block"><span class="comment"># Agent with multiple skills preloaded</span>
|
|
---
|
|
<span class="key">name</span>: <span class="string">api-developer</span>
|
|
<span class="key">tools</span>: <span class="string">Read, Write, Edit, Bash</span>
|
|
<span class="key">model</span>: <span class="string">sonnet</span>
|
|
<span class="key">skills</span>:
|
|
- api-conventions <span class="comment"># How we structure APIs</span>
|
|
- error-handling <span class="comment"># Error patterns to follow</span>
|
|
- testing-patterns <span class="comment"># How to write tests</span>
|
|
---
|
|
|
|
Build API endpoints following the preloaded conventions.</div>
|
|
<p>The agent gets all three skills injected at startup — it already knows your team's patterns.</p>
|
|
</div>
|
|
|
|
<!-- Slide 60: Default Main Agent -->
|
|
<div class="slide" data-slide="60">
|
|
<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">"api-developer"</span>
|
|
}</div>
|
|
</div>
|
|
<p>Now every time you run <code>claude</code> in this project, you'll talk to the <code>api-developer</code> agent instead of default Claude.</p>
|
|
<h3>Per-Session Override</h3>
|
|
<div class="code-block"><span class="cmd">$</span> claude --agent code-reviewer</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 61: Subagents -->
|
|
<div class="slide" data-slide="61">
|
|
<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 code-reviewer agent to review src/api/users.ts
|
|
|
|
<span class="comment"># Claude uses the Task tool internally:</span>
|
|
Task(
|
|
subagent_type=<span class="string">"code-reviewer"</span>,
|
|
prompt=<span class="string">"Review src/api/users.ts for quality"</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 62: Command → Agent → Skills -->
|
|
<div class="slide" data-slide="62">
|
|
<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">/weather-orchestrator</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="key">weather agent</span> (Agent) <span class="comment">│</span>
|
|
<span class="comment">│</span> Orchestrates with preloaded skills <span class="comment">│</span>
|
|
<span class="comment">│</span> ↓ <span class="comment">│</span>
|
|
<span class="comment">│</span> <span class="string">weather-fetcher</span> + <span class="string">weather-transformer</span> <span class="comment">│</span>
|
|
<span class="comment">│</span> (Skills — domain knowledge) <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 63: Agent Memory -->
|
|
<div class="slide" data-slide="63">
|
|
<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 64: Agents Summary -->
|
|
<div class="slide" data-slide="64">
|
|
<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> Task 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>
|
|
|
|
<!-- Slide 65: Section - Customization -->
|
|
<div class="slide section-slide" data-slide="65">
|
|
|
|
<h1>Customization</h1>
|
|
<p class="section-desc">37 settings and 84 environment variables — make Claude Code truly yours.</p>
|
|
</div>
|
|
|
|
<!-- Slide 66: settings.json -->
|
|
<div class="slide" data-slide="66">
|
|
<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"># Priority 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.json <span class="comment"># Global personal</span>
|
|
5. managed-settings.json <span class="comment"># Organization policies</span></div>
|
|
<div class="how-to-trigger">
|
|
<h4>Pro Tip</h4>
|
|
<p>Check your team's <code>.claude/settings.json</code> into git so everyone gets the same experience.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 67: Spinner Verbs -->
|
|
<div class="slide" data-slide="67">
|
|
<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>
|
|
<p>Set <code>mode</code> to <code>"append"</code> to add your verbs to the defaults, or <code>"replace"</code> to use only yours.</p>
|
|
<div class="trigger-box">
|
|
<h4>Team Fun</h4>
|
|
<p>Commit your spinner verbs in <code>.claude/settings.json</code> so the whole team sees them.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 68: Status Line -->
|
|
<div class="slide" data-slide="68">
|
|
<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>
|
|
<p>Claude generates a status line script based on your shell config.</p>
|
|
<h3>Manual Configuration</h3>
|
|
<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>
|
|
<p>Every team member can have a different status line — customize it in your personal <code>settings.local.json</code>.</p>
|
|
</div>
|
|
|
|
<!-- Slide 69: Output Styles -->
|
|
<div class="slide" data-slide="69">
|
|
<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 — great for learning a new codebase</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 — teaches rather than does</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 to adjust Claude's voice and format</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Recommendation</h4>
|
|
<p>Use <strong>Explanatory</strong> when you're new to a codebase. Switch to default once you're comfortable.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 70: Keybindings -->
|
|
<div class="slide" data-slide="70">
|
|
<h1>Keybindings</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Customize Keys</h4>
|
|
<div class="code-block"><span class="cmd">></span> /keybindings</div>
|
|
</div>
|
|
<p>Every key binding in Claude Code is customizable. Settings live reload — see changes immediately.</p>
|
|
<h3>Default Shortcuts Worth Knowing</h3>
|
|
<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 71: Terminal & Vim -->
|
|
<div class="slide" data-slide="71">
|
|
<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, Apple Terminal, Warp, and Alacritty.</p>
|
|
<p>Without this, you need <code>\</code> + Enter for multiline.</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>
|
|
<p>Normal mode, insert mode, visual mode — all the vim motions you know.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 72: Hooks -->
|
|
<div class="slide" data-slide="72">
|
|
<h1>Hooks Overview</h1>
|
|
<div class="trigger-box">
|
|
<h4>What Are Hooks?</h4>
|
|
<p>Custom scripts that run at specific moments in Claude's lifecycle — deterministic, outside the agentic loop.</p>
|
|
</div>
|
|
<h3>Common Hook Events</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🟢</span><div class="use-case-text"><strong>SessionStart</strong><span>Load context, set environment when Claude starts</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔧</span><div class="use-case-text"><strong>PreToolUse</strong><span>Validate or block commands before they run</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">✅</span><div class="use-case-text"><strong>PostToolUse</strong><span>Auto-format code after edits, run linters</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🛑</span><div class="use-case-text"><strong>Stop</strong><span>Check if tasks are complete before Claude stops</span></div></div>
|
|
</div>
|
|
<p>Claude Code supports <strong>15 hook events</strong>. Five of them can block execution (exit code 2).</p>
|
|
</div>
|
|
|
|
<!-- Slide 73: Plugins -->
|
|
<div class="slide" data-slide="73">
|
|
<h1>Plugins & Marketplaces</h1>
|
|
<div class="how-to-trigger">
|
|
<h4>Install a Plugin</h4>
|
|
<div class="code-block"><span class="cmd">></span> /plugin</div>
|
|
</div>
|
|
<p>Plugins bundle skills, agents, hooks, MCPs, and LSPs into installable packages.</p>
|
|
<h3>What You Can Install</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">📦</span><div class="use-case-text"><strong>Language Server Protocols</strong><span>Available for every major language — real-time diagnostics</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔌</span><div class="use-case-text"><strong>MCP Servers</strong><span>Connect to databases, APIs, external tools</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🧠</span><div class="use-case-text"><strong>Skills & Agents</strong><span>Pre-built workflows from the community</span></div></div>
|
|
</div>
|
|
<div class="trigger-box">
|
|
<h4>Team Marketplaces</h4>
|
|
<p>Create your own marketplace for your company. Add it to <code>settings.json</code> so teammates auto-discover it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 74: MCP Servers -->
|
|
<div class="slide" data-slide="74">
|
|
<h1>MCP Servers</h1>
|
|
<div class="trigger-box">
|
|
<h4>What is MCP?</h4>
|
|
<p>Model Context Protocol — a standard for connecting Claude to external tools, databases, and APIs.</p>
|
|
</div>
|
|
<div class="how-to-trigger">
|
|
<h4>Manage MCP Servers</h4>
|
|
<div class="code-block"><span class="cmd">></span> /mcp</div>
|
|
</div>
|
|
<h3>Popular MCP Servers</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case-item"><span class="use-case-icon">🌐</span><div class="use-case-text"><strong>Playwright</strong><span>Browser automation — Claude controls a real browser</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">🔍</span><div class="use-case-text"><strong>Chrome DevTools</strong><span>Access browser console and network logs</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">💾</span><div class="use-case-text"><strong>Memory</strong><span>Persistent key-value storage for Claude</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 75: Customization Summary -->
|
|
<div class="slide" data-slide="75">
|
|
<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 class="trigger-box">
|
|
<h4>Boris Cherny's Advice</h4>
|
|
<p>"Claude Code works great out of the box, but when you do customize, check your <code>settings.json</code> into git so your team can benefit too."</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 76: Section - Tips -->
|
|
<div class="slide section-slide" data-slide="76">
|
|
|
|
<h1>Tips & Next Steps</h1>
|
|
<p class="section-desc">Practical advice from experience and the creator of Claude Code.</p>
|
|
</div>
|
|
|
|
<!-- Slide 77: Debugging -->
|
|
<div class="slide" data-slide="77">
|
|
<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 78: Golden Rules -->
|
|
<div class="slide" data-slide="78">
|
|
<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 src/api/users.ts line 42" not "fix the bug".</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 79: Resources -->
|
|
<div class="slide" data-slide="79">
|
|
<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>reports/claude-boris-tips-feb-26.md — customization tips from the creator</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 Voice Hooks</strong><span>github.com/shanraisshan/claude-code-voice-hooks — audio feedback for all 15 hooks</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">📋</span><div class="use-case-text"><strong>Commands Reference</strong><span>reports/claude-commands.md — all slash commands and keyboard shortcuts</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">⚙️</span><div class="use-case-text"><strong>Settings Reference</strong><span>reports/claude-settings.md — all 37 settings and 84 environment variables</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 80: Next Steps -->
|
|
<div class="slide" data-slide="80">
|
|
<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>Set up /permissions</strong><span>Pre-approve safe commands to reduce interruptions</span></div></div>
|
|
<div class="use-case-item"><span class="use-case-icon">5️⃣</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">6️⃣</span><div class="use-case-text"><strong>Explore customization</strong><span>Try output styles, status line, spinner verbs — make it yours</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 81: Thank You -->
|
|
<div class="slide title-slide" data-slide="81">
|
|
<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 / 81</div>
|
|
<div class="keyboard-hint"><kbd>←</kbd> <kbd>→</kbd> or <kbd>Space</kbd> to navigate</div>
|
|
|
|
<script>
|
|
let currentSlide = 1;
|
|
const totalSlides = 81;
|
|
function showSlide(n) {
|
|
document.querySelectorAll('.slide').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;
|
|
}
|
|
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>
|