Remotion Best Practices
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。
Install Remotion
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .claude/skills && cp -r skills-src/remotion .claude/skills/remotion && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .claude/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .agents/skills && cp -r skills-src/remotion .agents/skills/remotion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .agents/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/remotion .cursor/skills/remotion && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .cursor/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/dracohu2025-cloud/draco-skills-collection.git --path remotion--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/remotion .gemini/skills/remotion && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .gemini/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .github/skills && cp -r skills-src/remotion .github/skills/remotion && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .github/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection remotion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/remotion .opencode/skills/remotion && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/remotion into .opencode/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
remotion- GitHub stars
- 227
- Token cost
- ~712 tokens
- SKILL.md length
- 188 words
- Files
- 8 (incl. scripts, references)
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- MIT
At a glance
统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。
- Works in 10 steps: 新建项目 → 本地预览 → 抽关键帧验图 → …
- Tasks that involve Video production
- SKILL.md covers 什么时候用, 先选型，再开做, 当前机器上已验证的基础 and 一句话工作流, plus 5 more sections
- Runs Shell scripts from its folder; calls npx and npm
What it does
Remotion is an agent skill from dracohu2025-cloud/draco-skills-collection. 统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。
Its SKILL.md is about 710 tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `README.md`, `references/local-workflow.md` and `references/pitfalls.md`).
It sits in Media & Creative, covering Video production. It works with Remotion and React. The licence is MIT.
When your agent uses it
- Tasks that involve Video production
Example prompts
- “/remotion”
Requirements
- Node.js
- A Bash shell
Workflow steps
10 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 26e8975. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
npxnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Remotion loads about 712 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 23 tokens; SKILL.md has 188 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from dracohu2025-cloud/draco-skills-collection at commit 26e8975, republished under its MIT licence (© dracohu2025-cloud). 188 words, ~712 tokens.
Download SKILL.mdSave it as
.claude/skills/remotion/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.- name
- remotion
- description
- 统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。
- version
- 1.0.0
- author
- Hermes Agent
- license
- MIT
Remotion
这是 统一入口。以后遇到 Remotion 相关任务，优先加载这个 skill，不要先在 remotion-best-practices 和 remotion-video-local 之间犹豫。
它把两层东西合到一起：
- 领域规则：Remotion 的通用最佳实践、专题规则、常见坑
- 本机工作流：在当前机器上从脚手架、关键帧验图、旁白、字幕、渲染，到飞书交付的整套流程
什么时候用
当任务是下面这些时，优先用 Remotion：
- React 组件驱动的视频
- 模板化视频 / 批量视频
- UI / 卡片 / 仪表盘 / 图表类视频
- 数据驱动的解释视频
- 已知要复用前端组件、样式系统、字体和布局能力
如果任务更像：
- 数学 / 公式 / 几何 / 对象变换讲解 → 先考虑
manim-video - 场景式 TS 动画、时间轴编排、偏 motion graphics → 先考虑
motion-canvas
先选型，再开做
视频任务默认先问这三件事：
- 这是 讲对象怎么变，还是 讲页面这一帧长什么样？
- 这是 一次性演示视频，还是 模板化 / 批量生产视频？
- 主工作流是 React/TS，还是别的动画语言？
如果答案偏向：
- React
- 模板
- 组件复用
- 数据驱动
那就选 Remotion。
当前机器上已验证的基础
- Node / npm 可用
npx create-video@latest可用ffmpeg可用- 本地火山 TTS 可接（见
volcengine-tts-local） - 飞书上传链路可接（见
lark-drive-upload）
一句话工作流
先做静音版，把画面逻辑跑通；再接旁白和字幕；最后渲整片并交付。
快速开始
1. 新建项目
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install2. 本地预览
npx remotion studio3. 抽关键帧验图
mkdir -p renders/stills
npx remotion still src/index.ts CompositionId renders/stills/frame-030.png --frame=30
npx remotion still src/index.ts CompositionId renders/stills/frame-120.png --frame=1204. 渲整片
npx remotion render src/index.ts CompositionId renders/final.mp4核心经验
1. 脚手架优先非交互
不要赌交互流程。
npx create-video@latest --yes --blank --no-tailwind my-video2. 先 still，后整片
先抽关键帧，不要一上来渲完整视频。
3. 小心 Sequence 偏移减两次
常见空白页 bug：
- 顶层
<Sequence from={SECTION}> - 子场景里又写
const local = frame - SECTION
结果就是局部帧被多减一次，后面页面看起来像空的。
4. 中文旁白优先走本地 TTS
短解释视频首版，优先本地火山 TTS，别先搞复杂云服务。
5. 字幕首版优先手写 JSON
短视频别先走自动转写，手写字幕时间段更稳。
6. 长渲染走后台 + 轮询
不要前台闷等。
默认交付路径
A. 静音画面版
- 先完成 composition 结构
npm run lint- 抽关键帧检查信息密度、遮挡、留白、逻辑顺序
B. 再加旁白
- 写
narration.txt - 生成
public/narration.mp3 - 接
<Audio src={staticFile('narration.mp3')} /> - 用实际音频时长反推
durationInFrames
C. 再加字幕
- 手写
Caption[] - 做
CaptionBar - 抽 2~3 张带字幕 still 图
- 检查是否压住主要内容
D. 最后整片渲染 + 交付
- 后台渲染 MP4
- 校验时长 / 文件大小 / 可播放性
- 上传飞书并给最终链接
参考文件
按需加载：
references/selection-guide.md：什么时候选 Remotion，什么时候别选references/local-workflow.md：本机端到端流程references/pitfalls.md：高频坑位references/rules-index.md：专题规则入口templates/caption-bar.tsx：最小字幕条模板scripts/setup.sh：环境检查
旧 skill 关系
remotion-best-practices：保留为历史知识来源remotion-video-local：保留为历史本机 SOP
但以后 优先加载 remotion。旧 skill 只作为参考，不再作为首选入口。
© dracohu2025-cloud, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 7 other files (scripts, references) in remotion of dracohu2025-cloud/draco-skills-collection.
- SKILL.md
- README.md
- references/local-workflow.md
- references/pitfalls.md
- references/rules-index.md
- references/selection-guide.md
- scripts/setup.sh
- templates/caption-bar.tsx
Open the folder on GitHubat commit 26e8975
Compare with similar skills
Remotion next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Remotion this skilldracohu2025-cloud/draco-skills-collection | 227 | — | ~712 | Automated safety check: Pass | MIT | |
| Remotion Best Practiceslyonjs/shortvid.io | 147 | 33 repos | ~1k | Automated safety check: Pass | MIT | |
| Remotion to HyperFrames Porterheygen-com/hyperframes | 59k | 3 repos | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Anything2explainerVincentwei1021/anything2explainer | 2.4k | — | ~2.7k | Automated safety check: Pass | Custom licence | |
| Remotion BitsMarve10s/Better-Fullstack | 754 | 1 repos | ~8.2k | Automated safety check: Pass | MIT | |
| Remotion Motion Graphicshaidrrrry/claude-remotion-skill | 299 | — | ~2k | Automated safety check: Pass | MIT |
Similar skills
Remotion to HyperFrames Porter
heygen-com/hyperframes
Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.
Anything2explainer
Vincentwei1021/anything2explainer
给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。Turn any topic into a narrated…
Remotion Bits
Marve10s/Better-Fullstack
Animation components and utilities for Remotion video projects.
Remotion Motion Graphics
haidrrrry/claude-remotion-skill
Create and edit professional motion graphics videos with Remotion (React-based video).
Create Remotion Geist
Marve10s/Better-Fullstack
Create Remotion videos using the Geist design system aesthetic.
More from dracohu2025-cloud/draco-skills-collection
All 27 skills in this repoAI News Bitable Archive Dingtalk
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when parsing a DingTalk daily news document and syncing title, date, Top 3, summary, conclusion, document link, and status into a DingTalk multidimensional table.
Feishu Seedance Video Pipeline
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when running a Feishu/Lark Base-centered Seedance video production pipeline: inspect/backfill the Base row, create/reference assets, build Row-24-style Chinese Seedance…
Motion Canvas
dracohu2025-cloud/draco-skills-collection
Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview.
News Aggregator Skill
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when collecting public news candidates from Hacker News, GitHub Trending, Hugging Face papers, and other web sources for briefings and daily reports.
Open Design To Open Slide
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when mining Open Design visual systems and converting them into Open Slide React template kits or standalone 20-page template albums, with build, deployment, screenshot QA…
Daily AI Agent Aigc Top News Dingtalk
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when generating a daily 24h AI / Agent / AIGC top-news briefing, publishing it as a DingTalk document, validating it, and optionally archiving it to a DingTalk…
Related
Categories
Questions about Remotion
What does Remotion do?
统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。. Remotion is an agent skill from dracohu2025-cloud/draco-skills-collection.
When should I use Remotion?
Remotion fits situations like: tasks that involve Video production.
How do I install Remotion in Claude Code?
Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a claude-code`. Or copy the skill folder (remotion in dracohu2025-cloud/draco-skills-collection) into .claude/skills/remotion in your project. Claude Code loads it when a task matches its description.
How do I install Remotion in Codex?
Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a codex`. Or copy the skill folder (remotion in dracohu2025-cloud/draco-skills-collection) into .agents/skills/remotion in your project. Codex loads it when a task matches its description.
Can I use Remotion in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dracohu2025-cloud/draco-skills-collection --skill remotion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remotion, .gemini/skills/remotion, .github/skills/remotion and .opencode/skills/remotion in your project.
What does Remotion need to run?
Going by SKILL.md and its folder, Remotion needs a shell for the scripts in its folder and the command-line tools its instructions call (npx and npm). Our summary lists: Node.js; A Bash shell.
Does Remotion access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Remotion safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Remotion use?
Remotion is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Remotion use?
About 712 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.
What are the alternatives to Remotion?
Skills that share tags, products or a category with Remotion: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), Remotion to HyperFrames Porter (heygen-com/hyperframes, 59k stars), Anything2explainer (Vincentwei1021/anything2explainer, 2.4k stars) and Remotion Bits (Marve10s/Better-Fullstack, 754 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Remotion?
dracohu2025-cloud (a GitHub user) maintains it in dracohu2025-cloud/draco-skills-collection, which has 227 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 17, 2026.
Source: dracohu2025-cloud/draco-skills-collection on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.