nyosegawa/skills

Remotion 推广视频工厂

使用此技能可制作可重复、高质量的 Remotion 应用介绍视频。 该技能刻意与特定应用无关，适用于 UI 密集型产品和非 UI 产品。

核心规则

1. 以官方 Remotion 技能规则为主要权威。
2. 所有动画效果通过 useCurrentFrame() 结合 interpolate() 和 spring() 驱动。
3. 以秒为单位设计时间，然后使用 sec() 转换。
4. 首先选择应用类型蓝图；不要默认仅使用 UI 演示。
5. 优先使用可复用的视觉原语，而非一次性录制的素材。
6. 在进行动画打磨之前应用排版大小规则。
7. 每次重大修改后通过帧捕捉验证，然后运行类型检查和渲染。
8. 没有逐帧证据，不得声称质量成功。
9. 未经用户明确批准，切勿提交、推送或标记任务完成。

官方技能集成

始终首先阅读 references/official-skill-integration.md。

各阶段所需的官方规则组：

1. 合成阶段：compositions、parameters、calculate-metadata
2. 动画阶段：animations、timing、sequencing、transitions
3. 资源阶段：assets、images、fonts
4. 可选阶段：audio、videos、subtitles、text-animations

参考资料

• 应用类型选择和场景模板：references/app-type-blueprints.md
• 官方 Remotion 规则映射：references/official-skill-integration.md
• 时间线和动画模式：references/timeline-and-motion.md
• 时间预算和调试循环：references/timing-and-debug-loop.md
• 排版和可读性规则：references/typography-and-readability.md
• 可复用的视觉构建块：references/visual-primitives.md
• QA 检查清单：references/qa-checklist.md
• 故障排除指南：references/troubleshooting.md

工作流程

步骤 1：收集输入

从本地项目上下文（README、文档、登录页面、现有 UI、CLI/API 示例）收集：

1. 目标受众
2. 核心承诺（一句话）
3. 可用的证明素材（UI、代码、日志、指标、推荐信）
4. 可用的媒体素材（徽标、屏幕截图、片段、音频）

步骤 2：选择应用类型蓝图

阅读 references/app-type-blueprints.md 并选择一种：

1. UI 中心型应用
2. API/SDK 应用
3. 开发者工具 / 基础设施应用
4. AI/自动化应用

根据所选蓝图创建镜头列表。

步骤 3：叙事和时间长度

1. 定义故事弧：钩子 -> 问题 -> 机制 -> 证据 -> 行动号召
2. 选择目标时长：15s、30s、45s 或 60s
3. 在实施之前分配场景时长

步骤 4：合成设置

1. 在 src/Root.tsx 中定义 Composition
2. 添加 schema 和 defaultProps
3. 在 calculateMetadata 中计算持续时间
4. 使用 TransitionSeries 在 src/Video.tsx 中连接场景

步骤 5：场景构建

1. 首先在 src/components 中构建可复用组件
2. 使用这些组件在 src/scenes 中组装场景
3. 使用绝对定位，并配合布局和时间的常量
4. 保持场景文件专注于编排，而非低级别的 UI 细节

步骤 6：排版处理

阅读 references/typography-and-readability.md，首先设置所有主要文本大小。

1. 应用 1920x1080 的推荐字号范围
2. 除非有明确理由，否则尊重硬性最小值
3. 在动画打磨之前确认移动设备/iOS 可读性

步骤 7：动画处理

1. 使用梯形淡入淡出以确保可读性
2. 使用弹簧动画实现入场和光标类移动
3. 添加每场景 exitOpacity 以避免过渡期间的重叠伪影
4. 使用叠加层/字幕明确指示阶段变化

步骤 8：时间合理性检查

阅读 references/timing-and-debug-loop.md 并验证时间预算：

1. 检查文本停留时间和阅读窗口
2. 检查处理过程和结果保持时长
3. 检查过渡重叠和交接时间
4. 在打磨工作之前修复时间线常量

步骤 9：质量保证循环（需要证据）

1. 每次重大修改后捕捉关键帧
2. 检查视觉清晰度、时间、重叠和合成平衡
3. 在调试日志中记录通过/失败证据
4. 迭代直到所有关键检查点通过

根据需要，使用 scripts/capture-frames.sh。

如果图像读取工具失败或未返回有用内容，请重新捕获并重试。不要进行无法验证的检查。

步骤 10：最终验证

1. npx tsc --noEmit
2. npm run -s build
3. 如果可用，npm run -s build:gif
4. 渲染最终的 mp4 并验证运行时和输出大小
5. 根据预期的场景行为重新检查关键时间戳

根据需要，使用 scripts/verify-build.sh。

步骤 11：交付和审批

1. 报告基于证据的质量保证摘要（通过/失败的内容及原因）
2. 列出已知的妥协或残余风险
3. 在提交/推送/任务完成前请求明确批准

输出格式

报告工作时，包括：

1. 选定的应用类型和蓝图
2. 场景结构和最终时长
3. 实现的主要组件
4. 关键动画决策
5. 时间预算检查及结果
6. 验证命令和结果
7. 剩余风险或后续事项

防护栏

1. 使用 Img + staticFile() 处理本地图像。
2. 在模块作用域内加载字体，不要在 effect 内部加载。
3. 保持 Sequence 布局和预挂载设置兼容。
4. 使用 references/typography-and-readability.md 中的排版硬性最小值。
5. 将复杂效果集中在一个焦点区域。
6. 不要在一个剪辑中为太多目标进行优化；保持单一主要信息。
7. 没有明确证据时，切勿将输出描述为“完美”。
8. 即使渲染命令成功，也不要跳过质量保证证据。