首页 / 全部技能 / 内容创作 / remotion-best-practices
内容创作 · freestylefly/canghe-skills

remotion-best-practices

Best practices for Remotion - Video creation in React

L1 基础 · 登记来源即可V1 已固定Dual-pass Audit
Author freestyleflyGitHub freestylefly/canghe-skills ↗License MIT(仓库根 LICENSE)Commit dd0bf35595
管控等级描述 skill 的能力与建议配套的管控措施,不代表质量或安全认证,也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同,请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者,使用风险由使用者自行承担。

1实现原理 · 为什么它能做到

SKILL.md 本身只是索引/路由器:告诉模型按主题去读单个 rule 文件取详细说明与代码示例。

skills/remotion-best-practices/SKILL.md
Read individual rule files for detailed explanations and code examples:
这里在做什么:采用渐进式披露,SKILL.md 保持极短(44 行)。

29 个 rule 文件逐条列出并各配一句主题描述,形成可检索的知识地图。

skills/remotion-best-practices/SKILL.md
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
这里在做什么:把领域知识拆成一文件一主题,便于按需加载。

动画必须由 useCurrentFrame() 驱动,时间以秒写好再乘 fps。

skills/remotion-best-practices/rules/animations.md
All animations MUST be driven by the `useCurrentFrame()` hook.
这里在做什么:确立 Remotion 动画的唯一正确驱动源。

禁止 CSS transition/animation 与 Tailwind 动画类,否则渲染不正确。

skills/remotion-best-practices/rules/animations.md
CSS transitions or animations are FORBIDDEN - they will not render correctly.
这里在做什么:排除与逐帧渲染模型冲突的实现方式。

资产须放 public/ 并用 staticFile() 引用,组件保证渲染前加载完成。

skills/remotion-best-practices/rules/assets.md
You MUST use `staticFile()` to reference files from the `public/` folder:
这里在做什么:规范资产引用,避免子目录部署时路径失效。

媒体元数据统一用 Mediabunny:时长、宽高、可解码性、抽帧,浏览器/Node/Bun 通用。

skills/remotion-best-practices/rules/get-audio-duration.md
Mediabunny can extract the duration of an audio file. It works in browser, Node.js, and Bun environments.
这里在做什么:给出跨环境的媒体探测方案。

音频转字幕提供三种官方路径(本地 whisper.cpp / 浏览器 WASM / OpenAI API),各有取舍。

skills/remotion-best-practices/rules/transcribe-captions.md
`@remotion/install-whisper-cpp` - Transcribe locally on a server using Whisper.cpp. Fast and free, but requires server infrastructure.
这里在做什么:把转写方案按成本/环境差异列出,供模型按场景选择。

Tailwind 规则要求先安装启用,并指示模型用 WebFetch 取官方文档。

skills/remotion-best-practices/rules/tailwind.md
Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.
这里在做什么:规则文件里唯一一条明确让宿主联网取文档的指令,属指引而非技能自身调用。

2核心能力

0129 主题规则库路由:3d/animations/assets/audio/... 按需加载
02动画实现规范:useCurrentFrame 驱动、秒×fps 计时、禁止 CSS/Tailwind 动画
03资产导入:public/ + staticFile(),图片/视频/音频/字体,支持远程 URL
04字幕:导入 .srt(@remotion/captions)与 TikTok 式显示、逐词高亮
05媒体探测(Mediabunny):时长、宽高、可解码性、抽帧
06音频转写三方案:whisper.cpp / whisper-web / openai-whisper
07转场与测序:@remotion/transitions、Sequence 延迟/裁剪/限时
08图表、3D、Lottie、Tailwind 等集成主题

4管控建议与判定依据

建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据(文件路径与关键语句摘要)
  • SKILL.md: 纯提示词指令与规则文本,无脚本执行与外部影响
审计说明: 判定 🟢 green:33 个文件全为 markdown 文档与 .tsx 示例,§3 扫描无脚本执行、无自身网络请求、无凭证读取、无写盘。规则中的 npx/fetch/WebFetch 是文档示例而非执行面。。

5第二遍独立确认

  • [ok] 文件面核对 — §1 共 33 个文件:SKILL.md + 29 个 rules/*.md + 3 个 rules/assets/*.tsx,无 .py/.sh 可执行脚本。
  • [ok] URL 命中性质 — §3 的 21 条 URL 全为示例(example.com / remotion.media)或官方文档(remotion.dev),非技能发起的请求。
  • [ok] 外部程序命中性质 — §3 的 12 条命中均为规则中的 npx remotion add 安装示例,不是技能执行。
  • [ok] 网络请求命中性质 — §3 的 5 条 fetch 命中出现在规则代码示例里(calculate-metadata/compositions/import-srt-captions/lottie),属示例代码。
  • [ok] 档位判定复核 — 纯文档规则库,无执行面 → 🟢 green 成立;WebFetch 指引已写入 reason 与 injection_surface。

6结论

  • Remotion 领域知识覆盖广而深,29 个主题一文件一说明。
  • 强规范排除常见渲染陷阱(禁 CSS 动画、staticFile 资产)。
  • 渐进式披露设计,SKILL.md 极短、按需加载。
  • 适合: 用 Remotion(React 视频)开发的用户/agent:需要动画、时序、资产、字幕、转场、图表、3D 等领域最佳实践;把规则库作为上下文知识注入。
    不适合: 非 Remotion 的视频编辑(FFmpeg/After Effects 等);需要直接生成/渲染视频的场合;要求与特定 Remotion 版本严格对应的项目。
    Install Agent-Ready
    ① Verified Mirror 2026-10-10
    Option A · Direct DownloadDownload remotion-best-practices.tar.gz
    sha256: b715379c729d1a4c…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit dd0bf35595.