Home / All Skills / Content & Media Creation / remotion-best-practices
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · freestylefly/canghe-skills

remotion-best-practices

Best practices for Remotion - Video creation in React

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author freestyleflyGitHub freestylefly/canghe-skills ↗License MIT（仓库根 LICENSE）Commit dd0bf35595
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

SKILL.md serves purely as an index/router: instructing the model to read individual rule files by topic for detailed explanations and code examples.

skills/remotion-best-practices/SKILL.md
Read individual rule files for detailed explanations and code examples:
What is happening here: Adopts progressive disclosure, keeping SKILL.md extremely concise (44 lines).

29 rule files are listed individually, each paired with a one-sentence topic description, forming a searchable knowledge map.

skills/remotion-best-practices/SKILL.md
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
What is happening here: Breaks down domain knowledge into one file per topic to facilitate on-demand loading.

Animations must be driven by useCurrentFrame(), with time defined in seconds and multiplied by fps.

skills/remotion-best-practices/rules/animations.md
All animations MUST be driven by the `useCurrentFrame()` hook.
What is happening here: Establishes the single source of truth for driving Remotion animations.

CSS transition/animation and Tailwind animation classes are prohibited to prevent incorrect rendering.

skills/remotion-best-practices/rules/animations.md
CSS transitions or animations are FORBIDDEN - they will not render correctly.
What is happening here: Excludes implementation patterns that conflict with the frame-by-frame rendering model.

Assets must be placed in public/ and referenced via staticFile(), with components ensuring they are fully loaded before rendering.

skills/remotion-best-practices/rules/assets.md
You MUST use `staticFile()` to reference files from the `public/` folder:
What is happening here: Standardizes asset referencing to prevent broken paths when deploying to subdirectories.

Media metadata is standardized via Mediabunny: duration, dimensions, decodability, and frame extraction, universally compatible with Browser/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.
What is happening here: Provides a cross-environment media probing solution.

Audio-to-subtitles provides three official paths (local whisper.cpp / browser WASM / OpenAI API), each with distinct trade-offs.

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.
What is happening here: Categorizes transcription solutions by cost and environment differences, allowing the model to choose based on the scenario.

Tailwind rules require installation and enablement first, instructing the model to fetch official documentation using 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.
What is happening here: The only instruction in the rule files that explicitly directs the host to fetch external documentation online, serving as guidance rather than an execution by the skill itself.

2Core Capabilities

01Routing across 29 topic rule bases: on-demand loading for 3d/animations/assets/audio/...
02Animation implementation standards: useCurrentFrame-driven, seconds × fps timing, prohibition of CSS/Tailwind animations
03Asset imports: public/ + staticFile(), images/videos/audio/fonts, remote URL support
04Captions: .srt import (@remotion/captions), TikTok-style display, word-by-word highlighting
05Media probing (Mediabunny): duration, dimensions, decodability, frame extraction
06Three audio transcription approaches: whisper.cpp / whisper-web / openai-whisper
07Transitions and sequencing: @remotion/transitions, Sequence delay/trimming/duration limits
08Integration topics including Charts, 3D, Lottie, Tailwind, etc.

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external impact.
Audit Notes: Verdict 🟢 green: All 33 files are markdown documentation and .tsx examples. §3 scan indicates no script execution, no self-initiated network requests, no credential access, and no disk writes. References to npx/fetch/WebFetch in the rules are documentation examples rather than an execution surface.

5Second-Pass Verification

  • [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。

6Verdict & Scenarios

  • Broad and deep Remotion domain knowledge coverage, with 29 topics documented one per file.
  • Strict specifications eliminating common rendering pitfalls (prohibiting CSS animations, enforcing staticFile for assets).
  • Progressive disclosure design: SKILL.md remains extremely concise and loads content on demand.
    • Best for: Users/agents developing with Remotion (React-based video creation): needing best practices in animations, sequencing, assets, captions, transitions, charts, 3D, etc.; injecting rule bases as context knowledge.
    Not for: Non-Remotion video editing (FFmpeg/After Effects, etc.); scenarios requiring direct video generation/rendering; projects requiring strict adherence to a specific Remotion version.
    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
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit dd0bf35595.