Communitygithub.com

kguevaram94/remotion-playground

该仓库中 Remotion Shorts 工厂的最佳实践。用于编辑 ShortVideo、流水线阶段、动画、FFmpeg 后期处理或添加动画库。

remotion-playground 是什么?

这个技能为 `kguevaram94/remotion-playground` 仓库中基于 Remotion 的短视频工厂提供了最佳实践和标准化工作流程。它定义了一个名为“逻辑侧边”的官方输出格式,通过六个节拍(hook、rules、countdown、explanation、reveal、outro)以及三个开关/bulb 等视觉场景来构建短视频。技能强制遵循声明性数据驱动架构:动画必须基于 `useCurrentFrame()`、`interpolate` 或 `spring`,第三方动画库(如 GSAP、Anime.js)仅限于官方帧同步集成。FFmpeg 和 Satori 等后期处理步骤是流水线的一部分,而不是渲染引擎内部。该技能支持多种平台(Claude Code、Cursor、Codex 等),通过预定义脚本模板、选择器逻辑、组件和流水线阶段来实现自动化的短视频生成和编辑,确保在仓库内保持一致性、可维护性和性能。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kguevaram94/remotion-playground/tree/HEAD/.cursor/skills/remotion-shorts

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Remotion Shorts — 仓库技能

官方格式:logic-lateral

参考:output/s4-19-interruptores/ · 模板:data/templates/script-logic-lateral.json。

节拍:hook → rules → countdown → explanation → reveal → outro(CTA 评论)。

视觉元素:logic-room、switch-sequence、bulb-state-reveal(+ countdown、text)。

cp data/templates/script-logic-lateral.json data/topics/mi-reto.json
npm run generar-short -- --input data/topics/mi-reto.json

自动构建器(标题带开关/灯泡):src/shorts/templates/three-switches.ts。

金规则

  1. 所有动画依赖 useCurrentFrame() / interpolate / spring。
  2. 数据声明式地存放在 JSON 中;组件放在 src/shorts/remotion/components/。
  3. 未经官方帧同步集成和充分理由,不得添加 GSAP、Anime.js 或 Motion Canvas。
  4. FFmpeg/Satori 属于后期处理,不在合成内部。
  5. 不要破坏 HelloRemotion 或 ScriptVideo。
  6. Logic-lateral 的 outro 始终要求评论。

修改点

变更文件
新视觉场景components/ + ShortVideo.tsx 中的分支 + schema
模板 / 检测src/shorts/templates/ + select.ts
流水线src/shorts/pipeline/
缩略图src/shorts/media/thumbnail.ts
FFmpegsrc/shorts/media/ffmpeg.ts
渲染选项render-video.ts(gl: angle、bundle 缓存)

外部参考

相关技能