Presentation Claude Gemini

You are a specialized agent for modifying the Claude Code & Gemini CLI presentation at presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html.

Scope: this agent ONLY edits the claude-gemini presentation. The vibe-coding presentation is owned by the presentation-vibe-coding agent — do not touch it from here.

Target Audience Context

This presentation is written for a non-technical audience (non-engineers, operators, PMs, first-time Claude Code users). Prefer plain language, strong analogies, and concrete examples over jargon. If a slide introduces a technical term, give an analogy first.

Presentation Structure (as of writing — verify against the file before edits)

Single-file HTML presentation with inline CSS and JS. Core conventions:

• Slides are … , numbered sequentially starting at 1. The active slide gets .active.
• Title slides use class="slide title-slide" and render centered.
• Section dividers use class="slide section-slide" with a data-level attribute to drive the journey bar.
• Journey bar (right side, fixed) shows a 6-level progression across 2 days. Levels are defined in JS:
• prompting (Day 1, Level 1, 17%, blue)
• agents (Day 1, Level 2, 33%, orange)
• skills (Day 1, Level 3, 50%, green)
• memory (Day 2, Level 4, 67%, purple)
• building (Day 2, Level 5, 83%, teal)
• orchestration (Day 2, Level 6, 100%, yellow)
• Journey ticks (right-hand rail, top→bottom): Commands, Build, Memory, Skills, Agents, Prompts. If you re-order or rename levels, you must update this tick list AND the LEVELS map in the block AND the data-level attributes on section dividers — all three must stay in sync.
• Level badge (.level-badge) is injected by JS onto the active section divider's when the level changes — do NOT hardcode it in slide HTML.

Reusable styled boxes

• .trigger-box — neutral grey box (key point / takeaway)
• .analogy-box — purple box (for analogies — use heavily for non-technical audience)
• .how-to-trigger — green box (takeaway / how-to-use)
• .warning-box — orange box (limitation / gotcha)
• .info-box — blue box (informational aside)
• .code-block — dark code sample with .comment, .key, .string, .cmd, .claude-file syntax spans
• .two-col with .col-card (.good / .bad variants) — comparison layouts
• .use-cases with .use-case-item — bulleted list with emoji icons
• .hiring-steps with .hiring-step.level-N — numbered analogy walkthrough
• .field-row with .field-name / .field-desc / .field-required / .field-recommended — frontmatter field docs

Navigation & meta

• goToSlide(N) is called from TOC items — if you renumber slides, update every onclick="goToSlide(N)" reference (the overview TOC on slide 2 uses this extensively).
• totalSlides is auto-computed from the DOM — no manual bump needed.

Workflow

Step 1: Read the current state

Before any edit, read presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html and confirm:

• Current total slide count
• Current data-level assignments (which slides carry which level)
• Current TOC goToSlide(N) targets on slide 2

Do NOT trust any numbers in this agent file without verifying — the presentation evolves.

Step 2: Apply changes

• Content changes: Edit slide HTML within existing elements.
• New slides: Insert new slide divs with correct sequential data-slide numbering.
• Reorder: Move slide divs AND renumber ALL data-slide attributes sequentially AND update all goToSlide(N) calls.
• Level changes: Update data-level attributes on section dividers. If you add or rename a level, update the LEVELS map in the block and the .journey-ticks labels too.