Home / All Skills / Content & Media Creation / web-video-presentation
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · hideaway007/codex-video-skills

web-video-presentation

Converts articles, voiceover scripts, or pre-sliced comic panels into click-driven 16:9 web presentations that look like videos, automatically synthesizing voiceover audio by default once HTML verification passes. Workflow: Source article / voiceover script / panels manifest → **one-shot generation** of voiceover script + outline dev plan → user **aligns once** on script / outline / assets / dev mode → web development (chapter-by-chapter / sequential / parallel) → automated audio synthesis (defaulting to Volcengine/Doubao TTS, Liu Fei 2.0). Phase 1 scriptwriting exclusively references `references/CODE-GARDEN-VOICEOVER.md`; no other writing rules are used. Comic Panels Mode is designed for motion comic HTML videos based on `manifest.json + panel_*.png`: each panel can be split into 1–N steps featuring camera zooms, focal punch-ins, dialogue/subtitles, and transitions. Best suited for: web videos, animated slide decks, motion comic HTML editions, technical tutorials, and talk demo screen recordings. The default visual anchor is the d2-editorial-grid paper archive editorial style; users can explicitly switch to other themes.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandInstall DepsNetwork AccessWrite FileDual-pass Audit
Author hideaway007GitHub hideaway007/codex-video-skills ↗License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 D2；README 亦标 License: MIT；GitHub API license.spdx_id = MIT）Commit f2c70b812b
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The final deliverable is a 'screen-recordable video disguised as a webpage': a Vite + React + TS project paired with chapter-sliced audio, triggering automatic voiceover synthesis by default after HTML verification passes.

skills/web-video-presentation/SKILL.md
把一篇文章或口播稿，一步步做成可录屏的"伪装成网页的视频"，HTML 验证完成后默认直接合成口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。
What this does: Transforms 'making a video' into 'building a webpage + audio + screen recording', unlocking frontend toolchains (chapter components, token-based themes) without needing video editors.

narrations.ts serves as the single source of truth for step counts and audio synthesis: the maximum step referenced in chapter code + 1 must strictly equal narrations.length.

skills/web-video-presentation/SKILL.md
> **关键**：`narrations.ts` 是 step 数和音频合成的**唯一真相源**。
What this does: Ensures zero drift across five points—script, outline, chapter code, chapters.ts, and audio files—permanently eliminating legacy issues where webpage steps mismatch audio file counts.

Enforces a mandatory self-check protocol across three artifacts (script.md, outline.md, and single-chapter implementations), requiring failed checks to be resolved before reporting.

skills/web-video-presentation/SKILL.md
下面三个产出，每一个**完成后必须走自检 → 修复 → 再汇报 / 推进**：
What this does: Establishes self-checks as pipeline quality gates with capability fallback (Agent Teams → subAgent → self-check), strictly enforcing the rule: 'Reporting raw failures without fixing them is a violation'.

The outline deliberately omits animation specifics: hardcoding animations degrades chapter agents into translation engines, whereas creative leeway produces genuine video pacing.

skills/web-video-presentation/SKILL.md
> **outline 不写动画的理由**：写死动画 = chapter agent 退化为翻译机；
What this does: Embeds 'when to specify vs. when to leave blank' as a design decision—outlines govern pacing, content, and the information pool (chapter splits, step counts, estimated duration, on-screen content per step, chapter-level info pool), leaving animations to be resolved dynamically during chapter implementation via CHAPTER-CRAFT.md's content-driven decision tree.

The Checkpoint Plan acts as a hard milestone: script, outline, assets, and development mode are aligned in a single pass; default theme is d2-editorial-grid.

skills/web-video-presentation/SKILL.md
## Checkpoint Plan —— 4 件事一次对齐（**硬节点**）
What this does: Minimizes human intervention to a few high-leverage checkpoints (along with Chapter 1 review and mid-course mode switches), avoiding repetitive chapter-by-chapter Q&A.

