Web Video Presentation Studio
Turn an article or script into a clickable, screen-recordable 16:9 web video with cinematic pacing.
The skill requires several user-confirmation checkpoints and discloses local outputs, optional TTS, API-key environment variables, and external providers. It does not systematically specify data retention, privacy, dependency supply-chain controls, permission boundaries, or rollback; it also shows an rm -rf deletion example without recovery guidance, so points are deducted.
The workflow, narrations single-source rule, troubleshooting tables, and fallback paths are fairly concrete. However, the README and SKILL.md describe stages and checkpoints inconsistently, and no test suite or CI execution evidence for the key path is supplied; abnormal-input coverage is also limited, so the static score remains below 10.
Inputs, target scenarios, Vite/React/TypeScript outputs, and placeholder behavior are clearly described for articles, scripts, tutorials, demos, and recording. Non-fit boundaries, semantic triggers, and environment constraints are less explicit; Chinese TTS mainly depends on MiniMax while the other built-in provider depends on OpenAI, with no mainland-China reachability disclosure, so points are deducted.
The documentation has useful progressive workflow guidance, install commands, parameter conventions, examples, troubleshooting, MIT metadata, and a manifest version. It lacks a clear changelog, maintenance owner, or update path, and some README-listed references are not independently verifiable from the supplied material, so points are deducted.
The intended artifact, chapter pacing, audio layout, and recording workflow are concrete enough to guide implementation. This review did not generate a project or verify representative output, animation/audio synchronization, or recording quality, so the score is conservatively limited by static calibration.
The manifest, structured specifications, troubleshooting examples, and historical chapter examples provide some auditable evidence. The evidence is primarily author-authored documentation and examples, with no supplied key-path test suite, CI results, or independent corroboration; static independent reproduction is therefore limited.
- External TTS providers may require API keys and cross-border network access or data transfer; verify reachability, cost, privacy terms, and whether the narration may be sent before synthesis.
- Do not execute the example rm -rf operation without explicit confirmation; verify the target and use a recoverable approach.
- The documentation requires TypeScript and browser checks, but this review did not execute them; those requirements are not verified results.
What does this skill do, and when should you use it?
web-video-presentation is for creators, educators, product teams, and speakers who want to turn written or narrated content into video. It first produces a narration script and chapter plan, then maps narration beats to full-screen web scenes. The output is a Vite, React, and TypeScript project, with optional per-beat narration audio. Its workflow emphasizes a fixed 1920×1080 stage, content-driven motion, progressive reveals, and explicit user checkpoints, with 23 built-in themes.
Reads a supplied article or narration script and produces script.md and outline.md; scaffolds a Vite + React + TypeScript presentation; stores each chapter's step count and narration text in narrations.ts; implements full-screen 16:9 scenes with CSS, SVG, Canvas, or JavaScript visual demonstrations and click or keyboard progression; scans narrations.ts into audio-segments.json; optionally synthesizes one MP3 per step using MiniMax mmx-cli or OpenAI TTS into public/audio/; and supports one-take playback for recording through ?auto=1.
- A video creator has an article or script and wants a screen-recorded video for YouTube, Bilibili, TikTok, or WeChat Channels.
- An educator wants course material to unfold progressively in sync with narration.
- A product team wants a cinematic web-based product demo or talk presentation.
- A frontend developer wants a fixed 16:9 interactive presentation as an alternative to conventional animated slides.
What are this skill's strengths and limitations?
- Provides a structured workflow spanning content planning, web development, optional audio synthesis, and recording, with mandatory review checkpoints.
- Produces a concrete Vite + React + TypeScript project with chapter code, narration data, and optional audio files.
- Supports MiniMax and OpenAI TTS and documents an extension path for other providers.
- The fixed 1920×1080 stage and hidden recording controls are well suited to stable screen capture.
- Includes 23 themes while explicitly encouraging content-specific visual decisions.
- Users must supply an article, script, or outline; the skill does not create the full subject matter from a topic alone.
- The mandatory approval checkpoints make the workflow less suitable for users seeking one-click automation.
- Audio synthesis depends on an external TTS provider, and the required credentials or CLI setup are not supplied by the source.
- The supplied material does not document visual regression testing or a complete automated test suite.
How do you install this skill?
Use the repository's skills CLI command: npx skills add ConardLi/garden-skills -s web-video-presentation. Alternatively, clone https://github.com/ConardLi/garden-skills.git and copy skills/web-video-presentation into a project's .claude/skills/, .agents/skills/, or .codex/skills/ directory. The repository is MIT-licensed.
How do you use this skill?
Prepare an article or narration script and ask a compatible coding agent to turn it into a recordable 16:9 web video presentation. The skill first creates script.md and outline.md, then asks the user to confirm the script, plan, theme, assets, and development mode; chapter one must be reviewed before the remaining chapters proceed. After the web presentation is complete, choose whether to synthesize audio. For audio, run npm run extract-narrations and then npm run synthesize-audio, or set PRESENTATION_TTS=openai to use OpenAI TTS. If no article, script, or outline is available, the skill asks for source material instead of inventing the content.