Atlas / Skills / conardli / Web Video Presentation Skill

Web Video Presentation SkillSAFE

skills/conardli/web-video-presentation

Agent skill by conardli · agent · claude · gpt image 2 · Audited 2026-10-24

⚑ Report / re-scan Source ↗

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

Verdict

SAFE

Grade

Trust score

89 /100

Version

—

Hosts

1 documented

License

MIT

Stars

13,234

Overview

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

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.

中文文档 · Back to collection root

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 — visua

Read from source at commit 24a9957aaa79OBSERVED · 2026-10-24

Install

Commands as the repository documents them. They are shown, not run.

npm install -g mmx-cli && mmx auth login --api-key sk-xxxxx

pip install edge-tts

Host compatibility

What the documentation claims. We have not run a compatibility test.

Host	Status	Notes
cursor	mentioned

What it tells the agent

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: web-video-presentation
description: 把一篇文章或口播稿,做成"看起来像视频"的点击驱动 16:9 网页演示,可选合成口播音频。流程:原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事(稿子 / outline / 主题 / 素材 / 开发模式)→ 网页开发(逐章 / 顺序 / 并行)→ 可选音频合成(provider-agnostic:内置 MiniMax mmx-cli + OpenAI TTS,可换 ElevenLabs / edge-tts / Azure / 自带 TTS)。**outline 只规划节奏与信息密度,不规划动画** —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍,每一步独占整屏,进度条平时隐藏只在悬浮时出现。适用场景:用网页做视频(动态 PPT 但不像 PPT)、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
---

# 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 在用户当前目录下创建 / 编辑):

```
my-video/
├── article.md          # 用户给原文时必有 —— 不删!开发阶段画面信息源
├── script.md           # 必有:保持原文语言的平台化口播稿(决定节拍)
├── outline.md          # 必有:开发计划(章节切分 + 每步内容 + 信息池)
└── presentation/       # 脚手架产出的 Vite + React + TS 项目
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx     # 视觉实现
    │   ├── <Chapter>.css
    │   └── narrations.ts     # ★ step 数 + 口播文本的唯一真相源
    ├── scripts/
    │   ├── extract-narrations.ts   # 扫所有 narrations.ts → audio-segments.json
    │   ├── synthesize-audio.sh     # provider-agnostic runner(循环 segments)
    │   └── tts-providers/          # 每 provider 一个 .sh(内置 2 个)
    │       ├── README.md           # 三函数契约 + 5 段现成代码片段(11labs / edge-tts / say / azure / gcloud)
    │       ├── minimax.sh          # 默认 provider,用 mmx-cli
    │       └── openai.sh           # 内置 OpenAI TTS(curl + OPENAI_API_KEY)
    ├── audio-segments.json         # extract 产出(合成前 review)
    └── public/audio/<id>/<N>.mp3   # 可选:合成的音频
```

> **关键**:`narrations.ts` 是 step 数和音频合成的**唯一真相源**。
> 章节 `.tsx` 里的 `if (step === N)` 出现的最大 N + 1 必须等于
> `narrations.length`。这保证 5 处地方(script / outline / 章节代码 /
> chapters.ts / 音频文件)永远不会漂。

---

## 硬性自检协议(贯穿整个 Skill)

下面三个产出,每一个**完成后必须走自检 → 修复 → 再汇报 / 推进**:

| 产出 | 自检清单出处 |
|---|---|
| `script.md` | [`SCRIPT-STYLE.md`](references/SCRIPT-STYLE.md) 三层自检(形式 / 风骨 / 念出来) |
| `outline.md` | [`OUTLINE-FORMAT.md`](references/OUTLINE-FORMAT.md) 自检 |
| 单章实现完成 | [`CHAPTER-CRAFT.md`](references/CHAPTER-CRAFT.md) 完工自检 |

**执行方式**(按能力降级,**优先用更隔离的方式**):

1. **Agent Teams(最优)**:开一个独立的 reviewer agent,给它"产出文件
   路径 + 对应清单 + 关键上下文",让它逐项核查并**严格汇报结论**
   (哪几条 pass / 哪几条 fail + 证据 + 改写建议)。
2. **subAgent(次优)**:没有 Teams 能力但能开 subagent 就用 subagent
   走同样流程。
3. **自检(兜底)**:当前 agent 都没有上述能力,就自己**严格逐项**
   核查 —— 不允许目测一遍就放行。

**铁律**:拿到结论后**先按 fail 项把产出改完**,再向用户汇报"做完了
+ 自检结论 + 改了什么"。**直接拿原始结论汇报但不修复 = 违规**。

---

## 各阶段文件读取指南

不同阶段读不同的文件。**长会话里 agent 容易遗忘原则**,特别是
Phase 2.4 的"实现单章"会重复 N 次 —— 每次都要回看核心约束。

