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

updated

Browse Source
This commit is contained in:
Shayan Rais
2026-04-22 19:51:13 +05:00
parent 0f9fe58403
commit f99c62160e
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
+30 -12
View File
@@ -519,20 +519,38 @@
<!-- SLIDE 10: Harness &mdash; what it adds -->
<!-- ============================================================ -->
<div class="slide" data-slide="10">
<h1>&#x1F4AA; Harness &mdash; e.g. tools, MCP, memory</h1>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0;">
<div class="col-card" style="border-left: 4px solid #2196f3;">
<h4 style="color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 10px;">&#x1F30D; Reach beyond training</h4>
<p style="font-size: 1.05rem; color: #333; margin: 0;"><em>WebSearch, WebFetch, MCP servers</em></p>
<h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin: 28px 0;">
<div class="col-card" style="border-left: 4px solid #4caf50; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x270B;</div>
<h4 style="color: #2e7d32; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Tools</strong> &mdash; the hands</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Read, Edit, Bash, WebSearch.</p>
</div>
<div class="col-card" style="border-left: 4px solid #4caf50;">
<h4 style="color: #2e7d32; text-transform: none; letter-spacing: 0; margin-bottom: 10px;">&#x270B; Act on your files</h4>
<p style="font-size: 1.05rem; color: #333; margin: 0;"><em>Read, Edit, Write, Bash</em></p>
<div class="col-card" style="border-left: 4px solid #2196f3; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F441;&#xFE0F;</div>
<h4 style="color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>MCP</strong> &mdash; the eyes</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Claude in Chrome actually <em>sees</em> browser pages.</p>
</div>
<div class="col-card" style="border-left: 4px solid #9c27b0; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F4DD;</div>
<h4 style="color: #7b1fa2; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>CLAUDE.md</strong> &mdash; your memory</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Instructions <strong>you</strong> write.</p>
</div>
<div class="col-card" style="border-left: 4px solid #ff9800; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x2699;&#xFE0F;</div>
<h4 style="color: #ef6c00; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>System Prompt</strong> &mdash; Claude&rsquo;s memory</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Instructions <strong>Anthropic</strong> bakes in.</p>
</div>
<div class="col-card" style="border-left: 4px solid #f44336; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F6E1;&#xFE0F;</div>
<h4 style="color: #c62828; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Permissions</strong> &mdash; the guardrails</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Allow / ask / deny for tool use.</p>
</div>
<div class="col-card" style="border-left: 4px solid #009688; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1FA9D;</div>
<h4 style="color: #00796b; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Hooks</strong> &mdash; the reflexes</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0;"><strong>Deterministic</strong> scripts that fire on events.</p>
</div>
</div>
<div class="trigger-box">
<h4>The body around the brain</h4>
<p>Gives the model <strong>hands</strong> to do, and <strong>eyes</strong> to see beyond its training.</p>
</div>
</div>