Web video presentation
npx -y skills add tRollNhard/1st --skill web-video-presentationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build web-deliverable video presentations — slide-driven storyboards, synced narration, captions, and MP4/WebM export tuned for browser playback. Use when turning slides, a script, or a notion of a talk into a self-contained video that plays inline on the web. Triggered by "create a video presentation", "turn these slides into a video", "record narration over slides", "screencast presentation", "explainer video for the web", "voiceover slideshow".
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.2 KB, 709 tokens by cl100k_base, as published. Nobody here has run it
Web Video Presentation Skill
Turn slides + a script into a self-contained narrated video that plays inline in browsers.
When to use
- "Create a video presentation from these slides"
- "Record narration over a slideshow and export for the web"
- "Build an explainer video I can embed on a landing page"
- "Turn this script into a screencast"
Pipeline
- Storyboard — one row per slide: visuals, narration script, slide duration, transition.
- Capture audio — per-slide WAV files at 48 kHz; see
references/AUDIO.mdfor capture and cleanup. - Render slides — Remotion (React-based, programmatic), HTML→video via Puppeteer/Playwright, or pre-exported PNG/MP4 frames.
- Mix — composite slides + narration + optional music bed (ducked −10 dB under narration).
- Caption — generate WebVTT (Whisper, Descript, or hand-authored from the script).
- Export — MP4 (H.264/AAC) as primary + WebM (VP9/Opus) as smaller modern fallback. Always use
+faststarton MP4. - Embed —
<video controls poster>with both<source>tags and a<track kind="captions">.
Key references
references/AUDIO.md— capture, cleanup, mix, encode for narration. Includes ffmpeg recipes, loudness targets (−16 LUFS for web), and a failure-mode table.
Output formats
| Format | Codecs | When |
|---|---|---|
| MP4 | H.264 + AAC | Always — broadest compatibility (Safari + everyone else) |
| WebM | VP9 + Opus | Smaller files, modern browsers |
| WebVTT | UTF-8 cues | Captions track for accessibility |
| Poster | JPEG/PNG | Frame shown before play |
Accessibility (non-negotiable)
- WebVTT captions present and accurate (WCAG 1.2.2)
- No autoplay with sound (WCAG 1.4.2) — use
<video controls>without autoplay, orautoplay muted - Native
<video controls>for keyboard operability — if you build a custom player, verify tab order and Space/Enter behavior - Audio description for visual-only content (WCAG 1.2.5) — bake into narration or ship a separate descriptive track
Tools (optional)
- ffmpeg — encoding, loudness normalization, muxing
- Remotion — React-based programmatic video rendering (matches your
remotion-best-practicesskill) - Whisper — caption generation from finished audio
- MediaRecorder API / Web Speech API — in-browser capture and TTS
- Puppeteer / Playwright — HTML slides → frames
Quick checklist
- Storyboard with per-slide script and durations
- Audio captured per-slide at 48 kHz, normalized to −16 LUFS
- Slides rendered at the same FPS as final video (typically 30 fps)
- MP4 + WebM exported, MP4 has
+faststart - WebVTT captions linked via
<track> - Tested in Safari, Chrome, Firefox before shipping