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(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:
Option B · Copy Guide for Agentb715379c729d1a4c…agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit dd0bf35595.