TypingMindTypingMindThe best frontend for AI
Remotion logo

Remotion

Community
dracohu2025-cloud
remotion

统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。

Overview

Publisherdracohu2025-cloud
Repositorydraco-skills-collection
Skill nameremotion
Stars
228
Forks
37
Bundled files
6
LicenseMIT
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 6 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by dracohu2025-cloud on GitHub. Read the source before you install it.

Installation

Install the Remotion AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/Ark%20Agent%20Plan%20Version/remotion
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Use it in TypingMind

Enable Remotion in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Remotion on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Remotion is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Remotion

这是 统一入口。以后遇到 Remotion 相关任务，优先加载这个 skill，不要先在 remotion-best-practices 和 remotion-video-local 之间犹豫。

它把两层东西合到一起：

  1. 领域规则：Remotion 的通用最佳实践、专题规则、常见坑
  2. 本机工作流：在当前机器上从脚手架、关键帧验图、旁白、字幕、渲染，到飞书交付的整套流程

什么时候用

当任务是下面这些时，优先用 Remotion：

  • React 组件驱动的视频
  • 模板化视频 / 批量视频
  • UI / 卡片 / 仪表盘 / 图表类视频
  • 数据驱动的解释视频
  • 已知要复用前端组件、样式系统、字体和布局能力

如果任务更像：

  • 数学 / 公式 / 几何 / 对象变换讲解 → 先考虑 manim-video
  • 场景式 TS 动画、时间轴编排、偏 motion graphics → 先考虑 motion-canvas

先选型，再开做

视频任务默认先问这三件事：

  1. 这是 讲对象怎么变，还是 讲页面这一帧长什么样？
  2. 这是 一次性演示视频，还是 模板化 / 批量生产视频？
  3. 主工作流是 React/TS，还是别的动画语言？

如果答案偏向：

  • React
  • 模板
  • 组件复用
  • 数据驱动

那就选 Remotion。

当前机器上已验证的基础

  • Node / npm 可用
  • npx create-video@latest 可用
  • ffmpeg 可用
  • 本地火山 TTS 可接（见 volcengine-tts-local）
  • 飞书上传链路可接（见 lark-drive-upload）

一句话工作流

先做静音版，把画面逻辑跑通；再接旁白和字幕；最后渲整片并交付。

快速开始

1. 新建项目

bash
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install

2. 本地预览

bash
npx remotion studio

3. 抽关键帧验图

bash
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=120

4. 渲整片

bash
npx remotion render src/index.ts CompositionId renders/final.mp4

核心经验

1. 脚手架优先非交互

不要赌交互流程。

bash
npx create-video@latest --yes --blank --no-tailwind my-video

2. 先 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 只作为参考，不再作为首选入口。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Remotion AI skill do?

统一入口的 Remotion skill：用于 React/TS 视频制作、关键帧验图、中文旁白、字幕、渲染与交付。遇到 Remotion 视频需求时优先加载它。

Why use Remotion on TypingMind?

Because you install it once and use it with any model. Remotion is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Remotion in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/Ark%20Agent%20Plan%20Version/remotion. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Remotion?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Remotion?

As many as you like. As long as a model supports skills, you can use Remotion with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Remotion AI skill free?

Yes. It is published on GitHub by dracohu2025-cloud under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Weights And Biases

NousResearch
OrganizationPopular

W&B: log ML experiments, sweeps, model registry, dashboards.

53.5K
250.4K
3 files
View
NousResearch logo

Nemo Curator

NousResearch
OrganizationPopular

Curate LLM training data: dedupe, filter, PII redaction.

53.5K
250.4K
2 files
View
NousResearch logo

Obliteratus

NousResearch
OrganizationPopular

OBLITERATUS: abliterate LLM refusals (diff-in-means).

53.5K
250.4K
5 files
View
f logo

Prompt Lookup

f
CommunityPopular

Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.

21.9K
170.7K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