From dc73306e61075a173a9fbc9b5d4778ddcf8296be Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Fri, 24 Apr 2026 17:49:19 +0500 Subject: [PATCH] bottom cards added --- .../agents/presentation-learning-journey.md | 1 + .../index.html | 496 ++++++++++++++---- 2 files changed, 390 insertions(+), 107 deletions(-) diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index 9903b45..811d4cb 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -174,3 +174,4 @@ After completing changes, report to the user: - **2026-04-24 slide 6 jargon-cloud tier reshuffle**: `vibe coding` demoted from hero-blue to small-orange (top: 91% / left: 22%); `harness` and `compaction` promoted from purple to hero-blue (kept positions, upgraded padding/font/shadow); `context window` added as new hero-blue pill (top: 32% / left: 5%); `context engineering` deleted (pill + legend row both removed). Legend rebalanced: left column = 8 blue + 2 purple (10 rows), right column = 4 green + 5 orange (9 rows) — slight asymmetry because green dropped from 5 to 4 after context-engineering removal; acceptable. Key verification method: Python script extracting all `background: #HEX` pill texts and all `color: #HEX; font-weight: 700` legend texts per color — confirmed exact match for all 4 tiers. Total slides and data-level dividers unchanged (51 / 21,27,33,38,44,47). - **2026-04-24 restore-original + keep-new insert at slot 9 (50 → 51 slides)**: the "Can answer / Can't answer" grid (commit `61a847c`) was restored at slot 9 and the Stochastic Parrots slide (authored in `fa1b499`) was shifted to slot 10. Recovery method: `git show 61a847c:...index.html | sed -n 'LINE,LINEp'` to extract the exact pre-edit markup, then Edit tool to insert it before the current slot-9 comment block, then a Python sentinel-replacement script to renumber old slides 10-50 → 11-51. The sentinel approach is mandatory here because Python `str.replace` applies all substitutions, so descending-order alone is insufficient for a multi-value renumber (unlike sed's single-expression-per-call mode). No `goToSlide` hardcoded calls exist in this deck — only the function definition — so no TOC update was needed. `totalSlides` is DOM-computed, no hardcoded bump. New section-divider positions: **Agents=21, Skills=27, Context=33, CLAUDE.md=38, Commands=44, Workflow=47**. Total slides: **51**. git ref for the original slide 9 content: `61a847c`. - **2026-04-24 three concept-intro slides inserted at 27-29 (51 → 54 slides)**: new slides 27 (CLAUDE.md), 28 (Skills), 29 (Context) inserted immediately before the old Skills section opener (now at 30). All three use `class="slide section-slide"` with NO `data-level` — they are concept intros, not arc-level openers, so the journey bar should not advance on them. Pill choices: CLAUDE.md uses `CLAUDE.md` as the filename (monospace yellow pill — no slash command exists); Skills uses `.claude/skills/` as the filesystem path (no `/skills` slash command exists — verified against CLAUDE.md which shows skills are file-based, not command-invoked); Context uses `/context` — this IS a real Claude Code command (shows current token usage breakdown). Slide 29 (Context) intentionally has NO file-tree because context is a runtime concept, not a filesystem artifact. Renumber method: sentinel technique with 3-phase Python script — (1) replace all `data-slide="27"` through `"51"` with `##SEN27##` through `##SEN51##`, (2) restore the FIRST occurrence of sentinels 27/28/29 (the new slides) back to their correct values using `str.replace(..., 1)`, (3) resolve remaining sentinels N→N+3. Section-divider positions after insert: **Agents=23, Skills=30, Context=36, CLAUDE.md=41, Commands=47, Workflow=50**. Total slides: **54**. +- **2026-04-24 pillar-footer strip added to slides 23-29**: compact 5-card reference bar added below the viewport fold on slides 23-29. Implementation uses Option A: each slide's existing content is wrapped in a `.slide-viewport-content` div (`min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%`) and a `.pillar-footer` sibling div (flex row, `gap: 10px; justify-content: center; max-width: 1000px; margin: 60px auto 40px auto`) is appended after the wrapper. Each footer contains 5 `.pillar-mini-card` divs (flex row, `padding: 10px 14px`, `border-radius: 8px`, `box-shadow: 0 2px 6px rgba(0,0,0,0.08)`) with emoji + title only — no body text. Active-pillar highlighting is implemented: the current topic's card has `border-left: 5px solid ` and no `.inactive` class; the other four have `border-left: 3px solid ` and class `pillar-mini-card inactive` (`opacity: 0.45`). Active assignments: slides 23-26 → Agents, slide 27 → CLAUDE.md, slide 28 → Skills, slide 29 → Context. Section-dividers (slides 23, 27, 28, 29) kept `justify-content: center` for `.slide-viewport-content`; content slides (24, 25, 26) use `justify-content: flex-start; padding-top: 60px` on `.slide-viewport-content` to keep the h1 near top. Scroll reset (`window.scrollTo(0, 0)` in `showSlide()`) was already present from a prior session — no JS change needed. The 5 pillar colors exactly match slide 14's card borders: Agents `#009688`, Skills `#4caf50`, Workflows `#ef6c00`, CLAUDE.md `#9c27b0`, Context `#3f51b5`. Total slide count (54) and all data-level positions unchanged. **At 1024px width**: each mini-card is `~18%` of 1000px = ~180px. With `flex: 1` and `min-width: 0`, cards compress gracefully — the 12-char "CLAUDE.md" title at `font-size: 0.82rem` is ~96px, well within 180px. No wrapping expected at standard presentation viewports. diff --git a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html index dfafe35..d9d4677 100644 --- a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html +++ b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html @@ -124,6 +124,16 @@ .file-tree .file { color: #444; } .file-tree .highlight { color: #2e7d32; font-weight: 600; } .file-tree .dim { color: #aaa; } + /* Pillar footer — 5-card reference strip below the viewport fold */ + .slide-viewport-content { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } + .pillar-footer { display: flex; gap: 10px; justify-content: center; align-items: stretch; max-width: 1200px; margin: 40px auto 32px auto; width: 100%; } + .pillar-mini-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; background: #f8f9fa; padding: 12px 14px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: opacity 0.2s; } + .pillar-mini-card .pmc-emoji { font-size: 1.1rem; line-height: 1; } + .pillar-mini-card .pmc-title { font-size: 0.82rem; font-weight: 700; color: #1a1a1a; margin-top: 3px; } + .pillar-mini-card .pmc-subtitle { font-size: 0.7rem; font-style: italic; color: #666; margin-top: 1px; } + .pillar-mini-card .pmc-body { font-size: 0.72rem; line-height: 1.35; color: #333; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } + .pillar-mini-card .pmc-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-top: 6px; white-space: nowrap; align-self: flex-start; } + .pillar-mini-card.inactive { opacity: 0.55; } @@ -797,7 +807,7 @@
🎯

Skills — the know-how

What the specialist (or Claude) can actually do.

-

✅ progressive disclosure

+

✅ progressive disclosure — loaded on demand

📘
@@ -811,13 +821,6 @@

Knowledge you provide to the model.

⚠️ 200-line problem

-
-
📝
-

System Prompt — Claude’s memory

-

Knowledge Anthropic bakes in.

-

e.g. identity · tone · safety

-

✅ always on

-
💭

Context — the working memory

@@ -860,6 +863,13 @@

Hooks — the reflexes

Deterministic scripts that fire on events.

+
+
📝
+

System Prompt — Claude’s memory

+

Knowledge Anthropic bakes in.

+

e.g. identity · tone · safety

+

✅ always on

+
@@ -1010,97 +1020,253 @@ todoapp/
-

👤 Agents

-
- /agents -
-

Examples: weather reporter, front-end engineer, QA engineer.

-
- ✅ Fresh working memory per run - 🎯 Scoped tools, model, permission - ⚡ Parallelizable -
- 
root/
+        

+            
👤 Agents

+            

+                /agents
+            

+            
Examples: weather reporter, front-end engineer, QA engineer.

+            

+                ✅ Fresh working memory per run
+                🎯 Scoped tools, model, permission
+                ⚡ Parallelizable
+            

+            
root/
 ├── .claude/
 │   └── agents/
 │       └── weather-agent.md
 └── README.md

+        

+        

+            

+                🧑‍💼
+                Agents
+                — the specialists
+                A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation.
+                ✅ fresh working memory per run
+            

+            

+                🎯
+                Skills
+                — the know-how
+                What the specialist (or Claude) can actually do. Loaded on demand — only when needed.
+                ✅ progressive disclosure
+            

+            

+                📘
+                Workflows
+                — the instruction manual
+                Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible.
+                ✅ reproducible recipes
+            

+            

+                📝
+                CLAUDE.md
+                — your memory
+                Knowledge you provide to the model. Read every session. Keep it under 200 lines.
+                ⚠️ 200-line limit
+            

+            

+                💭
+                Context
+                — the working memory
+                What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%.
+                ⚠️ dumb-zone problem
+            

+
-

Create your first agent — /agents

-
-
-
-

The Command

-

Type /agents.

+
+

Create your first agent — /agents

+
+
+
+

The Command

+

Type /agents.

+
+

Opens an interactive menu — pick "Create new agent" and the CLI drafts the agent file for you.

+

Creates .claude/agents/<name>.md — a plain markdown file anyone can edit.

-

Opens an interactive menu — pick "Create new agent" and the CLI drafts the agent file for you.

-

Creates .claude/agents/<name>.md — a plain markdown file anyone can edit.

+
+
+
+
+ 🧑‍💼 + Agents + — the specialists + A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation. + ✅ fresh working memory per run +
+
+ 🎯 + Skills + — the know-how + What the specialist (or Claude) can actually do. Loaded on demand — only when needed. + ✅ progressive disclosure +
+
+ 📘 + Workflows + — the instruction manual + Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible. + ✅ reproducible recipes +
+
+ 📝 + CLAUDE.md + — your memory + Knowledge you provide to the model. Read every session. Keep it under 200 lines. + ⚠️ 200-line limit +
+
+ 💭 + Context + — the working memory + What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%. + ⚠️ dumb-zone problem
-

Demo

+
+

Demo

+
+
+
+ 🧑‍💼 + Agents + — the specialists + A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation. + ✅ fresh working memory per run +
+
+ 🎯 + Skills + — the know-how + What the specialist (or Claude) can actually do. Loaded on demand — only when needed. + ✅ progressive disclosure +
+
+ 📘 + Workflows + — the instruction manual + Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible. + ✅ reproducible recipes +
+
+ 📝 + CLAUDE.md + — your memory + Knowledge you provide to the model. Read every session. Keep it under 200 lines. + ⚠️ 200-line limit +
+
+ 💭 + Context + — the working memory + What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%. + ⚠️ dumb-zone problem +
+
-

Agent config fields with frontmatter

-

The config block at the top of an agent file controls its identity and capabilities. Most fields are harness-enforced — the CLI gates them before the model sees the call. Only description lives in prompt-land.

-
-
- Field - Description - Enforced by +
+

Agent config fields with frontmatter

+

The config block at the top of an agent file controls its identity and capabilities. Most fields are harness-enforced — the CLI gates them before the model sees the call. Only description lives in prompt-land.

+
+
+ Field + Description + Enforced by +
+
+ name Recommended + Unique identifier — e.g. weather-agent + harness +
+
+ description Required + When to invoke. Use "PROACTIVELY" for auto-invocation + prompt +
+
+ model + haiku, sonnet, opus, or inherit (default). weather-agent uses sonnet + harness +
+
+ tools + Allowlist of tools. weather-agent allows WebFetch, Read, Write, etc. + harness +
+
+ skills + Skills preloaded into agent context at startup — weather-agent preloads weather-fetcher + harness +
+
+ maxTurns + Maximum agentic turns before the agent stops. weather-agent uses 5 + harness +
+
+ memory + Persistent memory: user, project, or local. weather-agent uses project + harness +
+
+ color + Visual color in task list. weather-agent uses green + harness +
-
- name Recommended - Unique identifier — e.g. weather-agent - harness -
-
- description Required - When to invoke. Use "PROACTIVELY" for auto-invocation - prompt -
-
- model - haiku, sonnet, opus, or inherit (default). weather-agent uses sonnet - harness -
-
- tools - Allowlist of tools. weather-agent allows WebFetch, Read, Write, etc. - harness -
-
- skills - Skills preloaded into agent context at startup — weather-agent preloads weather-fetcher - harness -
-
- maxTurns - Maximum agentic turns before the agent stops. weather-agent uses 5 - harness -
-
- memory - Persistent memory: user, project, or local. weather-agent uses project - harness -
-
- color - Visual color in task list. weather-agent uses green - harness +
+

The Key Field for This Workshop

+

The skills: field is what makes the weather-agent special. It preloads weather-fetcher directly into the agent's brain at startup — before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.

-
-

The Key Field for This Workshop

-

The skills: field is what makes the weather-agent special. It preloads weather-fetcher directly into the agent's brain at startup — before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.

+
+
+ 🧑‍💼 + Agents + — the specialists + A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation. + ✅ fresh working memory per run +
+
+ 🎯 + Skills + — the know-how + What the specialist (or Claude) can actually do. Loaded on demand — only when needed. + ✅ progressive disclosure +
+
+ 📘 + Workflows + — the instruction manual + Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible. + ✅ reproducible recipes +
+
+ 📝 + CLAUDE.md + — your memory + Knowledge you provide to the model. Read every session. Keep it under 200 lines. + ⚠️ 200-line limit +
+
+ 💭 + Context + — the working memory + What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%. + ⚠️ dumb-zone problem +
@@ -1110,19 +1276,58 @@ todoapp/
-

📝 CLAUDE.md

-
- CLAUDE.md -
-

Your project's persistent memory — what Claude reads every session.

-
- ✅ Loaded into every session - 📚 Project knowledge, persisted - 👥 Team-shareable via git -
- 
root/
+        

+            
📝 CLAUDE.md

+            

+                CLAUDE.md
+            

+            
Your project's persistent memory — what Claude reads every session.

+            

+                ✅ Loaded into every session
+                📚 Project knowledge, persisted
+                👥 Team-shareable via git
+            

+            
root/
 ├── CLAUDE.md
 └── README.md

+        

+        

+            

+                🧑‍💼
+                Agents
+                — the specialists
+                A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation.
+                ✅ fresh working memory per run
+            

+            

+                🎯
+                Skills
+                — the know-how
+                What the specialist (or Claude) can actually do. Loaded on demand — only when needed.
+                ✅ progressive disclosure
+            

+            

+                📘
+                Workflows
+                — the instruction manual
+                Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible.
+                ✅ reproducible recipes
+            

+            

+                📝
+                CLAUDE.md
+                — your memory
+                Knowledge you provide to the model. Read every session. Keep it under 200 lines.
+                ⚠️ 200-line limit
+            

+            

+                💭
+                Context
+                — the working memory
+                What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%.
+                ⚠️ dumb-zone problem
+            

+
@@ -1131,22 +1336,60 @@ todoapp/
-

🎓 Skills

-
- .claude/skills/ -
-

Reusable instructions — progressive disclosure, loaded only when relevant.

-
- ✅ Loaded on demand - 🎯 Scoped to a task - ♻️ Reusable across agents -
- 
root/
+        

+            
🎓 Skills

+            

+                .claude/skills/
+            

+            
Examples: weather fetching, sorting CSV rows, generating SVG cards.

+            

+                ✅ Progressive disclosure — loaded on demand
+                ♻️ Reusable across agents
+            

+            
root/
 ├── .claude/
 │   └── skills/
 │       └── weather-fetcher/
 │           └── SKILL.md
 └── README.md

+        

+        

+            

+                🧑‍💼
+                Agents
+                — the specialists
+                A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation.
+                ✅ fresh working memory per run
+            

+            

+                🎯
+                Skills
+                — the know-how
+                What the specialist (or Claude) can actually do. Loaded on demand — only when needed.
+                ✅ progressive disclosure
+            

+            

+                📘
+                Workflows
+                — the instruction manual
+                Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible.
+                ✅ reproducible recipes
+            

+            

+                📝
+                CLAUDE.md
+                — your memory
+                Knowledge you provide to the model. Read every session. Keep it under 200 lines.
+                ⚠️ 200-line limit
+            

+            

+                💭
+                Context
+                — the working memory
+                What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%.
+                ⚠️ dumb-zone problem
+            

+
@@ -1155,15 +1398,54 @@ todoapp/
-

🧠 Context

-
- /context +
+

🧠 Context

+
+ /context +
+

The model's working memory — what it can see in this moment.

+
+ 🪟 Limited budget + 📂 Fill it intentionally + 🧹 Compact at ~50% +
-

The model's working memory — what it can see in this moment.

-
- 🪟 Limited budget - 📂 Fill it intentionally - 🧹 Compact at ~50% +
+
+ 🧑‍💼 + Agents + — the specialists + A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation. + ✅ fresh working memory per run +
+
+ 🎯 + Skills + — the know-how + What the specialist (or Claude) can actually do. Loaded on demand — only when needed. + ✅ progressive disclosure +
+
+ 📘 + Workflows + — the instruction manual + Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible. + ✅ reproducible recipes +
+
+ 📝 + CLAUDE.md + — your memory + Knowledge you provide to the model. Read every session. Keep it under 200 lines. + ⚠️ 200-line limit +
+
+ 💭 + Context + — the working memory + What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%. + ⚠️ dumb-zone problem +