Web Video Presentation
Convert scripts, articles, or demos into a click-driven 16:9 Vite + React presentation you screen-record for YouTube, Bilibili, or product channels.
Overview
Web Video Presentation is an agent skill most often used in Launch (also Build, Grow) that builds a click-driven 16:9 Vite + React presentation optimized for screen-recording as video.
Install
npx skills add https://github.com/conardli/garden-skills --skill web-video-presentationWhat is this skill?
- Vite + React + TypeScript scaffold for 1920×1080 stage-native steps
- (chapter, step) cursor model—one click advances one narration beat
- Hard collaboration checkpoints in the agent workflow
- Theme-token architecture for consistent cinematic styling
- Progress UI hidden unless hovered for clean screen recording
- Skill version 1.2.1
- 1920×1080 full-stage steps per narration beat
- Compat list includes six agent CLIs including Claude Code and Cursor
Adoption & trust: 1.8k installs on skills.sh; 7.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have an article or script but no structured, full-frame web presentation that paces like a video instead of a static slide deck.
Who is it for?
Creators and founders repurposing long-form writing into narrated video, course segments, or polished product demos without a separate video editor timeline.
Skip if: Teams that only need PowerPoint-style decks with no codegen or who want automated AI voice/video rendering without building a React app.
When should I use this skill?
Turning scripts, articles, lessons, product demos, or talks into click-driven 16:9 web presentations for screen recording.
What do I get? / Deliverables
You get a screen-record-ready React presentation with chapter/step navigation, theme tokens, and hidden progress chrome for clean captures.
- Vite + React + TypeScript presentation project with chapter/step model
- Theme-tokenized UI tuned for screen recording
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Distribution is where narrated visual content ships; this skill produces the recordable surface, not just slide bullets in a doc. Distribution covers product demos, lessons, and channel-ready video collateral built from written source material.
Where it fits
A product changelog article becomes a click-paced demo you record for a launch-week YouTube upload.
You scaffold the Vite + React 1920×1080 stage and chapter cursor before writing custom animation components.
An onboarding lesson script is rebuilt as hover-hidden progress UI suitable for Bilibili narration.
How it compares
Method-driven codegen for recordable web presentations—not a hosted slide SaaS or a single FFmpeg script.
Common Questions / FAQ
Who is web-video-presentation for?
Solo builders and educators using coding agents who want article-to-video workflows with a React presentation shell they control and record.
When should I use web-video-presentation?
At launch when packaging demos for YouTube or Bilibili; during build/frontend when scaffolding the presentation repo; at grow/content when turning lessons into channel assets.
Is web-video-presentation safe to install?
It generates a standard frontend project; review the Security Audits panel on this Prism page and audit dependencies in the scaffolded Vite app like any new repo.
SKILL.md
READMESKILL.md - Web Video Presentation
{ "name": "web-video-presentation", "version": "1.2.1", "category": "Web Video / Presentation", "description": "Turn scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos. Ships a Vite + React + TypeScript scaffold, a (chapter, step) cursor model, hard collaboration checkpoints, and a theme-token architecture.", "homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation", "compat": [ "claude-code", "claude-ai", "cursor", "codex-cli", "gemini-cli", "opencode" ] } # Web Video Presentation Skill **A method-driven agent skill for turning scripts and articles into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos.** [中文文档](./README.zh-CN.md) · [Back to collection root](../../README.md)  --- ## What Is This? `web-video-presentation` helps an agent build a Vite + React + TypeScript presentation that behaves like a video production surface rather than a slide deck. Each click advances one narration beat, each step owns the whole 1920×1080 stage, and the progress UI stays hidden unless hovered so the output is clean for screen recording. It is designed for: - Turning a written article into a Bilibili / YouTube / video-channel narration script - Turning an existing voiceover script into a cinematic web presentation - Building product demos, tutorials, keynote-style explainers, and visual talks - Creating “dynamic PPT, but not PPT” experiences with strong motion and pacing - Optionally synthesizing narration audio after the visual outline is approved The skill is primarily a **methodology and collaboration workflow**. The scaffold supplies reusable tokens, stage primitives, themes, and examples, but each project should still choose a visual language that fits the topic. --- ## Core Ideas - **Fixed 16:9 stage** — content is authored in a stable 1920×1080 coordinate system and scaled to the viewport. - **One global step cursor** — click or keyboard advances `(chapter, step)`, with the cursor persisted locally. - **One step, one idea** — every beat gets a focused full-screen scene instead of accumulating slide bullets. - **Script beats drive structure** — narration rhythm maps directly to visual steps. - **Hidden chrome** — progress controls are hover-only, keeping recordings clean. - **Motion first** — each scene needs a moving visual anchor; static paragraphs are treated as a smell. - **Theme tokens** — visual decisions flow through semantic tokens so themes can change the whole feel. - **Pluggable TTS** — provider-agnostic audio runner ships **two built-in providers** (MiniMax `mmx-cli` and OpenAI TTS via curl); swap to ElevenLabs / edge-tts / Azure / Google Cloud / macOS `say` / any self-hosted TTS by dropping a single shell file into `tts-providers/`. - **Hard checkpoints** — the agent pauses after script/theme alignment, after outline approval, and before optional audio synthesis. --- ## Workflow ```text Phase 1.1 Identify input Phase 1.2 Article -> narration script | Checkpoint A1 Script, theme, and rough asset plan | Phase 1.3 Script + article -> outline.md | Checkpoint A2 Outline approval + development mode | Phase 2 Build the Vite / React / TS presentation | Checkpoint B Ask whether to synthesize audio | Phase 3 Optional audio synthesis Phase 4 Recording and post-production ``` The checkpoints are part of the skill contract: the agent should not silently rush from raw article to finished code. Theme choice influences motion design, and outline approval keeps chapter pacing from drifting. --- ## What It Ships ```text skills/web-video-presentation/ ├── SKILL.md ├── README.md / README.zh-CN.md ├── references/ │ ├── PRINCIPLES.md │ ├── CHAPTER-CRAFT.md │ ├── OUTLIN