What problem does it solve? Turning a written article or voiceover script into a video usually means fighting three separate battles: building visuals that don't look like a slide deck, syncing narration timing with on-screen animation, and recording the result without dropped frames. This Skill provides a methodology and scaffold that produces a Vite + React + TypeScript presentation where each click advances one narration beat on a fixed 1920×1080 stage, then renders it frame-by-frame into an mp4 with deterministic, reproducible output. ## Core Features & Use Cases - Script-to-stage workflow: Produces script.md and outline.md from an article, aligns theme, assets, and development mode at hard checkpoints, then builds chapters where each step owns the full screen and matches one narration beat. - Theme-token architecture: Ships 23 themes with semantic design tokens, plus contracts like inverted ink surfaces and a bottom subtitle band, so chapters stay visually consistent without hardcoded colors or fonts. - Deterministic rendering and QA: Includes a frame-by-frame renderer, a shot checker validating animation duration against audio length, and a mid-frame motion probe that catches defects invisible in final-state screenshots. - Pluggable TTS: Synthesizes per-step mp3 narration through provider-agnostic scripts with built-in MiniMax and OpenAI providers, plus snippets for edge-tts, ElevenLabs, Azure, Google, and macOS say. - Use Case: A creator has a 15-chapter technical course script. The Skill generates the narration script and outline, scaffolds a themed React presentation, synthesizes Chinese voiceover per step, validates every step's animation fits its audio budget, and renders a finished mp4 without any screen recording. ## Quick Start Ask your agent to use the web-video-presentation skill to turn your article or narration script into a 16:9 web video presentation, then confirm the theme and outline at the checkpoint before chapter development begins.
