New slide 29 "Vibe Coding — Robert C. 'Uncle Bob' Martin" pairs with the
existing Karpathy slide as a thesis/antithesis on vibe coding before the
deck's synthesis at slide 30 (Vibe Coding vs Agentic Engineering).
Layout: 2-column CSS grid (45/55 split). Left: Uncle Bob image with the
same rounded corners + box shadow style as Karpathy's image on slide 28.
Right: 3-sentence summary (setup → mechanism → punchline), attribution
line ("Robert C. 'Uncle Bob' Martin — author of Clean Code · Clean
Architecture · co-author of the Agile Manifesto"), and source link
matching slide 28's source-link styling but left-aligned for the
right-column context.
The 3-sentence summary preserves Uncle Bob's arc: vibe coding is
hazardous for novices, LLMs are mathematical functions predicting next
tokens via matmul on internet/GitHub training data, and they are power
tools where novices lose fingers. Italicized closing quote sets it apart
as Uncle Bob's voice rather than the deck's voice.
Heading renames for parallel structure on the back-to-back voices:
- Slide 28 "Vibe Coding" → "Vibe Coding — Andrej Karpathy"
- Slide 29 (new) "Vibe Coding — A Skeptic's View" → "Vibe Coding —
Robert C. 'Uncle Bob' Martin"
The earlier "skeptic's view" framing was authorial editorial; the new
name-attributed framing lets each voice speak on its own terms before
the deck stakes its synthesis position at slide 30.
Renumbering: former slides 29–55 shifted to 30–56. Total slide count
55 → 56. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
Used on the new slide 29 ("Vibe Coding — Robert C. 'Uncle Bob' Martin")
as the counterpoint pairing to slide 28's Karpathy origin tweet.
Co-Authored-By: Claude <noreply@anthropic.com>
Slide 11 ("Tokens, not words"): heading and figcaption removed entirely —
now a pure-picture slide (just the OpenAI tokenizer screenshot at
max-width 1100px). The screenshot is self-titled (visible tokenizer UI
labels), so a slide heading was redundant. Flex-centering wrapper dropped.
Slide 14 ("💬 Models are stateless"): flex-centering wrapper dropped,
<h1> now uses default styling (no inline overrides) so it picks up the
deck's border-bottom separator. Dialog diagram retained with margin-top
adjusted for breathing room. The two-line caption strip ("Every turn is
a fresh API call." / "Memory only exists if the harness replays the
transcript.") preserved — it's the slide's conceptual punchline.
Slide 15 ("🦜 Stochastic Parrots"): the standalone large parrot emoji
that previously floated above the heading was merged into the heading
itself (matches the deck's emoji-prefix convention used by slides 14 and
17). <h1> uses default styling for the separator. Subtitle paragraph
preserved as the subheading below the separator.
Slide 16 ("🌡️ Even temperature = 0 isn't deterministic."): thermometer
emoji prepended to the heading, matching the emoji-prefix pattern. <h1>
uses default styling for the separator. Subtitle paragraph preserved as
the subheading.
All four slides now follow (or, in slide 11's case, deliberately depart
from) the canonical slide-17 heading-with-separator pattern. Slide count
unchanged at 55. No data-level changes. No SVG/asset modifications.
Co-Authored-By: Claude <noreply@anthropic.com>
Slides 12 ("How an LLM tokenizes input") and 13 ("What the LLM actually
sees: integer token IDs") restructured to use the heading-with-separator
pattern modeled after slide 17 (and just-applied to slide 10):
- <h1> uses default styling (no inline overrides) → border-bottom separator
- Outer flex-centering wrapper dropped
- SVG-internal title promoted to slide heading; SVG-internal subtitle
promoted to single-line bold caption
- Figure max-width: 860px → 1100px (slide 12); 960px → 1100px (slide 13)
Slide 12 heading shortened to "How an LLM tokenizes input" (was
"How an LLM tokenizes input and generates text autoregressively") — the
longer form was wrapping to two lines on a projector. Autoregressive
generation is already covered on slide 10; slide 12's caption makes
clear this slide's focus is tokenization specifically.
Slide 13 heading trimmed: "What the LLM actually sees: integer token IDs"
(dropped "(advanced view)" parenthetical — read as redundant scaffolding
in heading position).
Slide 13 caption: chose the comma-as-ID-11 line over the abstract
sequence-of-integers definition. The math notation from the SVG subtitle
was deliberately not promoted — it's been removed from the SVG entirely
(see paired commit b667fc5).
Co-Authored-By: Claude <noreply@anthropic.com>
Same pattern as 13f7ca9 (llm-basic.svg). Title and subtitle removed from
the SVG; both promoted to the slide-level heading and caption on slide 13.
The math-notation subtitle (f: ℤᵏ → ℝⱽ ; next_id = argmax(f(ids))) was
removed entirely — not promoted anywhere, since it doesn't help PMs and
there's no good place for it after the bottom section was simplified to
a single line.
Iteration counter relocated from y=83 (top) to y=550 (bottom, just above
the feedback caption), font size 13 → 20.
Entire diagram shifted upward by 80px to reclaim the space freed by the
removed title and subtitle. Feedback path arc shifted accordingly:
M 1090 510 Q 680 568 270 510 → M 1090 430 Q 680 488 270 430. Feedback
caption pushed slightly: y=565 → y=575. Footnote about illustrative
response IDs shifted: y=588 → y=613.
ViewBox extended 600 → 630 at the bottom. Background rect height bumped
to 630 to match.
The decorative f: ℤᵏ → ℝⱽ label *inside* the LLM black box was preserved
as visual texture (too small to read at projector distance, just signals
"math is happening here") — distinct from the removed top subtitle.
All 7 <animate> blocks on iteration elements preserved verbatim.
Co-Authored-By: Claude <noreply@anthropic.com>
Same pattern as 13f7ca9 (llm-basic.svg). Title and subtitle removed from
the SVG (now promoted to the slide-level heading and caption on slide 12).
Iteration counter relocated from y=83 (top) to y=480 (bottom, just above
the feedback caption), font size 13 → 20.
Entire diagram shifted upward by 80px to reclaim the space freed by the
removed title and subtitle (panels, LLM box, all token rows, arrows,
animated circles, output panel, feedback path control point).
ViewBox extended 540 → 570 at the bottom to accommodate the relocated
iteration counter. Background rect height bumped to 570 to match.
Feedback path arc shifted: M 990 410 Q 620 480 250 410 →
M 990 330 Q 620 400 250 330. Feedback caption stays at y=510 — the
upshift creates enough clearance.
All 7 <animate> blocks on iteration elements preserved verbatim.
Co-Authored-By: Claude <noreply@anthropic.com>
Slide 10 ("How an LLM generates text") restructured to use the deck's
canonical heading-with-separator pattern modeled after slide 17:
- <h1> uses default styling (no inline overrides) → gets the default
border-bottom that acts as the separator
- Outer flex-centering wrapper dropped, matching slide 17's flat layout
Heading text changed from "One token at a time" → "How an LLM generates
text (autoregressive)" — promoted out of the SVG asset (which has been
trimmed to diagram-only in the paired commit).
Caption simplified to a single bold line: "Each predicted token is
appended to the input, then fed back into the LLM." (was previously the
SVG's subtitle). The secondary streaming/cost line is removed for focus.
Figure max-width increased 860px → 1100px (~28% larger) for projector
legibility — combined with the SVG's diagram-shifted-up restructuring,
the on-screen diagram is now roughly 2x the previous size.
Co-Authored-By: Claude <noreply@anthropic.com>
Title and subtitle removed from the SVG (now promoted to the slide-level
heading and caption). Iteration counter relocated from the top of the SVG
(y=85) to the bottom (y=480), just above the feedback caption, with font
size increased from 13 to 20 for projector readability.
The whole diagram (panels, LLM box, arrows, animated circles, feedback
path) shifted upward by 80px to reclaim the space freed by the removed
title and subtitle — the diagram now fills more of its viewBox rather
than leaving empty space at the top.
ViewBox extended 500 → 530 at the bottom to accommodate the relocated
iteration counter and pushed-down feedback caption (y=488 → y=510).
Background rect height bumped to 530 to match (otherwise the new bottom
strip would render transparent).
All 7 <animate> blocks on iteration elements preserved verbatim — only
the parent <text> y and font-size attributes changed.
Co-Authored-By: Claude <noreply@anthropic.com>
New slide plants the model-as-horse metaphor before the LLM mechanics arc
(slides 10–13: tokens, autoregression, IDs, statelessness). Stripped-down
version of the existing harness slide: horse body only, no harness elements,
no callouts. Two text lines:
"A horse. A model."
"The model is the horse. Raw power, no direction." (red)
The full harness reveal with all 5 callouts (Control loop, Tool allowlist,
Context management, Evaluator, State persistence) and etymology footnote
remains intact at its later position.
Mechanical changes:
- viewBox tightened to "110 25 340 345" (was wider to accommodate callouts)
- <defs> block dropped (no arrow markers needed without callouts)
- former slides 9–54 renumbered to 10–55 (the original harness slide moved
from position 18 to 19)
- Total slide count: 54 → 55. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
New slide goes one level deeper than slide 13 — shows the integer token IDs
the model actually receives, not just the colored subword tiles. Uses
llm-animation-tokenids.svg with figure max-width 960px (vs 860px for the
narrower LLM SVGs) since the asset's viewBox is 1360×600.
Caption translates the math notation deliberately left in the SVG:
- "The model never reads text — it reads a sequence of integers, each one
an index into a vocabulary of ~200,000 entries."
- "Notice the comma is always ID 11 — the same punctuation mark maps to
the same integer, everywhere, every time."
Renumbering: former slides 14–53 shifted to 15–54. Total slide count
53 → 54. data-level distribution preserved.
Co-Authored-By: Claude <noreply@anthropic.com>
Animated SVG showing what the LLM actually receives: integer token IDs (one
layer deeper than llm-advanced.svg). Each of the 32 input tokens displays the
ID prominently with the token text in small italic underneath (e.g., 28133
"Does", 17554 " Chat", 162016 "GPT", 97481 " Claude", 29683 " Anth", 71571
"ropic"). Same 7-iteration autoregressive loop; generated tokens also shown
as IDs. Vocab size labeled V ≈ 200,000. Title formula: f: ℤᵏ → ℝⱽ;
next_id = argmax(f(ids)). ViewBox 1360×600 (wider than the other LLM SVGs).
Co-Authored-By: Claude <noreply@anthropic.com>
New slides introduce LLM fundamentals before the Claude Code content for a PM
and beginner-technical audience:
- Slide 11 "One token at a time" — autoregressive generation (llm-basic.svg)
- Slide 12 "Tokens, not words" — tokenization basics (tokens.jpg)
- Slide 13 "Tokens in, tokens out" — combined view (llm-advanced.svg)
Renumbering: former slides 11–50 shifted to 14–53 by incrementing data-slide
attributes and updating SLIDE-N banner comments. data-level groupings
(agents/claude-md/skills/context/workflow) preserved. Total slide count
50 → 53. Asset path: ../assets/llm/.
Co-Authored-By: Claude <noreply@anthropic.com>
Animated SVG showing the same BPE-tokenized prompt from tokens.jpg (32 colored
subword tiles, e.g., "Anthropic" → "Anth"+"ropic", "Perplexity" →
"Per"+"plex"+"ity") feeding into the LLM and generating "Yes, they all use
BPE." token-by-token across 7 iterations. Combines tokenization and
autoregressive generation into one view.
Co-Authored-By: Claude <noreply@anthropic.com>
Screenshot of platform.openai.com/tokenizer showing the sentence "Does ChatGPT,
Claude, Anthropic, Llama, Mistral, Gemini, and Perplexity all use Byte-Pair
Encoding (BPE)?" tokenizing to 32 tokens / 105 characters. Visible tabs:
GPT-5.x & O1/3, GPT-4 & GPT-3.5 (legacy), GPT-3 (legacy) — illustrates that
different model generations use different tokenizers.
Co-Authored-By: Claude <noreply@anthropic.com>
Three-panel SVG (input context, LLM black box, predicted next token) with
7-iteration loop generating "The capital of Japan is Tokyo." from the prompt
"What is the capital of Japan?". Includes purple feedback loop showing each
predicted token appended back into the input.
Co-Authored-By: Claude <noreply@anthropic.com>
Adds the same Old French etymology line ("The origin is Old French
harneis — gear, equipment, armor.") that was added to the canonical
best-practice deck, so the horse-harness analogy slide reads
identically across both decks. The line sits below the existing red
subtitle as a muted footnote (0.95rem, #666), with `text-align:
center` added for this deck because the GDG caption block relies on
flex centering rather than inherited text alignment.
Co-Authored-By: Claude <noreply@anthropic.com>
Adds a styled-HTML dialog diagram (User vs Model bubbles, dashed amber
divider labeled "new session — context wiped", and a two-line caption
strip) to make the stateless behavior of LLMs visible. Drawn rather than
imported as PNG, mirroring slide-12's inline-diagram conventions. Old
slides 10..48 shifted to 11..49 via sentinel-replacement; banner
comments updated in the same pass to keep the deck's zero-drift state.
No new CSS classes — all layout via inline styles consistent with
surrounding slides.
Co-Authored-By: Claude <noreply@anthropic.com>
The slide titled "Tool Calling" / "How the Harness Reaches the World" was
added to the deck after the GDG Kolachi event on Apr 25, 2026, so it doesn't
belong in the historical record of what was actually presented. Reverting
the GDG deck to as-presented state.
The slide is preserved in the new claude-code-best-practice fork (which is
the canonical living reference owned by presentation-claude-code), so no
content is lost overall — this is a deliberate divergence between the two
decks.
Slide had no data-level, so the journey bar is structurally unaffected.
Renumbered slides 15..53 → 14..52 via sentinel-replacement. Final count: 52.
Co-Authored-By: Claude <noreply@anthropic.com>
Forked from presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
on 2026-04-30 to serve as the ongoing main reference deck. Renamed and decoupled
from GDG/Gemini-specific branding:
- title tag, slide-1 H1, subtitle, and HTML banner all read "Claude Code Best Practice"
- favicon swapped from gemini-jumping.svg to claude-jumping.svg
- right-corner global Gemini mascot removed (left Claude mascot kept)
- GDG event badge replaced with neutral GitHub repo badge
- four trailing Gemini-comparison slides removed (49, 50, 51, 52)
- co-presenter intro slide removed
- inline <!-- SLIDE N: ... --> banners fully repaired (1:1 with data-slide values)
Final deck: 48 slides ending with "Thank you" closing slide.
Co-Authored-By: Claude <noreply@anthropic.com>
- Swap intro-slide logos from disrupt-logo.png to disrupt.svg (lines 190 and 260)
- Wrap each disrupt logo in <a href="https://disrupt.com" target="_blank" rel="noopener noreferrer"> so the logo opens disrupt.com in a new tab
- Update model-limitation.jpg path from assets/model/ to assets/harness/ to match the asset move
- Insert new "Tool Calling" slide using assets/harness/tool-calling.png; cascading data-slide renumber for all 40 slides at index >= 13 (totals: 52 -> 53)
- Reorder slides 12-14 so the narrative reads Limitations -> Horse+Harness metaphor -> Tool Calling mechanism
Co-Authored-By: Claude <noreply@anthropic.com>
Visual aid showing how the model issues tool calls and the harness executes
them against the outside world. Used by the new Tool Calling slide.
Co-Authored-By: Claude <noreply@anthropic.com>
Vector replacement for the previous disrupt-logo.png raster, keeping crisp
rendering at any projection scale.
Co-Authored-By: Claude <noreply@anthropic.com>
Reorganize the screenshot under harness/ alongside other harness-limitation
assets. File contents unchanged (rename detected as 100% similarity).
Co-Authored-By: Claude <noreply@anthropic.com>
Shayan Rais