npm - octocode-cli - Versions diffs - 1.3.0 → 1.5.0 - Mend

octocode-cli 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/skills/octocode-slides/references/05-implementation.md ADDED Viewed

@@ -0,0 +1,213 @@
+# Phase 5 — Implementation
+**Role:** Implementation agent. Turn the outline, inline slide notes, and DESIGN.md into working HTML slides. Keep the build focused: finalize only the slide-ready content needed for each slide, then implement the HTML and review in small internal batches.
+**Input:** `.content/request.md` · `.content/outline.md` · `.content/DESIGN.md` · `css/base.css` + `css/theme.css`
+**Output:** `slides/slug.html` (one per outline row)
+**Path contract:** see `SKILL.md → Output structure`. All paths are inside `.octocode/slides/{{slideName}}/`. Slides reference `../css/*`, `../js/*`, `../assets/*`. `index.html` references `slides/*.html`. No `slides/slides/` nesting.
+---
+## Step 1 · Read references
+Read these files now (in parallel):
+- `references/html-templates.md` — slide-type HTML templates + Motion patterns + `index.html` controller (the canonical CSS lives in `scripts/base.css`)
+- `references/resources.md` — CDN URLs for any library listed in DESIGN.md
+- `references/slide-rules.md` §§1, 5 — Content rules and Logical Flow rules (required by Global Rule 9)
+---
+## Step 2 · Verify the outline is implementation-ready
+Before writing any HTML, read `.content/outline.md` fully. For each row in the outline table:
+- Confirm the title is a claim sentence (not a topic label) — if not, fix it now
+- Check the `Source` column: any `[NEEDS SOURCE]` must be resolved or the slide flagged with a visible placeholder in HTML
+- Check `Slide notes` for any widget, chart data, image path, or layout instruction specific to that slide
+- If a chart slide has no data in the outline, ask the user for the values before building that slide
+- If an image slide has no path and no placeholder instruction, use the `image-ph` pattern from `references/html-templates.md`
+Track completion internally. Do not ask the user for per-slide confirmation unless a specific data gap blocks progress.
+---
+## Step 3 · Implement slides
+For each row in `.content/outline.md`, build directly from the row's data and any matching `Slide notes` entry:
+1. Copy `scripts/slide.html` as the starting point — **always**
+2. Use the row's title as the on-slide heading and browser `<title>`
+3. Use the row's type, key content, source, and flow logic as the implementation contract
+4. Check `Slide notes` for that slug — use any widget/chart/image/layout instructions found there
+5. Replace all `<!-- LLM: ... -->` comments with actual content from `request.md`
+6. Use the correct layout from `references/html-templates.md` for the slide type
+7. Add CDN libraries only if this slide needs them — check `DESIGN.md → Libraries` then the slide's `Slide notes`
+8. Use Motion animation patterns from `references/html-templates.md` where the slide type calls for it
+9. Write to `slides/slug.html` — slug must match the `Slug` column in the outline table (NOT `slides/slides/`)
+10. Track completion internally
+**Implementation rules:**
+- CSS variables only (`var(--accent)`, `var(--t-title)`, etc.) — no hardcoded values
+- Speaker notes go in `<aside class="speaker-notes">`
+- Overflow → split into a new slide (update `.content/outline.md` and continue)
+- For code slides: use highlight.js with the theme from DESIGN.md
+- For markdown-content slides: use marked.js + `data-md` pattern
+- For diagram / flow / architecture slides: use Mermaid.js
+- For chart / KPI / progress widgets — the outline already names the library (Phase 3 Step 4). If it doesn't, decide from `references/resources.md → Data Visualization — Library Decision` and update `outline.md` before implementing. One chart lib per slide; never two.
+- `calc(-1 * clamp(...))` for any negated length instead of `-clamp(...)`
+- Motion: load as `<script type="module">` at bottom of `<body>`
+- **Step animations**: when the outline row or slide notes call for step-by-step reveal, add `data-step="N"` to each element and load `../js/animation.js` **before** `../js/navbridge.js`. Read `references/animation.md` for the full protocol. Never add `data-step` to title or header elements — those must be visible on slide entry.
+- **The outline is the contract.** If implementation reveals a better title, split, or order — update `.content/outline.md` first, then build to the updated version.
+- **Preserve the Question-Answer chain.** The `Flow logic` column in the outline is the contract. Each slide's heading should carry the meaning of that column. If implementation reveals the title drifts from the chain: (a) fix the title to match the chain; (b) if a better reframe serves the chain better, update `.content/outline.md → Flow logic` first, then build to the updated version. Never silently change a title without updating the outline — the chain breaks invisibly.
+**Image handling (check the slide's `Slide notes` in `outline.md`, then `request.md → Images`):**
+All image files go in `assets/` at the deck root. Slides reference them as `../assets/filename.png` (one level up from `slides/`).
+| Image status in brief | What to do in HTML |
+|-----------------------|--------------------|
+| `ready` — file path provided | `<img src="../assets/{{filename}}" alt="{{descriptive alt text}}">` |
+| `placeholder` / `[IMAGE PLACEHOLDER]` — user will provide later | Use the `PLACEHOLDER` component: `image-ph` (inline) or `image-ph-bleed` (full-bleed) from `references/html-templates.md` |
+| Full-bleed `slide--image` with ready image | `<img src="../assets/{{filename}}">` + `<div class="image-overlay">` + optional `.image-caption` |
+| Full-bleed `slide--image` with no image yet | `image-ph-bleed` div + `<div class="image-overlay">` + `.image-caption` |
+For any missing image, do not search, download, generate, or silently substitute an image. Render the `PLACEHOLDER` component and add a `data-expected` attribute with a plain-English description of the image: `data-expected="{{what the image shows}}"`. The user can replace it later with a real file.
+**Opt-in exception — image generation via Nano Banana 2 (Gemini 3.1 Flash Image):** when the user has *explicitly* asked to generate images for the deck **and** `data-expected` is concrete, follow `references/image-generation.md`. Three paths are available: **Path A** (default — Python SDK + `GEMINI_API_KEY`), **Path B** (`belt` from inference.sh), **Path C** (Gemini CLI + `mcp-nanobanana-go` MCP server — requires GCP ADC + `GOOGLE_CLOUD_PROJECT`; the `gemini` CLI itself has no built-in image command, only this MCP path works). Save outputs into `assets/` and reference them with the standard `../assets/{{filename}}` path. Without explicit opt-in, the placeholder rule above wins.
+For full-bleed slides with images: the `.image-overlay` gradient div is **mandatory** — it ensures text in `.image-caption` remains legible regardless of the image content.
+---
+## Step 3b · Template alignment check (run after every slide, not at the end)
+Every slide must be structurally identical in its scaffolding. Check each slide before moving to the next:
+| Check | Pass condition | Fix |
+|-------|---------------|-----|
+| Started from `scripts/slide.html` | `<link rel="stylesheet" href="../css/base.css">` exists | Re-copy template, do not patch inline |
+| Theme loaded | `<link rel="stylesheet" href="../css/theme.css">` exists | Add the link |
+| Navbridge loaded | `<script src="../js/navbridge.js"></script>` immediately before `</body>` | Add in correct position |
+| animation.js order (if slide uses steps) | `<script src="../js/animation.js">` appears **before** `<script src="../js/navbridge.js">` | Swap order — wrong order silently breaks step intercept |
+| Local CSS is justified | Only slide-specific layout helpers live in `<style>`; colors/fonts/sizes still use design tokens | Move reusable styles to `base.css` or `theme.css` |
+| CSS variables only | No `color: #hex` or `font-family: "..."` inline on any element | Replace all hardcoded values with `var(--token)` |
+| Meaningful class names | No bare context-free class (`col`, `item`, `row`) as the sole class on animated or scripted elements — a context qualifier must be present (e.g. `col two-col-left`) | Add qualifier per `html-templates.md → Naming convention` |
+| ID convention | Every JS-targeted element uses `id="{slide-slug}-{role}"` (e.g. `id="metrics-kpi-1"`) — not bare `id="kpi"` or `id="chart"` | Rename to follow convention |
+| Slide class set | `<div class="slide slide--{{type}}">` matches the slide type in the outline row | Correct the class |
+| No inline `style` width/height for layout | Dimensions use CSS classes or `var()` | Extract to class |
+| No scroll at 1280×720 | Content fits without `overflow-y: auto` being needed | Split slide or reduce content |
+**If any slide fails a check:** fix it immediately before writing the next slide. Do not accumulate debt.
+---
+## Step 4 · Implementation loop
+Run an internal mini-review at natural break points — section boundaries, after every 5–8 slides, or whenever density / type pattern changes. The point is to catch drift early, not to hit a fixed cadence.
+Pause for user feedback only when the user explicitly wants collaborative checkpoints, a missing asset blocks a slide, or a content decision can't be inferred from `outline.md` + `request.md`.
+When pausing for user feedback, use:
+```
+Slides {{N–M}} implemented ({{current}}/{{total}} total).
+Self-check before showing you:
+- Titles: all claim sentences (not topic labels)?
+- Flow: each slide answers the previous question, raises the next?
+- Overflow: all content fits 1280×720 without scrolling?
+- Variables: no hardcoded colors/fonts?
+Reply "continue" to build the next batch, or give feedback.
+```
+In fast/delegated mode, continue after the internal mini-review without waiting. If the user gives feedback, fix the flagged slides before continuing.
+If the user says "continue", run the self-check against the next batch as you build it.
+This loop runs until all slides in the outline are implemented.
+---
+## Step 5 · Build index.html and js/navbridge.js
+Once all slides are implemented:
+### 5a · Copy verbatim scripts
+Run these copies; never paraphrase from memory:
+```bash
+cp scripts/navbridge.js js/navbridge.js
+cp scripts/presenter.js js/presenter.js
+cp scripts/animation.js js/animation.js   # copy even if no slides use steps yet
+# css/base.css was already copied by Phase 4 Step 7; verify it exists
+```
+**`animation.js`** is an optional per-slide script. Copying it to `js/` at deck build time makes it available for any slide to opt in — slides that don't include the `<script>` tag are unaffected.
+If `css/base.css` is missing for any reason, copy it now: `cp scripts/base.css css/base.css`. Theme overrides remain in `css/theme.css`.
+### 5b · Build index.html
+1. Start from `scripts/base.html`
+2. Replace all `<!-- LLM: ... -->` comments with actual values
+3. Fill `const slides = [...]` using the `{ path, hidden, name }` object format:
+   - `path` — slide HTML file relative to `index.html` (e.g. `'slides/problem.html'`)
+   - `name` — unique slug for URL hash (e.g. `'problem'` → `#problem`). **Do NOT use numbers** — playback order is controlled by the array, not filenames.
+   - `hidden` — `true` to skip during playback and hide from overview grid
+4. Keep entries in the order you want them shown — this array is the single source of truth for slide order.
+Do not replace `scripts/base.html` with a single-iframe controller. The current controller preloads slide iframes for grid thumbnails, uses name-based hashes, forwards iframe keyboard events through navbridge, wires `P` to the presenter popup, `B`/`W` to blackout, and supports scroll-wheel navigation.
+5. Write to `index.html` (at deck root — same level as `css/`, `js/`, and `slides/`)
+```javascript
+// Example manifest — replace with actual slides:
+const slides = [
+  { path: 'slides/title.html',    hidden: false, name: 'title' },
+  { path: 'slides/problem.html',  hidden: false, name: 'problem' },
+  { path: 'slides/solution.html', hidden: false, name: 'solution' },
+  { path: 'slides/closing.html',  hidden: false, name: 'closing' },
+];
+```
+### 5c · Wire pointer chrome on `index.html` (opt-in only)
+If `DESIGN.md → Pointer & click feedback` section is present (enabled in Phase 4 Step 5b), copy the wiring snippet from `references/resources.md → Pointer & Click Feedback → Wiring on index.html` into `index.html` (just before `</body>`). The snippet is the canonical implementation — do not paraphrase.
+**Mandatory rules** (verified in Phase 6):
+- Loaded on `index.html` only — **never** inside a slide HTML (each slide is a separate iframe document).
+- `<click-spark>` wrapper: `pointer-events: none; z-index: 5` so HUD (z-index 50) and progress (z-index 10) stay clickable.
+- Keep the `pointer: coarse` and `prefers-reduced-motion` short-circuits in the snippet.
+Skip this step when `DESIGN.md → Libraries` says `Pointer chrome: off`.
+### 5d · Write README.md
+Write `README.md` (at deck root):
+```markdown
+# {{Deck Title}}
+Serve: `npx serve .octocode/slides/{{slideName}}`
+Then open: http://localhost:3000
+Keys: `→` next · `←` prev · `Space` next · `G` grid · `F` full · `P` presenter · `B`/`W` blank
+Edit a slide: `slides/*.html`
+Change theme: `css/theme.css` — all slides update automatically
+Reorder slides: edit the `slides` array in `index.html`
+```
+---
+## Step 6 · Hand-off to Phase 6
+Quick sanity gate — only the items unique to Phase 5 (the structural deck shape). The full technical, design, and content review lives in `references/06-review.md`.
+- [ ] Every outline row has a matching `slides/slug.html` (no `slides/slides/`)
+- [ ] `js/navbridge.js`, `js/presenter.js`, `css/base.css`, `css/theme.css` all exist at the deck root
+- [ ] No `[NEEDS SOURCE]` / `needs asset` / `revisit` rows remain unless they ship as labeled placeholders
+- [ ] No slide HTML contains hardcoded colors, fonts, or pixel sizes (CSS variables only)
+Pass to Phase 6 → read `references/06-review.md`. Start with Step 0 (Self-review).

package/skills/octocode-slides/references/06-review.md ADDED Viewed

@@ -0,0 +1,258 @@
+# Phase 6 — Review
+**Role:** Review agent. Verify the deck is structurally correct, visually consistent, content-accurate, and passes both Slop Tests. Then ask the user to confirm.
+**Input:** The full `.octocode/slides/{{slideName}}/` folder
+---
+## Step 0 · Self-review — run before showing anything to the user
+Walk every slide through the three checklists below. Treat them as a thinking tool, not a passing grade — most items are the strong defaults from `SKILL.md → Operating principles → Strong defaults`. Fix every clear failure; when an item is intentionally violated for a brief-driven reason, record the reason inline (in `outline.md → Slide notes` or as an HTML comment) instead of forcing a rewrite.
+The "Anti-patterns" table is different — those are auto-fail and should be removed without negotiation.
+---
+### Content
+| Check | Pass condition |
+|-------|---------------|
+| Title is a claim | Contains a verb + specific assertion — not a topic label ("Performance" fails; "API latency dropped 40% after caching" passes) |
+| One idea per slide | Can state the slide's point in a single sentence |
+| Text volume | ≤ 6 lines of text on any slide; ≤ 4 bullets; each bullet ≤ 12 words |
+| No filler phrases | No "In this slide…", "As you can see…", "Key takeaways:", or similar deck narration |
+| No placeholder tokens | No `{{…}}` text remaining in any slide HTML |
+---
+### UX
+| Check | Pass condition |
+|-------|---------------|
+| 3-second test | Main point is clear without reading every word |
+| Visual hierarchy | Largest / boldest element is the most important one; nothing competes equally |
+| Layout variety | No 3 consecutive slides with identical layout type |
+| Whitespace | ≥ 40% of slide area is empty on every slide |
+| No scroll | Every slide fits 1280×720; nothing overflows |
+---
+### Anti-patterns (auto-fail any of these)
+| Pattern | Why it fails |
+|---------|-------------|
+| Decorative dashes as bullet markers (`—`, `-`, `–` as visual list leaders) | Use the CSS `.bullets` class with `→` from `base.css` instead |
+| Inline metadata on content slides (author, date, "Slide X of N" inside the content area) | Belongs in speaker notes or the navigation chrome only |
+| Emoji leading bullets or section headers | Breaks visual scale on projectors; use typographic markers |
+| `background-clip: text` gradient on headings | AI-gen cliché; remove entirely |
+| Accent color on more than 3 elements per slide | Destroys hierarchy |
+| All-caps body text | Reduces readability; title/section slides only |
+| Hardcoded colors, fonts, or pixel sizes in slide HTML | Must be `var(--token)` only |
+| More than 4 bullet points on any slide | Exceeds cognitive chunking limit (Miller's Law) |
+| Full paragraphs on any slide | This is a document, not a presentation — use speaker notes |
+| Topic-label title (no verb, no specific assertion) | Prefer claim-sentence titles — see slide-rules.md §1.2 |
+| Every slide is the same centered-stack layout | Layout monotony kills narrative rhythm |
+| Three-dot window chrome (`• • •`) on code blocks | Decorative noise; remove |
+| Data slide with no context slide before or after | Data without interpretation creates confusion |
+| `{{…}}` placeholder tokens remaining in any HTML | Replace before delivery unless intentionally shown as a labeled placeholder |
+| Inter or Roboto as the only heading font | Generic; no design intent; fails Slop Test item 1 |
+**Scoring:** Each failing check = one fix to consider. Resolve clear failures before Step 1; document intentional exceptions when the brief requires them.
+After fixing all anti-patterns, run both Slop Tests (tables are in `SKILL.md → Slop Test`). Record `Visual Slop: N/8` and `Content Slop: N/8`. Carry both scores into the Step 6 user summary. Visual target is 0/8 and always ≤1/8; Content target is 0/8.
+---
+## Step 1 · Rendered browser review
+Static review is not enough for HTML slides. Before showing the deck to the user, render it.
+1. Serve the deck root: `npx serve .octocode/slides/{{slideName}}`
+2. Open `index.html` in a browser or browser automation tool
+3. Visit every slide through normal navigation and by name hash (e.g. `#title`, `#problem`, `#closing`)
+4. Check browser console errors and failed network requests
+5. Verify no slide visually overflows or clips important content at 1280×720; when automation is available, compare each iframe document's `scrollWidth/scrollHeight` to its viewport even when CSS uses `overflow: hidden`
+6. Verify keyboard controls: next, previous, Home, End, fullscreen (`F`), overview (`G`), presenter popup (`P`), blackout (`B`/`W`), and scroll-wheel navigation
+7. Deep-link directly to at least three named hashes in a fresh tab; exactly one `.slide-frame[data-active]` should be active each time
+8. Capture screenshots when tooling is available, preferably under `.content/review/screenshots/`
+If browser tooling is unavailable, open the deck manually and document that limitation in the final response. If rendering is impossible, tell the user clearly before delivery.
+---
+## Step 2 · Technical review
+Check each item. Fix any failure before moving to Step 3.
+**Navigation controller (`index.html`)**
+- [ ] `const slides = [...]` uses `{ path, hidden, name }` objects — no plain strings, no numeric names
+- [ ] Every slide has a unique `name` slug
+- [ ] All `path` values start with `slides/` and the files exist
+- [ ] `playable = slides.filter(s => !s.hidden)` filters hidden slides
+- [ ] `postMessage` listener handles `octocode-slides:nav`, `octocode-slides:activity`, and `octocode-slides:presenter-goto`
+- [ ] `ResizeObserver` + `scale()` logic present and correct
+- [ ] Keyboard navigation: `→` `←` `Space` `Home` `End` `F` `G` `P` `B` `W`
+- [ ] Progress bar, counter, and HUD elements present
+- [ ] Hash updates use `slide.name` (not numeric index)
+- [ ] Direct hash loading activates exactly one iframe and one overview cell
+- [ ] `js/presenter.js` is copied, loaded by `index.html`, and `P` opens the presenter popup (slide previews + speaker notes + timer + jump control) without console errors
+- [ ] `index.html` is based on `scripts/base.html` multi-iframe controller, not a stale single-iframe controller
+**Pointer + selection contract (CRITICAL — easy to break, breaks silently)**
+All `.slide-cell` wrappers stack at `inset:0`. If any inactive cell still accepts pointer events, the topmost stacked cell will swallow every mouse-down and the user cannot select text, click links, or interact with the active iframe. Verify in `index.html` style block:
+- [ ] `.slide-cell` declares `pointer-events: none` (default state for inactive cells)
+- [ ] `.slide-cell.is-active` declares `pointer-events: auto`
+- [ ] `.slide-frame` declares `pointer-events: none`
+- [ ] `.slide-frame[data-active]` declares `pointer-events: auto`
+- [ ] `go()` toggles BOTH `is-active` (on the cell) AND `data-active` (on the iframe) in the same step — never one without the other
+- [ ] No slide HTML or shared CSS sets `user-select: none` on body, `.slide`, or any text-bearing container
+- [ ] Browser sanity check: `document.elementFromPoint(640, 360)` (centre of stage) returns the active `<iframe class="slide-frame">`, not a stacked `.slide-cell`. If it returns a cell or another iframe, selection is broken — fix before shipping.
+**CSS**
+- [ ] `css/base.css` declares all custom properties used across slides
+- [ ] `css/theme.css` overrides only variables defined in `base.css`
+- [ ] No slide HTML file uses hardcoded `color:`, `font-family:`, or `font-size:` values
+- [ ] Google Fonts `@import` is at the top of `theme.css`
+- [ ] `@media (prefers-reduced-motion: reduce)` present in `base.css`
+- [ ] `@media print` present in `base.css` (1280×720 page size for PDF export)
+- [ ] `--text` vs `--bg` contrast ratio is ≥ 4.5:1 WCAG AA (verify using the values in `DESIGN.md` — fail if ratio is not documented or is below 4.5:1)
+**Individual slides**
+- [ ] Every slide links to `../css/base.css` and `../css/theme.css`
+- [ ] Every slide includes `<script src="../js/navbridge.js"></script>` immediately before `</body>`
+- [ ] `js/navbridge.js` exists at the deck root
+- [ ] `js/presenter.js` exists at the deck root
+- [ ] Every CDN library listed in DESIGN.md is loaded in the correct slide files
+- [ ] Motion scripts use `type="module"` and load from `cdn.jsdelivr.net/npm/motion@latest/+esm`
+- [ ] Code slides initialize highlight.js — either `hljs.highlightAll()` or `querySelectorAll('pre code').forEach(el => hljs.highlightElement(el))`
+- [ ] Markdown slides call `marked.parse()` on `[data-md]` elements
+- [ ] `<aside class="speaker-notes">` present in every slide
+- [ ] Image references use `../assets/filename` (not hardcoded absolute paths)
+**Pointer chrome (only if `DESIGN.md → Pointer & click feedback` is present)**
+- [ ] `<click-spark>` and `cursor-effects` import live in `index.html` only — never inside any slide HTML
+- [ ] `<click-spark>` wrapper has `pointer-events: none` and `z-index` below HUD/progress (HUD = 50, progress = 10, spark ≤ 5)
+- [ ] HUD, progress bar, counter, and overview thumbnails remain clickable; spark fires on chrome clicks but does not block them
+- [ ] Custom cursor follows pointer with the lag described in DESIGN.md; OS cursor still appears on form fields, links, and during text selection
+- [ ] Touch device sanity: `pointer: coarse` short-circuit disables the custom cursor (verify in DevTools mobile emulation)
+- [ ] `prefers-reduced-motion: reduce` disables or flattens the spark animation
+---
+## Step 3 · Design review
+**Visual Slop Test** — run the 8-item checklist from `SKILL.md → Slop Test → Visual Slop`. Score ≥ 2 → fix before continuing.
+**Visual consistency check**
+- [ ] Accent color is used for the same purpose in every slide (e.g., heading only)
+- [ ] Font sizes feel consistent slide-to-slide (same heading size hierarchy)
+- [ ] Spacing is consistent — padding feels the same on all slides
+- [ ] Animations are consistent in timing and feel (not different per slide)
+- [ ] Color temperature is consistent (all warm or all cool — no sudden shifts)
+**Layout variety check (anti-monotony)**
+- [ ] Not every slide is centered-stack
+- [ ] At least 2 different layout types used across the deck
+- [ ] No 3 consecutive slides with the same layout
+---
+## Step 4 · Content & flow review
+Read `.content/outline.md` rows and compare to the implemented `slides/slug.html` files. Read the full title sequence aloud.
+**Outline-to-slide completeness**
+- [ ] Every implemented slide has a matching row in `.content/outline.md`
+- [ ] No outline row still says `[NEEDS SOURCE]`, `needs asset`, or `revisit` unless the slide intentionally ships a labeled placeholder
+- [ ] `Widgets`, `Graphs`, and `Images` notes in the outline match the implemented HTML and loaded libraries
+**Content accuracy**
+- [ ] Headline text matches what was planned
+- [ ] Bullet points match the outline content (no missing or added points)
+- [ ] Code slides show the correct language class and snippet
+- [ ] Chart/data values match the outline row and cited source
+- [ ] Image path, placeholder, alt text, and overlay match the outline notes
+- [ ] UX/UI layout, reading order, dominant visual, and animation match the outline notes
+- [ ] Speaker notes are present and contain useful context
+- [ ] No slide body overflows (verify each layout fits within the 1280×720 stage; split or simplify any slide that would scroll)
+- [ ] No placeholder text (`{{…}}` tokens left un-replaced)
+**Content Slop Test** — run the 8-item checklist from `SKILL.md → Slop Test → Content Slop`. Score ≥ 1 → fix before continuing.
+**Logical flow (slide-rules.md §5)**
+- [ ] Ghost outline test: reading only the slide titles tells the complete story (argument → evidence → conclusion)
+- [ ] Question-Answer chain: each slide answers the implicit question raised by the previous slide
+- [ ] Every `chart`, `stats`, or `code` slide has a context slide before or after it
+- [ ] Major topic transitions use a `section` slide — no abrupt jumps between unrelated claims
+- [ ] Appendix slides (if any) appear after `closing` and are labeled `[APPENDIX]`
+- [ ] No concept is referenced before it is introduced
+---
+## Step 5 · Fix loop
+For each failure found in Steps 1–4:
+1. Fix the specific file
+2. Re-check only the affected items
+3. Confirm: `✓ Fixed: {{description}}`
+Re-run the relevant Slop Test after any content, CSS, or theme changes.
+---
+## Step 6 · Present to user
+Once all checks pass:
+Use the `SKILL.md → Presenting options to the user` format — share the review findings first, then the options:
+```
+Review complete ✓
+Deck: .octocode/slides/{{slideName}}/index.html
+Serve: npx serve .octocode/slides/{{slideName}}
+Slides: {{N}} · Theme: {{name}} · Visual Slop: {{0 or 1}}/8 · Content Slop: 0/8
+What I fixed: {{list any Slop Test failures that were corrected, or "none needed"}}
+What's still outstanding: {{list any [NEEDS SOURCE] or image placeholders — or "none"}}
+A — Fix a specific slide
+B — Change slide content or design
+C — Add or remove a slide
+D — Change the theme
+E — Done ✓
+Reply with a letter — or "E" if the deck is ready.
+```
+If the user says "done" (option 5): confirm the deck location and output the final file tree.
+If the user requests changes: make them, re-run the relevant checks from Steps 1–4, then present again.
+---
+## Step 7 · Final output (on "done")
+```
+Deck complete ✓
+.octocode/slides/{{slideName}}/
+├── index.html
+├── README.md
+├── css/        (base.css + theme.css)
+├── js/         (navbridge.js + presenter.js)
+├── assets/     (images)
+├── slides/     (N slide HTML files)
+└── .content/
+    └── request.md · outline.md · DESIGN.md
+Serve: npx serve .octocode/slides/{{slideName}}
+Open:  http://localhost:3000
+```