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

bottom cards added

Browse Source
This commit is contained in:
Shayan Rais
2026-04-24 17:49:19 +05:00
parent 5e039867a8
commit dc73306e61
2 changed files with 390 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/agents/presentation-learning-journey.md
+1
View File
@@ -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 <color>` and no `.inactive` class; the other four have `border-left: 3px solid <color>` 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.
presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
+389 -107
View File
@@ -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; }
</style>
</head>
<body>
@@ -797,7 +807,7 @@
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F3AF;</div>
<h4 style="color: #2e7d32; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Skills</strong> &mdash; the know-how</h4>
<p style="font-size: 0.9rem; color: #555; margin: 0 0 4px;">What the specialist (or Claude) can actually do.</p>
<p style="font-size: 0.7rem; color: #2e7d32; margin: 0; font-weight: 600;">&#x2705; progressive disclosure</p>
<p style="font-size: 0.7rem; color: #2e7d32; margin: 0; font-weight: 600;">&#x2705; progressive disclosure &mdash; loaded on demand</p>
</div>
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #ef6c00; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F4D8;</div>
@@ -811,13 +821,6 @@
<p style="font-size: 0.9rem; color: #555; margin: 0 0 4px;">Knowledge <strong>you</strong> provide to the model.</p>
<p style="font-size: 0.7rem; color: #c62828; margin: 0; font-weight: 600;">&#x26A0;&#xFE0F; 200-line problem</p>
</div>
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #ff9800; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F4DD;</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 0 4px;">Knowledge <strong>Anthropic</strong> bakes in.</p>
<p style="font-size: 0.75rem; color: #999; margin: 0 0 3px; font-style: italic;">e.g. identity &middot; tone &middot; safety</p>
<p style="font-size: 0.7rem; color: #2e7d32; margin: 0; font-weight: 600;">&#x2705; always on</p>
</div>
<div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #3f51b5; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 6px;">&#x1F4AD;</div>
<h4 style="color: #283593; text-transform: none; letter-spacing: 0; margin-bottom: 4px;"><strong>Context</strong> &mdash; the working memory</h4>
@@ -860,6 +863,13 @@
<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 class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #ff9800; text-align: center;">
<div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F4DD;</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 0 4px;">Knowledge <strong>Anthropic</strong> bakes in.</p>
<p style="font-size: 0.75rem; color: #999; margin: 0 0 3px; font-style: italic;">e.g. identity &middot; tone &middot; safety</p>
<p style="font-size: 0.7rem; color: #2e7d32; margin: 0; font-weight: 600;">&#x2705; always on</p>
</div>
</div>
</div>
@@ -1010,97 +1020,253 @@ todoapp/
<!-- Slide 8: Agents Section Divider -->
<div class="slide section-slide" data-slide="23" data-level="agents">
<h1>👤 Agents</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">/agents</span>
</div>
<p class="section-desc">Examples: <strong>weather reporter</strong>, front-end engineer, QA engineer.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Fresh working memory per run</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F3AF; Scoped tools, model, permission</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x26A1; Parallelizable</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
<div class="slide-viewport-content">
<h1>👤 Agents</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">/agents</span>
</div>
<p class="section-desc">Examples: <strong>weather reporter</strong>, front-end engineer, QA engineer.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Fresh working memory per run</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F3AF; Scoped tools, model, permission</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x26A1; Parallelizable</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
├── .claude/
│ └── agents/
│ └── weather-agent.md
└── README.md</pre>
</div>
<div class="pillar-footer">
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
<!-- Slide 9: The Restaurant Kitchen -->
<div class="slide" data-slide="24">
<h1>Create your first agent &mdash; <code>/agents</code></h1>
<div style="max-width: 600px; margin: 32px auto 0 auto;">
<div class="col-card" style="border-left: 4px solid #D97757;">
<div class="how-to-trigger" style="margin: 16px 0 12px 0;">
<h4>The Command</h4>
<p>Type <code>/agents</code>.</p>
<div class="slide-viewport-content" style="justify-content: flex-start; padding-top: 60px;">
<h1>Create your first agent &mdash; <code>/agents</code></h1>
<div style="max-width: 600px; margin: 32px auto 0 auto;">
<div class="col-card" style="border-left: 4px solid #D97757;">
<div class="how-to-trigger" style="margin: 16px 0 12px 0;">
<h4>The Command</h4>
<p>Type <code>/agents</code>.</p>
</div>
<p style="font-size: 1rem; color: #444;">Opens an interactive menu &mdash; pick "Create new agent" and the CLI drafts the agent file for you.</p>
<p style="margin-top: 12px; font-size: 0.9rem; color: #666;">Creates <code>.claude/agents/&lt;name&gt;.md</code> &mdash; a plain markdown file anyone can edit.</p>
</div>
<p style="font-size: 1rem; color: #444;">Opens an interactive menu &mdash; pick "Create new agent" and the CLI drafts the agent file for you.</p>
<p style="margin-top: 12px; font-size: 0.9rem; color: #666;">Creates <code>.claude/agents/&lt;name&gt;.md</code> &mdash; a plain markdown file anyone can edit.</p>
</div>
</div>
<div class="pillar-footer">
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
<!-- Slide 10: Prompting vs Agent table -->
<div class="slide" data-slide="25">
<h1>Demo</h1>
<div class="slide-viewport-content" style="justify-content: flex-start; padding-top: 60px;">
<h1>Demo</h1>
</div>
<div class="pillar-footer">
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
<!-- Slide 13: Agent Config Fields -->
<div class="slide" data-slide="26">
<h1>Agent config fields with frontmatter</h1>
<p>The config block at the top of an agent file controls its identity and capabilities. Most fields are <strong>harness-enforced</strong> &mdash; the CLI gates them before the model sees the call. Only <code>description</code> lives in prompt-land.</p>
<div style="margin: 24px 0;">
<div class="field-row" style="padding-bottom: 6px; border-bottom: 2px solid #ddd;">
<span class="field-name" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Field</span>
<span class="field-desc" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Description</span>
<span class="field-enforced" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; min-width: 110px; text-align: right;">Enforced by</span>
<div class="slide-viewport-content" style="justify-content: flex-start; padding-top: 60px;">
<h1>Agent config fields with frontmatter</h1>
<p>The config block at the top of an agent file controls its identity and capabilities. Most fields are <strong>harness-enforced</strong> &mdash; the CLI gates them before the model sees the call. Only <code>description</code> lives in prompt-land.</p>
<div style="margin: 24px 0;">
<div class="field-row" style="padding-bottom: 6px; border-bottom: 2px solid #ddd;">
<span class="field-name" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Field</span>
<span class="field-desc" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Description</span>
<span class="field-enforced" style="color: #999; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; min-width: 110px; text-align: right;">Enforced by</span>
</div>
<div class="field-row">
<span class="field-name">name <span class="field-recommended">Recommended</span></span>
<span class="field-desc">Unique identifier &mdash; e.g. <code>weather-agent</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">description <span class="field-required">Required</span></span>
<span class="field-desc">When to invoke. Use <code>"PROACTIVELY"</code> for auto-invocation</span>
<span class="field-enforced"><span class="pill-prompt">prompt</span></span>
</div>
<div class="field-row">
<span class="field-name">model</span>
<span class="field-desc"><code>haiku</code>, <code>sonnet</code>, <code>opus</code>, or <code>inherit</code> (default). weather-agent uses <code>sonnet</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">tools</span>
<span class="field-desc">Allowlist of tools. weather-agent allows <code>WebFetch</code>, <code>Read</code>, <code>Write</code>, etc.</span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">skills</span>
<span class="field-desc">Skills preloaded into agent context at startup &mdash; <strong>weather-agent preloads <code>weather-fetcher</code></strong></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">maxTurns</span>
<span class="field-desc">Maximum agentic turns before the agent stops. weather-agent uses <code>5</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">memory</span>
<span class="field-desc">Persistent memory: <code>user</code>, <code>project</code>, or <code>local</code>. weather-agent uses <code>project</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">color</span>
<span class="field-desc">Visual color in task list. weather-agent uses <code>green</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
</div>
<div class="field-row">
<span class="field-name">name <span class="field-recommended">Recommended</span></span>
<span class="field-desc">Unique identifier &mdash; e.g. <code>weather-agent</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">description <span class="field-required">Required</span></span>
<span class="field-desc">When to invoke. Use <code>"PROACTIVELY"</code> for auto-invocation</span>
<span class="field-enforced"><span class="pill-prompt">prompt</span></span>
</div>
<div class="field-row">
<span class="field-name">model</span>
<span class="field-desc"><code>haiku</code>, <code>sonnet</code>, <code>opus</code>, or <code>inherit</code> (default). weather-agent uses <code>sonnet</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">tools</span>
<span class="field-desc">Allowlist of tools. weather-agent allows <code>WebFetch</code>, <code>Read</code>, <code>Write</code>, etc.</span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">skills</span>
<span class="field-desc">Skills preloaded into agent context at startup &mdash; <strong>weather-agent preloads <code>weather-fetcher</code></strong></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">maxTurns</span>
<span class="field-desc">Maximum agentic turns before the agent stops. weather-agent uses <code>5</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">memory</span>
<span class="field-desc">Persistent memory: <code>user</code>, <code>project</code>, or <code>local</code>. weather-agent uses <code>project</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
</div>
<div class="field-row">
<span class="field-name">color</span>
<span class="field-desc">Visual color in task list. weather-agent uses <code>green</code></span>
<span class="field-enforced"><span class="pill-harness">harness</span></span>
<div class="info-box">
<h4>The Key Field for This Workshop</h4>
<p>The <code>skills:</code> field is what makes the weather-agent special. It preloads <code>weather-fetcher</code> directly into the agent's brain at startup &mdash; before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.</p>
</div>
</div>
<div class="info-box">
<h4>The Key Field for This Workshop</h4>
<p>The <code>skills:</code> field is what makes the weather-agent special. It preloads <code>weather-fetcher</code> directly into the agent's brain at startup &mdash; before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.</p>
<div class="pillar-footer">
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
@@ -1110,19 +1276,58 @@ todoapp/
<!-- Slide: CLAUDE.md -->
<div class="slide section-slide" data-slide="27">
<h1>&#x1F4DD; CLAUDE.md</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">CLAUDE.md</span>
</div>
<p class="section-desc">Your project's persistent <strong>memory</strong> &mdash; what Claude reads every session.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Loaded into every session</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F4DA; Project knowledge, persisted</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F465; Team-shareable via git</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
<div class="slide-viewport-content">
<h1>&#x1F4DD; CLAUDE.md</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">CLAUDE.md</span>
</div>
<p class="section-desc">Your project's persistent <strong>memory</strong> &mdash; what Claude reads every session.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Loaded into every session</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F4DA; Project knowledge, persisted</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F465; Team-shareable via git</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
&#x251C;&#x2500;&#x2500; CLAUDE.md
&#x2514;&#x2500;&#x2500; README.md</pre>
</div>
<div class="pillar-footer">
<div class="pillar-mini-card inactive" style="border-left: 3px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card" style="border-left: 4px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
<!-- ============================================================ -->
@@ -1131,22 +1336,60 @@ todoapp/
<!-- Slide: Skills -->
<div class="slide section-slide" data-slide="28">
<h1>&#x1F393; Skills</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">.claude/skills/</span>
</div>
<p class="section-desc">Reusable <strong>instructions</strong> &mdash; progressive disclosure, loaded only when relevant.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Loaded on demand</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F3AF; Scoped to a task</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x267B;&#xFE0F; Reusable across agents</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
<div class="slide-viewport-content">
<h1>&#x1F393; Skills</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">.claude/skills/</span>
</div>
<p class="section-desc">Examples: <strong>weather fetching</strong>, sorting CSV rows, generating SVG cards.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x2705; Progressive disclosure &mdash; loaded on demand</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x267B;&#xFE0F; Reusable across agents</span>
</div>
<pre class="file-tree" style="max-width: 440px; margin: 32px auto 0 auto; font-size: 0.9rem; line-height: 1.8; padding: 16px 24px; text-align: left;">root/
&#x251C;&#x2500;&#x2500; .claude/
&#x2502; &#x2514;&#x2500;&#x2500; skills/
&#x2502; &#x2514;&#x2500;&#x2500; weather-fetcher/
&#x2502; &#x2514;&#x2500;&#x2500; SKILL.md
&#x2514;&#x2500;&#x2500; README.md</pre>
</div>
<div class="pillar-footer">
<div class="pillar-mini-card inactive" style="border-left: 3px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card" style="border-left: 4px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>
<!-- ============================================================ -->
@@ -1155,15 +1398,54 @@ todoapp/
<!-- Slide: Context -->
<div class="slide section-slide" data-slide="29">
<h1>&#x1F9E0; Context</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">/context</span>
<div class="slide-viewport-content">
<h1>&#x1F9E0; Context</h1>
<div style="text-align: center; margin: 12px auto 20px auto;">
<span style="background: #fff3cd; color: #7a5c00; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; font-family: 'SF Mono', Monaco, 'Courier New', monospace; box-shadow: 0 2px 8px rgba(122,92,0,0.18);">/context</span>
</div>
<p class="section-desc">The model's <strong>working memory</strong> &mdash; what it can see in this moment.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1FA9F; Limited budget</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F4C2; Fill it intentionally</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F9F9; Compact at ~50%</span>
</div>
</div>
<p class="section-desc">The model's <strong>working memory</strong> &mdash; what it can see in this moment.</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;">
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1FA9F; Limited budget</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F4C2; Fill it intentionally</span>
<span style="background: #2e7d32; color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(46,125,50,0.35);">&#x1F9F9; Compact at ~50%</span>
<div class="pillar-footer">
<div class="pillar-mini-card inactive" style="border-left: 3px solid #009688;">
<span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
<span class="pmc-title">Agents</span>
<span class="pmc-subtitle">&mdash; the specialists</span>
<span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
<span class="pmc-emoji">&#x1F3AF;</span>
<span class="pmc-title">Skills</span>
<span class="pmc-subtitle">&mdash; the know-how</span>
<span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #ef6c00;">
<span class="pmc-emoji">&#x1F4D8;</span>
<span class="pmc-title">Workflows</span>
<span class="pmc-subtitle">&mdash; the instruction manual</span>
<span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
<span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
</div>
<div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
<span class="pmc-emoji">&#x1F4DD;</span>
<span class="pmc-title">CLAUDE.md</span>
<span class="pmc-subtitle">&mdash; your memory</span>
<span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line limit</span>
</div>
<div class="pillar-mini-card" style="border-left: 4px solid #3f51b5;">
<span class="pmc-emoji">&#x1F4AD;</span>
<span class="pmc-title">Context</span>
<span class="pmc-subtitle">&mdash; the working memory</span>
<span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
<span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
</div>
</div>
</div>