Chapter 1 enforces main-thread execution and user sign-off: it establishes the initial baseline for CHAPTER-CRAFT guidelines under the chosen theme/topic and serves as the visual code anchor for subsequent chapters.

skills/web-video-presentation/SKILL.md
**第 1 章无论哪种模式都必须主线程做完 + 用户验收**（强制 anchor）。
What this does: Rejects the concept of a 'barebones draft'—Chapter 1 must be delivered as a fully verified template ready for direct sign-off, ensuring blind spots in guidelines or theme token deficits are caught early when remediation costs are lowest.

Phase 3 proceeds directly to audio synthesis without pausing to ask: once all HTML passes verification, audio synthesis initiates automatically, halting only under four exceptions (explicit user refusal, missing auth, or switching to local TTS).

skills/web-video-presentation/SKILL.md
**默认不要停下来问是否合成音频**。Phase 2 全部 HTML 已完成且验证通过后， agent 直接进入本阶段。
What this does: Shifts voiceover generation from an opt-in prompt to default execution—since audio is a prerequisite for Auto mode single-take screen recording (master audio track + timeline driving HTML).

Default TTS configuration is hardcoded to Volcengine/Doubao: engine=volcengine, seed-tts-2.0, voice_type zh_male_liufei_uranus_bigtts, speed 1.2, speech_rate 20.

skills/web-video-presentation/SKILL.md
engine=volcengine resource_id=seed-tts-2.0 voice_type=zh_male_liufei_uranus_bigtts voice_name=刘飞 2.0 speed=1.2 speech_rate=20
What this does: Provides a production-ready Chinese male voice preset (Liu Fei 2.0) and chains incremental generation, skip-existing logic, and loudness normalization into an automated pipeline.

Phase 4 defaults to automated CDP screen recording and explicitly prohibits using screencli (which launches AI agents and burns tokens).

skills/web-video-presentation/SKILL.md
默认不要用 screencli 做本流程：它会启动 AI agent、消耗 tokens
What this does: Provides reliable alternative execution paths (CDP/Playwright auto-recording, manual recording via ?auto=1&record=1, or manual stepping without audio), alongside post-processing branches for subtitle burning and 2x mastering.

Visuals are guided by an index of ten one-sentence principles (fixed 16:9 stage, global step counter, full-screen step occupancy, voiceover beat = step, content-driven animation, progressive reveal, dual-source principle, etc.).

skills/web-video-presentation/SKILL.md
| 10 | 双源原则 | script 定节拍，**article 定画面密度**（落到信息池） |
What this does: Condenses lengthy documentation into a one-page index (detailed in CHAPTER-CRAFT.md Part 0) and defines 16:9 strictly as '1920×1080 canvas scaled via CSS transform, non-responsive'.

2Core Capabilities

01Article/script/comic panels → click-driven 16:9 web presentation (Vite + React + TS project + step-sliced audio)
02One-click scaffolding (including theme selection and instructions for pruning the built-in 01-example demo) with automated dependency installation
03Chapter development core guide (CHAPTER-CRAFT.md): ten principles / 5 pre-flight questions / relationship-to-motion decision tree / visual toolkit / anti-AI patterns / hard coding rules / completion self-check
04Comic Panels Mode: manifest.json + panel_*.png → 16:9 motion comic (splitting each panel into 1–N steps, camera zooms, focal punch-ins, dialogue/subtitles, and transitions)
05Automated audio synthesis pipeline: extract-narrations → synthesize-audio (default Volcengine/Doubao, incremental skip-existing) → normalize-audio → build-master-audio (master + timeline)
06Automated CDP screen recording (puppeteer-core driving local Chrome, capturing frames via Page.startScreencast and encoding with ffmpeg) and subtitle hardcoding
0710 built-in themes (d2-editorial-grid default, bauhaus-bold, blueprint, chalk-garden, midnight-press, monochrome-print, newsroom, paper-press, sunset-zine, terminal-green, warm-keynote) and custom theme workflows
08Rich visual toolkit references (React components, SVG diagrams, and dashboard primitives extracted from frontend-slides, slide-deck-generator, and marp-slides within clean dependency boundaries)

