| name | remotion-blog-motion-assets |
| description | 当用户给出单篇博文路径时，自动从正文中识别适合用 Remotion 静帧或短循环视频说明的段落/小节，并在渲染资源后把引用写回同一篇 Markdown。也适用于手动指定「用 Remotion 做动图/示意图」、批量 MP4/GIF、以及固化 `_scripts/remotion-blog-ppt-article` 到文章 `pic/` 目录。实现 Remotion 代码时应协同读取本机 remotion-best-practices skill。 |
Remotion 博文配图与短视频
这个 skill 做什么
绑定 BlogPapers 仓库，说明如何用 Remotion 子工程 产出可嵌入 Markdown 的 静帧图 与 短视频，并在配色与气质上对齐本站深色科幻风。
推荐主路径（用户给一篇文章文件时）：以 YYYY/某文章.md 为唯一输入，按下文「从文章到槽位 → 实现/选用 composition → 导出 → 写回正文」走完；不要只做 Remotion 而忘记把资源嵌回原文。
与 creating-blog-web-ppt 的分工：
| 产物 | 工具 |
|---|
| 独立单文件 HTML 幻灯 / 演讲稿 | creating-blog-web-ppt |
| 栅格图、H264 循环短片、（可选）GIF | 本 skill + _scripts/remotion-blog-ppt-article |
目录说明：本仓库 skills 根路径为 .claude/skills/（与根目录 CLAUDE.md 一致）。若本地习惯写成 .CLAUDE/SKILLS/，请指向同一套路径。
输入与输出
| 输入 | 输出 |
|---|
用户提供的 单篇 Markdown 路径（如 2026/从Markdown到网页版PPT_同源deck与博客对照阅读.md） | ① 槽位清单（见下）；② YYYY/pic/<slug>/ 下的 PNG/MP4/（可选）GIF；③ 已插入引用后的同一 .md 文件 |
<slug>：与文章主题一致的小写英文短目录名（可与现有 pic/ 子目录对齐，例如 blog-ppt-remotion）；若文章已存在 ，优先沿用 xxx。- ** basename**：文章文件名去掉
.md，用于命名导出文件时保持可读、可追溯。
从正文自动提取「需要配图说明」的部分
目标不是改写全文，而是找出 用一张图或一段短循环比纯文字更清楚 的位置，并为每个位置预留 一个槽位（slot），便于对应一个 composition 或一张 still。
高优先级（几乎总是槽位）
- 小节标题含：
图、示意、架构、流程、分层、对照、路径、数据流、链路、状态机、时序 等，且正文在解释结构/步骤/多选一方案。
- 显式占位：HTML 注释如
<!-- motion: composition-id --> 或 <!-- 配图: 简述 -->（实现后改为真实 <video> / ![...]() 或删除注释并在紧邻位置插入媒体）。
- 列表 + 抽象名词：多条并列（如三种方案、三层结构、五个步骤）且后文没有现成配图。
- 表格：多列对比、矩阵选型；若表后是总结段，槽位可放在表后。
中优先级（结合后文判断）
- 密集技术段：连续出现「输入 → 输出」「A 层 / B 层」「解析 / 渲染 / 发布」等空间或管线隐喻，且段落长度超过约 8 行或 400 字仍无图。
- 代码块前后：若在讲「目录结构」「构建命令与产物路径」，可在代码块 后 设槽位做目录树或数据流示意（仍用 Remotion 画布，而非截图代码字体）。
- 已有弱配图：仅有文字说明「见下图」但无
![] / <video>，视为待补槽位。
低优先级 / 通常不设槽位
- 纯观点、随笔、书单；单句定义；已有满意静态截图且无需动效。
- 与站点无关的外链大图（不要随意替换成本地 Remotion 产物，除非用户要求）。
槽位清单（必须先产出再给 Remotion）
在动任何 src/*.tsx 之前，在回复或笔记中写出 槽位表，便于用户确认与批量渲染：
| slot | 锚点（原文小节标题或首句摘录） | 建议媒体类型 | 建议 composition / 动作 | 相对路径草案 |
|------|----------------------------------|----------------|-------------------------|----------------|
| S1 | … | MP4 循环 | 已有 `data-flow` 或新建 | ./pic/<slug>/data-flow.mp4 |
- 锚点：便于在编辑器里
Ctrl+F 定位；插入媒体时放在 该锚点所在小节最后一个完整语义段之后（一般是该 ##/### 小节末，或列表/表格之后），避免打断列表项中间。
- 每个槽位最多一个主媒体（MP4 或 PNG）；GIF 仅在 README 约定或用户明确要求时使用。
写回原文的规则
- 动效优先
<video>（相对路径、与文章同目录解析）：
<video autoplay loop muted playsinline src="./pic/<slug>/example.mp4"></video>
（若站点对 HTML 有限制，以 Jekyll 实际渲染为准；可退化为 。）
- 静帧：
，说明文字用中文、不夸张。
- 不要破坏 front matter、现有锚点链接、脚注；新增块与上下各留一空行。
- 已存在 指向同一文件的引用则 更新属性/说明 而非重复插入。
- 若用户只要「提取清单」而不要改文件：只输出槽位表与建议路径，不写回
md。
依赖：remotion-best-practices（必协同）
本 skill 只覆盖 BlogPapers 仓库内的落盘路径、站点视觉对齐、导出到博文与 GIF 约定。凡是 编写、重构或调试 _scripts/remotion-blog-ppt-article 里的 Remotion 代码，都应把 remotion-best-practices 当作 通用领域知识 一并加载，二者互补、不互相替代。
| 来源 | 负责什么 |
|---|
本 skill（remotion-blog-motion-assets） | 文章槽位提取与写回、pic/ 目录约定、Root.tsx 画布与批量导出流程、博客色板与验证清单 |
| remotion-best-practices | Studio 预览、remotion still / render 习惯、composition 与动画、字体与资源、rules/*.md 专题（如 animations.md、timing.md、fonts.md、assets.md） |
本机路径（随 Claude Code 安装位置可能略有不同，以你机器上实际为准）：
- macOS / Linux：常见为
~/.claude/skills/remotion-best-practices/SKILL.md
- Windows：常见为
%USERPROFILE%\.claude\skills\remotion-best-practices\SKILL.md
执行时：先读 remotion-best-practices/SKILL.md 的索引，再按任务打开其 rules/ 下对应条目；同时按本 skill 的「必读路径」处理仓库专属部分。
何时使用
- 用户给出 一篇
YYYY/*.md，要求「用 Remotion 配图 / 动图 / 自动找需要图的地方并插入」
- 「用 Remotion 给这篇文章做动图 / 视频」
- 「导出和博客风格一致的示意图」
- 「批量 render MP4、再转 GIF」
- 「改画布分辨率后怎么重渲」
不要用本 skill：纯 CSS/HTML 幻灯、不涉及 Remotion 的静态配图、站点导航与 Jekyll 配置。
用户要求优先
若用户指定了输出目录、文件名、分辨率、只用 <video> 不用 GIF、或 禁止自动改 md 只出清单，以用户为准；本 skill 只补齐仓库内默认约定。
必读路径（按顺序）
- Remotion 通用实践：本机
remotion-best-practices/SKILL.md，按需深入其 rules/*.md（与下述步骤穿插进行即可）。
- 视觉对齐（颜色、字体、反 AI 味）：references/visual-alignment.md（可与
creating-blog-web-ppt/references/visual-system.md 对照）
- 子工程权威命令与参数：
_scripts/remotion-blog-ppt-article/README.md
- Composition 注册与画布：
src/Root.tsx（W / H / fps、各 id 与 durationInFrames）
执行清单
文章驱动（给定 YYYY/article.md 时）：
- [ ] 通读全文，按「提取规则」产出槽位表（含锚点与 ./pic/<slug>/ 草案）
- [ ] 与用户确认槽位数量与类型（可省略：用户已说「按 skill 全自动」）
- [ ] 确认文章对应的资源子目录（例如 YYYY/pic/<slug>/）
Remotion 与资源：
- [ ] 已对照 remotion-best-practices（及按需打开的 rules）实现或调整 composition
- [ ] 配色与版式对齐 visual-alignment
- [ ] npm install / npm run dev 预览
- [ ] 导出 MP4（--codec=h264，CRF 按 README，常用 --crf=16）
- [ ] 若需要 GIF：两阶段 palette；GIFW 必须与 Root.tsx 的 W 一致
写回与验证：
- [ ] 在 Markdown 中按槽位插入 <video> 或 ![ ]；不重复、不拆列表
- [ ] 浏览器打开文章页核对动效与暗色背景下的对比度
工作流摘要
- 读文章 → 槽位表 →（可选确认）→ 实现/注册 composition → 导出到
YYYY/pic/<slug>/。
- 进入子工程：
cd _scripts/remotion-blog-ppt-article，npm install，npm run dev。
- 画布：在
src/Root.tsx 修改 W、H（建议 16∶9）；所有 composition 共用。
- 静帧：
npx remotion still src/index.ts <composition-id> --frame=<n> --output=<相对文章 pic 的路径>。
- 视频：按 README 中的 PowerShell / Bash 批量
npx remotion render ... --codec=h264 --crf=16；输出目录一般为文章旁的 YYYY/pic/<slug>/。
- GIF：仅 256 色；高清循环更推荐博文中使用
<video autoplay loop muted playsinline>。若仍要 GIF，严格按 README 两阶段 ffmpeg，且 GIFW = W。
- 写回：按槽位锚点插入引用；保存
YYYY/article.md。
- CDN：全站图片前缀见根目录
CLAUDE.md；新文件若走既有发布流程，保持与文章相对路径一致即可。
Composition id 维护
当前注册的 id 与用途以 README 中的表格为准；新增 composition 时必须在 Root.tsx 增加 <Composition ... />，并在 README 表格中补一行，便于他人批量 render。
完成前验证
- 本地至少：文章页在浏览器中加载，检查
<video> /  是否正常、暗色背景下是否可读。
- 若动效用于与「网页版 PPT」对照的同一篇文章，可顺带打开同目录
*-ppt.html 看视觉是否同一套 token。
