added tips

.claude/agents/presentation-learning-journey.md

@@ -176,3 +176,4 @@ After completing changes, report to the user:
 - **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.
+- **2026-04-24 image-only tips slides inserted at 31 and 32 (57 → 59 slides)**: two new slides inserted after slide 29 (the last agents-section content slide) before slide 30 (the CLAUDE.md section intro). Both slides are plain content slides with `data-level="agents"` so the journey bar stays on the agents level without re-firing. Layout: bare `<h1>` (no wrapper) + flex-centered `<div style="min-height: calc(100vh - 200px);">` containing the `<img>`. The `-200px` calculation (h1 ~100px + pillar-footer ~100px gap) matches slide 26's pattern for full-bleed image slides. Pillar-footer is included with Agents as the active card (matching the active pattern on slides 26-29). Renumber method: Python sentinel script — each `data-slide="N"` for N=31-57 replaced via `##SENTINELN##` intermediates, then resolved to N+2. No `goToSlide` hardcoded calls exist in this deck; `totalSlides` is DOM-computed. Section-divider positions after insertion: **agents=23 (unchanged), skills=35, context=41, claude-md=46, commands=52, workflow=55**. Total slides: **59**. Images at `../assets/concepts/agents/agent-tips-1.png` and `agent-tips-2.png` — both verified present before insertion.