Web Video Presentation

Turns written articles or narration scripts into click-driven 16:9 web presentations that look and feel like videos. You get a React app where each click advances one beat of the script, with fullscreen transitions designed on the fly using a content-first methodology instead of templated animations. The workflow is disciplined: it generates both the narration script and a chapter outline in one pass, forces you to align on five things (script, outline, theme, assets, dev mode) before any coding starts, then builds chapter one as a complete reference before touching the rest. Ships with a theme system, optional audio synthesis via MiniMax CLI, and explicit anti-AI-slop design principles baked into the chapter implementation guide. Best for recording screen demos that need cinematic pacing without looking like PowerPoint.

skills.sh installs: 6.3K
GitHub stars: 14.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add conardli/garden-skills --skill web-video-presentation --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Video Presentation

把一篇文章或口播稿，一步步做成可录屏的"伪装成视频的网页"，可选合成口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。

适用场景

"我有口播稿 / 一篇文章，帮我做成视频" —— 口播驱动的内容
想做 "动态 PPT"
16:9 横屏录屏，大字、留白、每屏都要有动效
教学 / 产品演示 / keynote 想要电影感
B 站 / YouTube /抖音视频内容

本 Skill 以方法论 + 协作流程为核心。脚手架模板提供 token 和原语，但每个美学决策（配色、字型、动效气质）都应该针对你的主题重新设计 —— 不要照搬。

工作流总览

Phase 1   内容编写
   1.1  识别用户输入
   1.2  一次产出 script.md + outline.md
        （口播稿 + 开发计划）
   ▼
[Checkpoint Plan]      ← 必须停。一次对齐 5 件事：
                         稿子 / outline / 主题 / 素材 / 开发模式
   ▼
Phase 2   网页开发
   2.1  脚手架（按选定主题）
   2.2  第 1 章 = 主线程 + 完整版本（强制 anchor）
        ▼
        [硬节点] 用户验收第 1 章 ← 不可跳过
        ▼
   2.3  第 2~N 章（按选定模式：A 逐章 / B 顺序 / C 并行）
   ▼
[Checkpoint Audio]     ← 必须停。是否合成音频
   ▼
Phase 3   音频合成（可选）
   ▼
Phase 4   录屏 + 后期

工作目录约定（agent 在用户当前目录下创建 / 编辑）：

SKILL.md on GitHub