Claude Code Remotion 技能:按帧安排两段标题卡和转场
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/creative-design/remotion-best-practices` 目录。
- 将目录放入目标项目的 `.claude/skills/`,确认 `.claude/skills/remotion-best-practices/SKILL.md` 存在,再从项目根目录启动 Claude Code 并输入 `/remotion-best-practices`。
中文摘要
使用 Remotion 组合、帧率和序列组织 React 视频。适合在预览前算清每个片段的起止帧和总时长。
SKILL.md 中文导读
可复现示例
为虚构教程设计 30 fps、180 帧的标题段。先显示课程名 90 帧,再显示章节名 90 帧。请标出两段的开始位置和最终可见帧。工作步骤
- 先明确画布、帧率和总帧数,再划分序列范围。
- 把片段和过渡与具体帧对应,预览各边界是否符合设计。
验收方法
第一段占 0–89 帧,第二段占 90–179 帧,总计 6 秒。实际播放须检查边界没有空白。
GitHub 原文 · 更新日期
适用环境
Claude Code、固定版本完整技能与已有 Remotion 工程。演练只使用文字和简单形状。
常见问题
为什么不只写两段各三秒?
帧编号能明确相邻片段的边界。先换算再按帧检查预览,可以发现重叠或空白。