updated cards
This commit is contained in:
Shayan Rais
@@ -175,3 +175,4 @@ After completing changes, report to the user:
|
||||
- **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.
|
||||
- **2026-04-24 content-slide heading centering fix (slides 24/25/26)**: the `.slide-viewport-content` wrapper (`min-height: 100vh; display: flex; align-items: center`) was centering headings vertically even with `justify-content: flex-start` inline override — `align-items: center` acts on the cross-axis (horizontal in a column flex), but the real problem is that the full-viewport-height flex container pushes content away from the top edge. Fix: removed `.slide-viewport-content` entirely from slides 24 and 26 (plain content slides with substantial content), letting them flow exactly like slide 22 — h1 at top, content below, no wrapper at all. Slide 25 (Demo — nearly empty body) uses a plain `<div style="min-height: calc(100vh - 120px);">` spacer wrapping only the h1, so the footer is pushed below the fold without any flex centering. Section-divider slides 23/27/28/29 keep their `.slide-viewport-content` wrapper unchanged — they are supposed to be viewport-centered. **Rule**: for content slides with a pillar-footer, do NOT wrap in `.slide-viewport-content`. Use a bare spacer div only on near-empty content slides (less than ~3 elements of body content) to push the footer below the fold.
|
||||
|
||||
@@ -1078,9 +1078,8 @@ todoapp/
|
||||
|
||||
<!-- Slide 9: The Restaurant Kitchen -->
|
||||
<div class="slide" data-slide="24">
|
||||
<div class="slide-viewport-content" style="justify-content: flex-start; padding-top: 60px;">
|
||||
<h1>Create your first agent — <code>/agents</code></h1>
|
||||
<div style="max-width: 600px; margin: 32px auto 0 auto;">
|
||||
<div style="max-width: 600px;">
|
||||
<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>
|
||||
@@ -1090,7 +1089,6 @@ todoapp/
|
||||
<p style="margin-top: 12px; font-size: 0.9rem; color: #666;">Creates <code>.claude/agents/<name>.md</code> — a plain markdown file anyone can edit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pillar-footer">
|
||||
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
|
||||
<span class="pmc-emoji">🧑‍💼</span>
|
||||
@@ -1132,7 +1130,7 @@ todoapp/
|
||||
|
||||
<!-- Slide 10: Prompting vs Agent table -->
|
||||
<div class="slide" data-slide="25">
|
||||
<div class="slide-viewport-content" style="justify-content: flex-start; padding-top: 60px;">
|
||||
<div style="min-height: calc(100vh - 120px);">
|
||||
<h1>Demo</h1>
|
||||
</div>
|
||||
<div class="pillar-footer">
|
||||
@@ -1176,7 +1174,6 @@ todoapp/
|
||||
|
||||
<!-- Slide 13: Agent Config Fields -->
|
||||
<div class="slide" data-slide="26">
|
||||
<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> — the CLI gates them before the model sees the call. Only <code>description</code> lives in prompt-land.</p>
|
||||
<div style="margin: 24px 0;">
|
||||
@@ -1230,7 +1227,6 @@ todoapp/
|
||||
<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 — 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="pillar-footer">
|
||||
<div class="pillar-mini-card" style="border-left: 4px solid #009688;">
|
||||
<span class="pmc-emoji">🧑‍💼</span>
|
||||
|
||||
Reference in New Issue
Block a user