3External Dependencies

KindDependency / Endpoint
clinpm / Vite 脚手架与依赖安装（npm create vite、npm install、npm install --save-dev tsx puppeteer-core、npx tsc --noEmit）
api火山/豆包语音合成（默认引擎；鉴权仅从环境变量读，curl 调 unidirectional 接口）
apiMiniMax CLI（可选 TTS 路径，走 mmx auth login --api-key；key 在平台获取）
cliMeloTTS 本地路径（可选：调 ../../.venv-tts/bin/melotts 生成 wav 再用 ffmpeg 转 mp3）
packagepuppeteer-core + 本机 Chrome（CDP 录屏与字幕烧录；headless 启动参数不含任何反自动化绕过）
networkGoogle Fonts（主题 CSS 引用，浏览器端/录屏期拉取）与本地 dev server 端口

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local scripts or commands: bash scripts/scaffold.sh <target> [--theme=…] (npm create vite + npm install)
  • scripts/ 或 SKILL.md: Declares dynamic installation of external language package dependencies
  • 网络端点: Declares outbound network access: https://openspeech.bytedance.com/api/v3/tts/unidirectional (default Volcengine/Doubao TTS, POST)
  • 本地工作目录: File read/write and artifact output: generated presentation/ project (complete Vite + React + TS source code, package.json, vite.config.ts, tsc)
Audit Notes: Both factors triggering the amber tier are localized entirely within the skill's own directory: ① **Credential File Access**—templates/scripts/synthesize-audio.sh sources local credentials from $HOME/.config/doubao-tts/env when environment variables are missing, transmitting DOUBAO_TTS_API_KEY / VOLCENGINE_TTS_API_KEY via curl auth headers to openspeech.bytedance.com (Volcengine/Doubao TTS); an optional fallback path includes MiniMax CLI's mmx auth login --api-key. ② **External Transmission of User Assets/Copy + Account Quota Consumption**—step-sliced narration copy is dispatched segment-by-segment to external TTS services for synthesis; the scaffolding phase installs dependencies (vite/react/tsx/puppeteer-core) from the npm registry. Both behaviors align strictly with amber criteria ('reading credentials for declared self-use + sending user content to external services/backends'), and clear fallbacks are provided (local MeloTTS path, or skipping synthesis to output pure HTML). No security degradations (no TLS disabling, no --no-verify), anti-automation bypasses (CDP flags restricted to --autoplay-policy/--hide-scrollbars/--window-size, without AutomationControlled, remote-allow-origins=*, or fake keystroke substitutes), sandbox escape, or arbitrary code execution vectors were found.

