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 21:21:14 +05:00
parent 8f0815c095
commit dec5fa80a0
1 changed files with 14 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
+14 -12
View File
@@ -500,7 +500,8 @@
</div>
<div class="trigger-box">
<h4>Example: Opus 4.7</h4>
<p>Knowledge cut-off: <strong>January 2026</strong>.</p>
<p style="margin: 0 0 4px;">Knowledge cut-off: <strong>January 2026</strong>.</p>
<p style="font-size: 0.8rem; color: #888; margin: 0; font-style: italic;">Probabilistic by nature.</p>
</div>
</div>
@@ -567,22 +568,23 @@
<div class="slide" data-slide="11">
<h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
<div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #4caf50; text-align: center;">
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); 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>
<p style="font-size: 0.9rem; color: #555; margin: 0;">Built-in: Read, Edit, Bash, WebSearch.</p>
</div>
<div class="col-card" style="flex: 0 1 calc(25% - 14px); 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 class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #2196f3; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F50C;</div>
<h4 style="color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>MCP</strong> &mdash; the adapters</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0 0 4px;">USB-C for AI &mdash; plug in external tools (databases, browsers, APIs).</p>
<p style="font-size: 0.75rem; color: #999; margin: 0; font-style: italic;">e.g. &#x1F441;&#xFE0F; Claude in Chrome</p>
</div>
<div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #f44336; text-align: center;">
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); 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="flex: 0 1 calc(25% - 14px); border-left: 4px solid #009688; text-align: center;">
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); 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>
@@ -594,7 +596,7 @@
<!-- SLIDE 11: Harness Limitation 1 &mdash; Refuses to use tools -->
<!-- ============================================================ -->
<div class="slide" data-slide="12">
<h1>&#x1F4AA; Limitation &mdash; Doesn&rsquo;t always use its tools</h1>
<h1>&#x1F4AA; Non-determinism &mdash; Doesn&rsquo;t always use its tools</h1>
<p>Same question, different prompt &mdash; sometimes the harness <strong>asks first</strong> instead of acting.</p>
<div style="text-align: center; margin: 24px 0;">
<img src="../assets/harness/harness-limitation-1.jpg" alt="Claude Code refusing to check live weather and asking permission to use WebFetch" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -605,7 +607,7 @@
<!-- SLIDE 12: Harness Limitation 2 &mdash; Different sources -->
<!-- ============================================================ -->
<div class="slide" data-slide="13">
<h1>&#x1F4AA; Limitation &mdash; Different sources, different answers</h1>
<h1>&#x1F4AA; Non-determinism &mdash; Different sources, different answers</h1>
<p>Same question across runs can route through <strong>different tools and sources</strong>.</p>
<div style="text-align: center; margin: 24px 0;">
<img src="../assets/harness/harness-limitation-2.jpg" alt="Claude Code using Web Search across AccuWeather, Weather25, and TimeAndDate for weather in Karachi" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -616,7 +618,7 @@
<!-- SLIDE 13: Harness Limitation 3 &mdash; Tools can fail -->
<!-- ============================================================ -->
<div class="slide" data-slide="14">
<h1>&#x1F4AA; Limitation &mdash; Tools can fail</h1>
<h1>&#x1F4AA; Non-determinism &mdash; Tools can fail</h1>
<p>External tools can time out, return errors, or fetch stale data.</p>
<div style="text-align: center; margin: 24px 0;">
<img src="../assets/harness/harness-limitation-3.jpg" alt="Claude Code showing a 403 error from timeanddate.com and falling back to wttr.in" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />