Verified Agent Skill record

Web Video Presentation

This Skill converts an article or spoken script into a click-driven 16:9 web presentation that functions like a video, with optional voiceover audio synthesis. It produces a Vite + React + TypeScript project where each click advances one beat of the narration, each step occupies a full screen, and a progress bar appears only on hover. The workflow covers content writing (script + outline), one-time alignment with the user on five items, web development in selectable modes (sequential, chapter-by-chapter, or parallel via subagents), and optional audio synthesis with a provider-agnostic TTS pipeline. Built-in providers include MiniMax (mmx-cli) and OpenAI TTS, with ready-made code fragments for ElevenLabs, edge-tts, macOS say, Azure, and Google. The methodology and collaboration process are theme-agnostic — no specific colors, fonts, or styles are bound — so it applies to any topic or aesthetic.

Tasks

From an article, produce script.md (spoken-style narration) and outline.md (development plan with chapter splits, steps, and information pools) in a single pass, then stop for alignment on script, outline, theme, assets, and development mode
Scaffold a Vite + React + TypeScript project using scripts/scaffold.sh with a selected theme, build Chapter 1 on the main thread as a complete anchor version, pause for user acceptance, then continue Chapters 2-N in the selected mode (sequential or parallel via subagents), bumping STORAGE_KEY if chapters or narration lengths change
Optionally run npm run extract-narrations to generate audio-segments.json, verify the text, then run npm run synthesize-audio (default MiniMax mmx-cli, or PRESENTATION_TTS=openai for OpenAI TTS, or a custom provider) to synthesize one mp3 per step
Record the final video either in auto mode by opening localhost:5173/?auto=1 and pressing SPACE for a single continuous take with audio already synced, or in manual mode by clicking through steps for post-editing and voiceover

Inputs

Original article (article.md, retained throughout as detail source for visuals)
Spoken script or video script (saved as script.md, outline.md generated in simplified form)
Theme selection from themes/*/theme.json during Checkpoint Plan
Real media assets provided by the user, selected from existing paths, or all placeholders
OPENAI_API_KEY (when using the built-in OpenAI TTS provider)

Outputs

script.md — spoken-style narration script that determines pacing
outline.md — development plan with chapter splits, step counts, time estimates, per-screen content, and information pools
presentation/ — Vite + React + TS project scaffolded by scripts/scaffold.sh, containing src/chapters/ with per-chapter .tsx, .css, and narrations.ts files
audio-segments.json — extracted narration text from all chapters
public/audio/<id>/<N>.mp3 — synthesized audio segments (one per step, when audio synthesis is enabled)

Limitations and checks

No responsive layout — content is fixed at 1920x1080 with transform scale
Outline.md deliberately excludes specific animation types, CSS implementation details, and micro-timing values to preserve design freedom for per-chapter agents
Chapter-to-chapter style is not forced to be perfectly consistent; some variation is expected as a design choice when using parallel subagents
If the user provides no article or script and only a topic, the Skill does not invent content and asks the user to provide source material or an outline first
Verify that the maximum step N found in each chapter's .tsx conditionals plus 1 equals the narrations.length in that chapter's narrations.ts, ensuring script, outline, chapter code, chapters.ts, and audio files never drift
After structural changes to chapters.ts (adding, removing, or reordering chapters, or changing any narrations.ts length), confirm that STORAGE_KEY in presentation/src/hooks/useStepper.ts has been bumped (e.g., v4 to v5)
Before audio synthesis, review audio-segments.json to confirm narration text is correct, and after synthesis check for segments with abnormal duration (too long means split the step, too short means text is too thin)
When scaffolding, confirm that the 01-example demo chapter has been removed (rm -rf presentation/src/chapters/01-example) and that EXAMPLE_CHAPTER import and array entry have been deleted from presentation/src/registry/chapters.ts