5Second-Pass Verification

  • [ok] TTS 凭证读取与外发是否真实（橙档关键证据） — synthesize-audio.sh 原文：'# 2. DOUBAO_TTS_API_KEY or VOLCENGINE_TTS_API_KEY for default Volcengine/Doubao TTS'；'DEFAULT_VOLCENGINE_ENV_FILE="$HOME/.config/doubao-tts/env"'；缺失时 source 该文件；取到后作为鉴权头 curl 到 https://openspeech.bytedance.com/api/v3/tts/unidirectional。调用点与降级说明（AUDIO.md 的「缺少 API Key 时不要假装合成成功」）一致。
  • [ok] 是否存在反自动化绕过或安全降级（红档排除） — record-cdp-screencast.mjs 的 puppeteer.launch 只有 headless: true 与 args=[--autoplay-policy=no-user-gesture-required, --hide-scrollbars, --window-size=…]，无 AutomationControlled、无 remote-allow-origins=*、无 webdriver 伪装；全目录 grep --no-verify / --sandbox / dangerouslyDisableSandbox 零命中。CDP 只连本机回环页面（默认 http://127.0.0.1:5175/?auto=1&record=1&autostart=1）。
  • [discrepancy] 「默认不停下问」会不会导致未经同意的付费合成 — ［判定：设计取舍，非缺陷］SKILL.md 明写 '**默认不要停下来问是否合成音频**。Phase 2 全部 HTML 已完成且验证通过后，agent 直接进入本阶段。'，并列出四种收口例外（用户说不要/鉴权缺失/换本地 TTS）。即：默认路径会消耗 TTS 账号额度且不再二次确认——属有意的流程设计（音频是一镜到底前提），但使用者应在开始前知情并配好额度与凭证。
  • [ok] 脚手架是否真的安装 puppeteer-core（录屏能力来源） — scripts/scaffold.sh 内含 `npm install >/dev/null 2>&1` 与 `npm install --save-dev tsx puppeteer-core >/dev/null 2>&1`，随后跑 `npx tsc --noEmit` 自检；即录屏/字幕脚本的依赖由脚手架负责安装，而非假定全局存在。
  • [unlocatable] 并行章节开发（模式 C）带来的风格与质量分散 — 文档声称主题 token 兜底、章节 CSS 物理隔离、风格不一致等于「人手写视频的呼吸感」；但 pin 仓库内没有多章并行产出的成品或验收记录可用于验证该主张，本次只读侦查不运行生成，故仅作「文档声明」记录，不当作已核事实。
  • [ok] 「?auto=1 一镜到底」的机制描述是否与代码一致 — AUDIO.md 与 build-master-audio.mjs 的描述一致：分段合成后拼成 master.mp3 + timeline.json，运行时 Auto 模式优先播 master 音轨并按 timeline 驱动 HTML 节点；RECORDING.md 的 CDP 路径以 --audio=<normalized master> 复用同一条母版，避免分段交接造成尾字截断。

6Verdict & Scenarios

  • Engineers 'webpage videos' into a repeatable production pipeline: scaffolding + chapter dev guidelines + audio synthesis + CDP screen recording + subtitle burning, fully supported by bundled scripts
  • Strict single source of truth discipline: narrations.ts governs step counts and audio, eliminating drift across five critical deliverables
  • Restrained and clear human checkpoints: 4-in-1 Checkpoint Plan alignment + mandatory Chapter 1 sign-off + flexible mid-flight dev mode switching
  • Anti-AI styling and high visual bars codified into acceptance checks: purple-pink gradients, pill buttons, fake illustrations, and emojis trigger review warnings; pure text chapters are banned in favor of rich HTML key visuals
  • Actionable, production-ready audio defaults (Volcengine/Doubao Liu Fei 2.0, speech_rate 20), featuring local MeloTTS / MiniMax fallbacks and strict 'fail loudly on missing keys' error handling
  • Screen recording pipeline prioritizes controllable, low-cost options (explicitly rejecting screencli), with dependencies installed via scaffolding rather than assuming global availability
    • Best for: Ideal for creators holding articles, voiceover scripts, or sliced comic panels who need 16:9 video-style presentations: dynamic pitch decks, technical tutorials, talk demo screen captures, or HTML motion comics. Requires Node/npm, local Chrome, and ffmpeg installed, with acceptance of Volcengine/Doubao TTS by default (or configured local MeloTTS). Delivers an end-to-end production pipeline from drafting to final video render.
    Not for: Not suitable for: ① Projects requiring traditional NLE video editors rather than web presentations (this skill outputs a recordable web app + audio); ② Environments that cannot transmit scripts to external TTS services and decline local TTS setup; ③ Workflows requiring pixel-identical visual uniformity across chapters without manual alignment (parallel mode introduces stylistic variance); ④ Users expecting zero-documentation instant video generation—the Checkpoint Plan, Chapter 1 sign-off, and chapter self-checks are mandatory gates; ⑤ Non-macOS environments unwilling to configure custom Chrome paths (requires overriding --chrome).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload web-video-presentation.tar.gz
    sha256: 6c6b9cedf0142114…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit f2c70b812b.