gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upadted presentation

Browse Source
This commit is contained in:
Shayan Rais
2026-02-12 17:41:02 +05:00
parent 599bba5317
commit 09518901b1
2 changed files with 264 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/hooks/config/hooks-config.json
+11 -4
View File
@@ -1,11 +1,18 @@
{
"disableSessionStartHook": false,
"disableUserPromptSubmitHook": false,
"disablePreToolUseHook": false,
"disablePostToolUseHook": false,
"disableUserPromptSubmitHook": false,
"disablePostToolUseFailureHook": false,
"disablePermissionRequestHook": false,
"disableNotificationHook": false,
"disableStopHook": false,
"disableSubagentStartHook": false,
"disableSubagentStopHook": false,
"disableStopHook": false,
"disablePreCompactHook": false,
"disableSessionStartHook": false,
"disableSessionEndHook": false
"disableSessionEndHook": false,
"disableSetupHook": false,
"disableTeammateIdleHook": false,
"disableTaskCompletedHook": false,
"disableLogging": true
}
presentation/index.html
+253 -173
View File
@@ -126,31 +126,111 @@
<p style="margin-top: 24px; color: #666;">Run <code>/doctor</code> anytime to check your installation health.</p>
</div>
<!-- Slide 4: Login Options -->
<!-- Slide 4: Login — Subscription -->
<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>
<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>
<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>
<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;">&#10003;</td>
<td style="padding: 8px 12px; color: #c00;">&#10007;</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&times; Pro limit</td>
<td style="padding: 8px 12px; color: green;">&#10003;</td>
<td style="padding: 8px 12px; color: green;">&#10003;</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&times; Pro limit</td>
<td style="padding: 8px 12px; color: green;">&#10003;</td>
<td style="padding: 8px 12px; color: green;">&#10003;</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>
<p style="margin-top: 8px;"><strong>Best for:</strong> Individual developers, teams with existing subscriptions</p>
</div>
<!-- Slide 5: First Session -->
<!-- Slide 5: Login — API Key -->
<div class="slide" data-slide="5">
<h1>Login Option B: API Key</h1>
<p>Pay per token with an Anthropic API key &mdash; 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;">$1 / MTok</td>
<td style="padding: 8px 12px;">$5 / MTok</td>
<td style="padding: 8px 12px;">200K</td>
</tr>
</tbody>
</table>
<h3 style="margin-top: 20px;">Setup</h3>
<div class="two-col">
<div class="col-card">
<h4>Quick: Environment Variable</h4>
<div class="code-block"><span class="cmd">export ANTHROPIC_API_KEY=sk-ant-...</span>
<span class="cmd">claude</span></div>
</div>
<div class="col-card">
<h4>Recommended: apiKeyHelper</h4>
<div class="code-block"><span class="comment"># ~/.claude/settings.json</span>
{ "<span class="string">apiKeyHelper</span>": "~/.claude/anthropic_key.sh" }
<span class="comment"># ~/.claude/anthropic_key.sh</span>
<span class="cmd">echo</span> "sk-ant-........."
<span class="comment"># Make it executable</span>
<span class="cmd">chmod +x</span> ~/.claude/anthropic_key.sh</div>
</div>
</div>
<p style="margin-top: 12px;"><strong>Best for:</strong> CI/CD, automation, variable usage, full model access without subscription</p>
</div>
<!-- Slide 6: First Session -->
<div class="slide" data-slide="6">
<h1>Your First Session</h1>
<div class="how-to-trigger">
<h4>Start Claude Code</h4>
@@ -166,8 +246,8 @@
<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">
<!-- Slide 7: The Interface -->
<div class="slide" data-slide="7">
<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
@@ -185,15 +265,15 @@
</div>
</div>
<!-- Slide 7: Section - Beyond Vibe Coding -->
<div class="slide section-slide" data-slide="7">
<!-- Slide 8: Section - Beyond Vibe Coding -->
<div class="slide section-slide" data-slide="8">
<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">
<!-- Slide 9: Your First Prompt -->
<div class="slide" data-slide="9">
<h1>Your First Prompt</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -209,8 +289,8 @@
</div>
</div>
<!-- Slide 9: Good vs Bad Prompts -->
<div class="slide" data-slide="9">
<!-- Slide 10: Good vs Bad Prompts -->
<div class="slide" data-slide="10">
<h1>Good vs Bad Prompts</h1>
<p>The difference between vibe coding and professional usage:</p>
<div class="two-col">
@@ -231,8 +311,8 @@
</div>
</div>
<!-- Slide 10: Providing Context -->
<div class="slide" data-slide="10">
<!-- Slide 11: Providing Context -->
<div class="slide" data-slide="11">
<h1>Providing Context</h1>
<div class="trigger-box">
<h4>Key Rule</h4>
@@ -251,8 +331,8 @@
</div>
</div>
<!-- Slide 11: How Claude Uses Tools -->
<div class="slide" data-slide="11">
<!-- Slide 12: How Claude Uses Tools -->
<div class="slide" data-slide="12">
<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">
@@ -279,8 +359,8 @@
</div>
</div>
<!-- Slide 12: File Operations -->
<div class="slide" data-slide="12">
<!-- Slide 13: File Operations -->
<div class="slide" data-slide="13">
<h1>File Operations</h1>
<h3>Reading Files</h3>
<div class="code-block"><span class="cmd">&gt;</span> Read the package.json file</div>
@@ -294,8 +374,8 @@
</div>
</div>
<!-- Slide 13: Bash & Search -->
<div class="slide" data-slide="13">
<!-- Slide 14: Bash & Search -->
<div class="slide" data-slide="14">
<h1>Bash Commands & Search</h1>
<h3>Running Commands</h3>
<div class="code-block"><span class="cmd">&gt;</span> Run the test suite: npm test
@@ -311,8 +391,8 @@
</div>
</div>
<!-- Slide 14: Context Window -->
<div class="slide" data-slide="14">
<!-- Slide 15: Context Window -->
<div class="slide" data-slide="15">
<h1>Understanding the Context Window</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
@@ -331,8 +411,8 @@
</div>
</div>
<!-- Slide 15: Prompting Best Practices -->
<div class="slide" data-slide="15">
<!-- Slide 16: Prompting Best Practices -->
<div class="slide" data-slide="16">
<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>
@@ -344,15 +424,15 @@
</div>
</div>
<!-- Slide 16: Section - Essential Commands -->
<div class="slide section-slide" data-slide="16">
<!-- Slide 17: Section - Essential Commands -->
<div class="slide section-slide" data-slide="17">
<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">
<!-- Slide 18: /help -->
<div class="slide" data-slide="18">
<h1>/help</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -378,8 +458,8 @@
</div>
</div>
<!-- Slide 18: /model -->
<div class="slide" data-slide="18">
<!-- Slide 19: /model -->
<div class="slide" data-slide="19">
<h1>/model — Switch Models</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -397,8 +477,8 @@
</div>
</div>
<!-- Slide 19: Effort Level -->
<div class="slide" data-slide="19">
<!-- Slide 20: Effort Level -->
<div class="slide" data-slide="20">
<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">
@@ -416,8 +496,8 @@
</div>
</div>
<!-- Slide 20: /fast -->
<div class="slide" data-slide="20">
<!-- Slide 21: /fast -->
<div class="slide" data-slide="21">
<h1>/fast — Faster Output</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -430,8 +510,8 @@
<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">
<!-- Slide 22: /plan -->
<div class="slide" data-slide="22">
<h1>/plan — Plan Before Code</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -450,8 +530,8 @@
</div>
</div>
<!-- Slide 22: /compact -->
<div class="slide" data-slide="22">
<!-- Slide 23: /compact -->
<div class="slide" data-slide="23">
<h1>/compact — Manage Context</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -469,8 +549,8 @@
</div>
</div>
<!-- Slide 23: /context & /cost -->
<div class="slide" data-slide="23">
<!-- Slide 24: /context & /cost -->
<div class="slide" data-slide="24">
<h1>/context & /cost</h1>
<div class="two-col">
<div class="col-card">
@@ -486,8 +566,8 @@
</div>
</div>
<!-- Slide 24: /clear & /rewind -->
<div class="slide" data-slide="24">
<!-- Slide 25: /clear & /rewind -->
<div class="slide" data-slide="25">
<h1>/clear & /rewind</h1>
<div class="two-col">
<div class="col-card">
@@ -507,8 +587,8 @@
</div>
</div>
<!-- Slide 25: /resume -->
<div class="slide" data-slide="25">
<!-- Slide 26: /resume -->
<div class="slide" data-slide="26">
<h1>/resume — Resume Sessions</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -525,8 +605,8 @@
</div>
</div>
<!-- Slide 26: /memory -->
<div class="slide" data-slide="26">
<!-- Slide 27: /memory -->
<div class="slide" data-slide="27">
<h1>/memory — Persistent Context</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -541,8 +621,8 @@
</div>
</div>
<!-- Slide 27: /doctor -->
<div class="slide" data-slide="27">
<!-- Slide 28: /doctor -->
<div class="slide" data-slide="28">
<h1>/doctor — Diagnostics</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -557,8 +637,8 @@
</div>
</div>
<!-- Slide 28: /config -->
<div class="slide" data-slide="28">
<!-- Slide 29: /config -->
<div class="slide" data-slide="29">
<h1>/config — Configuration</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -573,8 +653,8 @@
</div>
</div>
<!-- Slide 29: /permissions -->
<div class="slide" data-slide="29">
<!-- Slide 30: /permissions -->
<div class="slide" data-slide="30">
<h1>/permissions — Tool Access Control</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -596,8 +676,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 30: /sandbox -->
<div class="slide" data-slide="30">
<!-- Slide 31: /sandbox -->
<div class="slide" data-slide="31">
<h1>/sandbox — Sandboxing</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -614,8 +694,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 31: Commands Cheat Sheet -->
<div class="slide" data-slide="31">
<!-- Slide 32: Commands Cheat Sheet -->
<div class="slide" data-slide="32">
<h1>Commands Cheat Sheet</h1>
<div class="info-grid">
<div class="info-card">
@@ -649,15 +729,15 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 32: Section - Workflows -->
<div class="slide section-slide" data-slide="32">
<!-- Slide 33: Section - Workflows -->
<div class="slide section-slide" data-slide="33">
<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">
<!-- Slide 34: Why Plan First -->
<div class="slide" data-slide="34">
<h1>Why Plan Before Code</h1>
<div class="two-col">
<div class="col-card bad">
@@ -679,8 +759,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 34: Plan Mode in Practice -->
<div class="slide" data-slide="34">
<!-- Slide 35: Plan Mode in Practice -->
<div class="slide" data-slide="35">
<h1>Plan Mode in Practice</h1>
<div class="how-to-trigger">
<h4>Step by Step</h4>
@@ -702,8 +782,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 35: Task Lists -->
<div class="slide" data-slide="35">
<!-- Slide 36: Task Lists -->
<div class="slide" data-slide="36">
<h1>Task Lists</h1>
<p>For complex tasks, Claude creates a <strong>task list</strong> to track progress:</p>
<div class="code-block"><span class="cmd">&gt;</span> Add user authentication with JWT, including:
@@ -719,8 +799,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 36: Commit Workflow -->
<div class="slide" data-slide="36">
<!-- Slide 37: Commit Workflow -->
<div class="slide" data-slide="37">
<h1>The Commit Workflow</h1>
<div class="how-to-trigger">
<h4>Ask Claude to Commit</h4>
@@ -738,8 +818,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 37: PR Workflow -->
<div class="slide" data-slide="37">
<!-- Slide 38: PR Workflow -->
<div class="slide" data-slide="38">
<h1>The PR Workflow</h1>
<div class="how-to-trigger">
<h4>Ask Claude to Create a PR</h4>
@@ -753,8 +833,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 38: Workflow Best Practices -->
<div class="slide" data-slide="38">
<!-- Slide 39: Workflow Best Practices -->
<div class="slide" data-slide="39">
<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>
@@ -765,15 +845,15 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 39: Section - Memory -->
<div class="slide section-slide" data-slide="39">
<!-- Slide 40: Section - Memory -->
<div class="slide section-slide" data-slide="40">
<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">
<!-- Slide 41: What is CLAUDE.md -->
<div class="slide" data-slide="41">
<h1>What is CLAUDE.md?</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
@@ -788,8 +868,8 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
</div>
</div>
<!-- Slide 41: Creating CLAUDE.md -->
<div class="slide" data-slide="41">
<!-- Slide 42: Creating CLAUDE.md -->
<div class="slide" data-slide="42">
<h1>Creating CLAUDE.md</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -815,8 +895,8 @@ A Node.js REST API for managing user accounts...
- Follow existing error handling patterns in src/utils/errors.ts</div>
</div>
<!-- Slide 42: What to Include -->
<div class="slide" data-slide="42">
<!-- Slide 43: What to Include -->
<div class="slide" data-slide="43">
<h1>What to Include in CLAUDE.md</h1>
<div class="two-col">
<div class="col-card good">
@@ -839,8 +919,8 @@ A Node.js REST API for managing user accounts...
</div>
</div>
<!-- Slide 43: Keep Under 150 Lines -->
<div class="slide" data-slide="43">
<!-- Slide 44: Keep Under 150 Lines -->
<div class="slide" data-slide="44">
<h1>Keep It Under 150 Lines</h1>
<div class="warning-box">
<h4>Critical Rule</h4>
@@ -854,8 +934,8 @@ A Node.js REST API for managing user accounts...
</div>
</div>
<!-- Slide 44: /memory -->
<div class="slide" data-slide="44">
<!-- Slide 45: /memory -->
<div class="slide" data-slide="45">
<h1>/memory Command</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -870,8 +950,8 @@ A Node.js REST API for managing user accounts...
<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">
<!-- Slide 46: Rules -->
<div class="slide" data-slide="46">
<h1>Rules (.claude/rules/)</h1>
<div class="trigger-box">
<h4>What Are Rules?</h4>
@@ -888,8 +968,8 @@ When writing tests:
<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">
<!-- Slide 47: Memory Best Practices -->
<div class="slide" data-slide="47">
<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>
@@ -900,15 +980,15 @@ When writing tests:
</div>
</div>
<!-- Slide 47: Section - Skills -->
<div class="slide section-slide" data-slide="47">
<!-- Slide 48: Section - Skills -->
<div class="slide section-slide" data-slide="48">
<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">
<!-- Slide 49: What Are Skills -->
<div class="slide" data-slide="49">
<h1>What Are Skills?</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
@@ -922,8 +1002,8 @@ When writing tests:
</div>
</div>
<!-- Slide 49: Skill Structure -->
<div class="slide" data-slide="49">
<!-- Slide 50: Skill Structure -->
<div class="slide" data-slide="50">
<h1>Skill Directory Structure</h1>
<div class="code-block"><span class="comment"># Skills live in .claude/skills/</span>
.claude/
@@ -942,8 +1022,8 @@ When writing tests:
</div>
</div>
<!-- Slide 50: SKILL.md Frontmatter -->
<div class="slide" data-slide="50">
<!-- Slide 51: SKILL.md Frontmatter -->
<div class="slide" data-slide="51">
<h1>SKILL.md Frontmatter</h1>
<div class="code-block"><span class="comment"># .claude/skills/weather-fetcher/SKILL.md</span>
---
@@ -965,8 +1045,8 @@ Return only the temperature value in Celsius.</div>
</div>
</div>
<!-- Slide 51: Creating a Skill -->
<div class="slide" data-slide="51">
<!-- Slide 52: Creating a Skill -->
<div class="slide" data-slide="52">
<h1>Creating Your First Skill</h1>
<div class="how-to-trigger">
<h4>Try This</h4>
@@ -985,8 +1065,8 @@ Return only the temperature value in Celsius.</div>
</div>
</div>
<!-- Slide 52: Invoking Skills -->
<div class="slide" data-slide="52">
<!-- Slide 53: Invoking Skills -->
<div class="slide" data-slide="53">
<h1>Invoking Skills</h1>
<h3>Manual Invocation (Slash Command)</h3>
<div class="code-block"><span class="cmd">&gt;</span> /weather-fetcher
@@ -1002,8 +1082,8 @@ Return only the temperature value in Celsius.</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">
<!-- Slide 54: Skills Summary -->
<div class="slide" data-slide="54">
<h1>Skills Summary</h1>
<div class="info-grid">
<div class="info-card">
@@ -1025,15 +1105,15 @@ Return only the temperature value in Celsius.</div>
</div>
</div>
<!-- Slide 54: Section - Agents -->
<div class="slide section-slide" data-slide="54">
<!-- Slide 55: Section - Agents -->
<div class="slide section-slide" data-slide="55">
<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">
<!-- Slide 56: What Are Agents -->
<div class="slide" data-slide="56">
<h1>What Are Agents?</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
@@ -1062,8 +1142,8 @@ Task(
</div>
</div>
<!-- Slide 56: Agent Frontmatter -->
<div class="slide" data-slide="56">
<!-- Slide 57: Agent Frontmatter -->
<div class="slide" data-slide="57">
<h1>Agent Frontmatter</h1>
<div class="code-block"><span class="comment"># .claude/agents/code-reviewer.md</span>
---
@@ -1084,8 +1164,8 @@ Review your memory for patterns you've seen before.</div>
<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">
<!-- Slide 58: Weather Agent -->
<div class="slide" data-slide="58">
<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>
@@ -1108,8 +1188,8 @@ to fetch weather data and apply transformations.</div>
</div>
</div>
<!-- Slide 58: Agent Tools -->
<div class="slide" data-slide="58">
<!-- Slide 59: Agent Tools -->
<div class="slide" data-slide="59">
<h1>Agent Tools & Model</h1>
<h3>Restricting Tools</h3>
<div class="code-block"><span class="comment"># Read-only agent — can't modify anything</span>
@@ -1128,8 +1208,8 @@ to fetch weather data and apply transformations.</div>
</div>
</div>
<!-- Slide 59: Agents with Skills -->
<div class="slide" data-slide="59">
<!-- Slide 60: Agents with Skills -->
<div class="slide" data-slide="60">
<h1>Agents with Preloaded Skills</h1>
<div class="trigger-box">
<h4>Key Pattern</h4>
@@ -1150,8 +1230,8 @@ 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">
<!-- Slide 61: Default Main Agent -->
<div class="slide" data-slide="61">
<h1>Setting a Default Agent</h1>
<div class="how-to-trigger">
<h4>Via settings.json</h4>
@@ -1169,8 +1249,8 @@ Build API endpoints following the preloaded conventions.</div>
</div>
</div>
<!-- Slide 61: Subagents -->
<div class="slide" data-slide="61">
<!-- Slide 62: Subagents -->
<div class="slide" data-slide="62">
<h1>Subagents via Task Tool</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
@@ -1193,8 +1273,8 @@ Task(
</p>
</div>
<!-- Slide 62: Command → Agent → Skills -->
<div class="slide" data-slide="62">
<!-- Slide 63: Command → Agent → Skills -->
<div class="slide" data-slide="63">
<h1>Command → Agent → Skills</h1>
<p>The full architecture pattern for complex workflows:</p>
<div class="code-block"><span class="comment">┌─────────────────────────────────────────────┐</span>
@@ -1213,8 +1293,8 @@ Task(
</div>
</div>
<!-- Slide 63: Agent Memory -->
<div class="slide" data-slide="63">
<!-- Slide 64: Agent Memory -->
<div class="slide" data-slide="64">
<h1>Agent Memory</h1>
<div class="trigger-box">
<h4>Key Feature</h4>
@@ -1233,8 +1313,8 @@ Task(
</p>
</div>
<!-- Slide 64: Agents Summary -->
<div class="slide" data-slide="64">
<!-- Slide 65: Agents Summary -->
<div class="slide" data-slide="65">
<h1>Agents Summary</h1>
<div class="info-grid">
<div class="info-card">
@@ -1264,15 +1344,15 @@ Task(
</div>
</div>
<!-- Slide 65: Section - Customization -->
<div class="slide section-slide" data-slide="65">
<!-- Slide 66: Section - Customization -->
<div class="slide section-slide" data-slide="66">
<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">
<!-- Slide 67: settings.json -->
<div class="slide" data-slide="67">
<h1>settings.json Overview</h1>
<div class="trigger-box">
<h4>Settings Hierarchy</h4>
@@ -1290,8 +1370,8 @@ Task(
</div>
</div>
<!-- Slide 67: Spinner Verbs -->
<div class="slide" data-slide="67">
<!-- Slide 68: Spinner Verbs -->
<div class="slide" data-slide="68">
<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>
@@ -1314,8 +1394,8 @@ Task(
</div>
</div>
<!-- Slide 68: Status Line -->
<div class="slide" data-slide="68">
<!-- Slide 69: Status Line -->
<div class="slide" data-slide="69">
<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">
@@ -1334,8 +1414,8 @@ Task(
<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">
<!-- Slide 70: Output Styles -->
<div class="slide" data-slide="70">
<h1>Output Styles</h1>
<div class="how-to-trigger">
<h4>Set via /config</h4>
@@ -1353,8 +1433,8 @@ Task(
</div>
</div>
<!-- Slide 70: Keybindings -->
<div class="slide" data-slide="70">
<!-- Slide 71: Keybindings -->
<div class="slide" data-slide="71">
<h1>Keybindings</h1>
<div class="how-to-trigger">
<h4>Customize Keys</h4>
@@ -1378,8 +1458,8 @@ Task(
</div>
</div>
<!-- Slide 71: Terminal & Vim -->
<div class="slide" data-slide="71">
<!-- Slide 72: Terminal & Vim -->
<div class="slide" data-slide="72">
<h1>Terminal Setup & Vim Mode</h1>
<div class="two-col">
<div class="col-card">
@@ -1397,8 +1477,8 @@ Task(
</div>
</div>
<!-- Slide 72: Hooks -->
<div class="slide" data-slide="72">
<!-- Slide 73: Hooks -->
<div class="slide" data-slide="73">
<h1>Hooks Overview</h1>
<div class="trigger-box">
<h4>What Are Hooks?</h4>
@@ -1414,8 +1494,8 @@ Task(
<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">
<!-- Slide 74: Plugins -->
<div class="slide" data-slide="74">
<h1>Plugins & Marketplaces</h1>
<div class="how-to-trigger">
<h4>Install a Plugin</h4>
@@ -1434,8 +1514,8 @@ Task(
</div>
</div>
<!-- Slide 74: MCP Servers -->
<div class="slide" data-slide="74">
<!-- Slide 75: MCP Servers -->
<div class="slide" data-slide="75">
<h1>MCP Servers</h1>
<div class="trigger-box">
<h4>What is MCP?</h4>
@@ -1453,8 +1533,8 @@ Task(
</div>
</div>
<!-- Slide 75: Customization Summary -->
<div class="slide" data-slide="75">
<!-- Slide 76: Customization Summary -->
<div class="slide" data-slide="76">
<h1>Customization Summary</h1>
<div class="info-grid">
<div class="info-card">
@@ -1478,15 +1558,15 @@ Task(
</div>
</div>
<!-- Slide 76: Section - Tips -->
<div class="slide section-slide" data-slide="76">
<!-- Slide 77: Section - Tips -->
<div class="slide section-slide" data-slide="77">
<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">
<!-- Slide 78: Debugging -->
<div class="slide" data-slide="78">
<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>
@@ -1496,8 +1576,8 @@ Task(
</div>
</div>
<!-- Slide 78: Golden Rules -->
<div class="slide" data-slide="78">
<!-- Slide 79: Golden Rules -->
<div class="slide" data-slide="79">
<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>
@@ -1509,8 +1589,8 @@ Task(
</div>
</div>
<!-- Slide 79: Resources -->
<div class="slide" data-slide="79">
<!-- Slide 80: Resources -->
<div class="slide" data-slide="80">
<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>
@@ -1522,8 +1602,8 @@ Task(
</div>
</div>
<!-- Slide 80: Next Steps -->
<div class="slide" data-slide="80">
<!-- Slide 81: Next Steps -->
<div class="slide" data-slide="81">
<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>
@@ -1535,8 +1615,8 @@ Task(
</div>
</div>
<!-- Slide 81: Thank You -->
<div class="slide title-slide" data-slide="81">
<!-- Slide 82: Thank You -->
<div class="slide title-slide" data-slide="82">
<div class="title-logo">
<img src="../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
</div>
@@ -1554,12 +1634,12 @@ Task(
<button class="nav-btn" id="prevBtn" onclick="prevSlide()">&#8592;</button>
<button class="nav-btn" id="nextBtn" onclick="nextSlide()">&#8594;</button>
</div>
<div class="slide-counter" id="slideCounter">1 / 81</div>
<div class="slide-counter" id="slideCounter">1 / 82</div>
<div class="keyboard-hint"><kbd>&#8592;</kbd> <kbd>&#8594;</kbd> or <kbd>Space</kbd> to navigate</div>
<script>
let currentSlide = 1;
const totalSlides = 81;
const totalSlides = 82;
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
if (n > totalSlides) currentSlide = totalSlides;