Narrated Slideshow Video
Build a self-playing narrated slideshow — slides that auto-advance in sync with spoken narration, delivered as a single playable HTML page (slides + per-slide audio + timed auto-advance). Outlines the narrative and per-slide script FIRST, designs a consistent slide look, then builds the synced player so visuals, voiceover, and timing land together. The outline-then-design-then-build ordering keeps narration and slides telling ONE story instead of two unsynced tracks, which is the hard part of a narrated deck.
Steps
Entry step: outline. Each step names the specialist role it wants; the full working prompt is expandable.
- Outline & scriptplannerentry
narrative arc + per-slide bullets + narration script
Show working prompt
Plan the story BEFORE any design or code. Step 1: read the source content and define the narrative arc (title -> setup -> 3-5 points -> takeaway). Step 2: for each slide write (a) the 2-4 on-screen bullets and (b) the narration script for that slide — spoken sentences, ~12-20 seconds each, written for the ear not the eye. Step 3: estimate each slide's duration from its narration so the build can auto-advance. Step 4: pick ONE narration voice. Write an acceptance-criteria checklist (opens with a title slide, one idea per slide, every slide has both bullets and a narration line, slides auto-advance roughly in sync with the audio, ends on a takeaway, plays start-to-finish with no console error) and the full per-slide script to `notes/outline.md` via write_task_note AND to the produces path.
- Slide designdesigner
one consistent slide template + transition + caption style
Show working prompt
Design one reusable slide look, no content yet. Step 1: define the slide template — title position, bullet layout, palette (hex), type scale, and a subtle slide-to-slide transition. Step 2: define a caption/subtitle style so the current narration line can show on-screen (accessibility + watchable muted). Step 3: define the progress affordance (slide N of M, a progress bar) and the play/pause control. Step 4: keep it self-contained (CSS only, no external assets). Write the template spec to `notes/design.md` via write_task_note AND to the produces path so the build applies it uniformly across every slide.
- Build the playerdeveloper
single index.html: slides + per-slide audio + auto-advance
Show working prompt
Build the narrated slideshow as a single `index.html` (inline CSS + JS). Step 1: synthesize per-slide narration audio with the locked voice (embed as base64 data-URIs or write `audio/slide-N.*` and reference them) so the page is self-contained/playable. Step 2: render every slide from the outline using the locked template uniformly. Step 3: implement the player — play the current slide's narration, show its caption, and AUTO-ADVANCE to the next slide when its audio ends (use the audio `ended` event, not a fixed guess), with working play/pause and a progress indicator. Step 4: ensure it starts on the title slide and finishes cleanly on the takeaway. Step 5: confirm no console errors. write_task_note the path and slide count. On a loop-back, fix only the flagged gaps (out-of-sync timing, missing audio, broken advance).
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Play it like a viewer. Step 1: load `index.html`; it must start on a title slide with no console error (PASS/FAIL). Step 2: confirm each slide has on-screen bullets AND plays narration, with the caption matching the audio. Step 3: confirm slides AUTO-ADVANCE when narration ends (driven by audio end, in rough sync) rather than jumping early/late. Step 4: confirm play/pause and the progress indicator work. Step 5: confirm it ends on the takeaway and the story tracks the outline. Write PASS/FAIL per criterion. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- narrated slideshow
- slides with voiceover
- auto-playing presentation video
- explainer slideshow
- make a video from slides
Source
View this craftbook on GitHub · MIT license