| 阶段 | 必读(每次都看) | 一次性看完 / 按需查 |
|---|---|---|
| Phase 1.1-1.2 内容编写 | `references/SCRIPT-STYLE.md` + `references/OUTLINE-FORMAT.md` + `article.md`(用户原文,如有) | —— |
| **Checkpoint Plan 选主题** | —— | `themes/*/theme.json`(动态读全部,列清单 + `bestFor` 推荐 + `descriptionZh`);`references/THEMES.md`(用户想了解主题系统时) |
| Phase 2.1 脚手架 | —— | SKILL.md 本节看一次 |
| **Phase 2.4 实现单章(×N 次,被 2.2 / 2.3 调用)** | **`references/CHAPTER-CRAFT.md`** 单一入口 —— Part 0 十条原则 / Part 1 开工 5 问 / Part 2 关系→动作决策树 / Part 3 视觉工具箱 / Part 4 时长参考 / Part 5 反 AI 味反模式 / Part 6 代码硬规则(**含 narrations.ts 强制约束**)/ Part 7 完工自检 / Part 8 反馈速查 + 当前主题的 `themes/<id>/theme.json` + 当前章节的 outline.md 段落 + **`article.md` 本章对应段落** + 素材清单 | `references/EXAMPLES/`(结构示意,不是抄袭模板);`references/THEMES.md` 完整 token 契约 |
| Phase 3 音频合成 | `references/AUDIO.md`(含 narrations.ts → segments.json → 任意 provider 流程,内置 minimax + openai) | `templates/scripts/tts-providers/README.md`(换 provider / 自带 TTS 时) |
| Phase 4 录屏 + 后期 | `references/RECORDING.md`(含 `?auto=1` 自动录屏) | —— |
| 选 / 造 / 切主题 | —— | `references/THEMES.md` |

> **写章节时只读一份 `CHAPTER-CRAFT.md`**。十条原则 / 开工 self-prompting /
> 决策树 / 反 AI 味反模式 / 完工自检全部并入这一份单一入口。`EXAMPLES/`
> **不是必读** —— 先按内容自由设计,卡壳才翻(按 anchor 翻"形",不要照搬)。

---

## Phase 1 —— 内容编写(一次产出)

### 1.1 识别用户输入

| 用户给的东西 | 该做的 |
|---|---|
| 原始文章(书面语 / 公众号 / 论文 / 博客) | 一次产出 `script.md` + `outline.md`(1.2),过 Checkpoint Plan |
| 直接的口播稿 / 视频脚本 | 落盘成 `script.md`,一次产出 `outline.md`(1.2 简化版),过 Checkpoint Plan |
| 啥都没有,只说"帮我做个 X 主题的视频" | **反问**:先给一段素材或大纲。Skill 不替用户构思内容 |

### 1.2 一次产出 script.md + outline.md

**两份产出物在一次思考中完成**:

1. **生成 `script.md`**:按 [`references/SCRIPT-STYLE.md`](references/SCRIPT-STYLE.md)
   的规则把 article 转成保持原文语言的平台化口播稿。**保留 `article.md` 不删**——它是
   outline 写信息池和章节实现画面时的细节源(双源原则)。
2. **生成 `outline.md`**:按 [`references/OUTLINE-FORMAT.md`](references/OUTLINE-FORMAT.md)
   规则切章节 + 切 step + 每章首段抽**信息池**。

**outline 的边界**(关键):

| outline 必须写 | outline 不要写 |
|---|---|
| 章节切分 / 每章 step 数 / 估时 | 具体动画类型(blur clear / wipe / 弹簧) |
| 每步屏幕内容(hero / 数据 / 标语 / 列表项) | CSS 实现手段(filter / SVG / clip-path) |
| 章节级**信息池**:从 article 抽的数字 / 引用 / 案例 / 标签 | 时长数值(不写 ~2.5s / 80~120ms) |
| 步级关系名前缀("反差对照" / "递进列表" / "金句" 等可选 hint) | 持续微动 / 错峰量等微观节奏 |

> **outline 不写动画的理由**:写死动画 = chapter agent 退化为翻译机;
> 留白让 chapter agent 在每步开工时按 [`CHAPTER-CRAFT.md`](references/CHAPTER-CRAFT.md)
> 的"内容驱动决策树"自由设计,才有真正的视频感。详见
> [`CHAPTER-CRAFT.md`](references/CHAPTER-CRAFT.md) Part 0 原则 7。

**落盘后必须先走自检再进 Checkpoint Plan**:按上文「硬性自检协议」分别
对 `script.md` / `outline.md` 执行(优先 Agent Teams → subAgent → 自检),
按结论修复完成后再进入 Checkpoint Plan。

---

## Checkpoint Plan —— 5 件事一次对齐(**硬节点**)

`script.md` + `outline.md` 写完后必须停下来。**用户在这一个节点同时确认
5 件事**

Trust audit

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

Layer	What it checks	Result
L0	Provenance & inventory	PASS
L1	Static analysis of the code	PASS
L2	Instruction surface (what it tells the agent)	PASS
L3	Class-specific surface	PASS
L4	Behavioural (sandbox)	SKIPPED