video-generationlisted

# Video Generation Skill 把一篇技术博客文章 / 一个技术主题生成为**横屏 16:9 视频**。三种程序化模式： - **remotion（默认）**：数据可视化 + 真实素材——深色科技网格底 + 真实数据图表 + 素材标注，适合发布速报、性能对比、教程步骤（Remotion 管线，`remotion/` 目录）。**默认主题，参照 `after-million-loc-my-skills.mp4`** - **courseware**：课件式——左栏要点逐条浮现 + 右栏知识卡片 + 底部字幕带（Playwright 管线） - **screencast（courseware 子模式）**：屏录感工具界面——**浏览器真实网页截图打底 + 箭头标注是主角**（`realshot`：任何能在浏览器里呈现的步骤都截图，官网 / 市场 / GitHub / 控制台 / 在线编辑器都行），CSS 仿真窗口（VSCode mockup / 终端）只在浏览器截不到时才兜底（本地桌面应用、需登录态的真实界面）。标题栏下方**顶部常显步骤条**（全部步骤：done/active/future 三态），`active_idx` 高亮当前操作 + 光标箭头，对标抖音「录屏+标注」爆款（Ai小白Lab 26.2 万赞）。deck 卡 `type:"tool"` 即触发 - **graph**：节点图/知识图谱——中心辐射布局，节点逐个高亮 + 连线生长，适合概念关系/体系架构（Playwright 管线） 三种模式共用 TTS/断句/字幕规则（`narrate.py`）。数据 → edge-tts 配音 + 程序化画面渲染 + FFmpeg 合成。零收费、全本地。 ## 目录结构（skill 存代码，产物落项目根） skill 目录只放可复用代码/脚本/模板。**所有内容配置、渲染产物、临时文件**落在项目根的 `video-generation/`（git 忽略），通过路径自动解析（skill 根向上找 `hugo.toml`/`.git` 定位项目根）。 ``` .agents/skills/video-generation/ ← skill：只放可复用代码 ├── SKILL.md ├── remotion/ Remotion 管线（React + Three.js） │ ├── src/core/ 框架（VideoConfig/VideoComposition/theme） │ ├── src/primitives/ 视觉原语 │ ├── src/scenes/ 通用场景组件 │ ├── src/videos/ 示例/测试 video configs（dummy/showcase） │ ├── remotion.config.ts webpack alias @videos + @skill-src │ └── scripts/render.ts 渲染入口 ├── scripts/video/ Playwright 管线核心模块 │ ├── c