mcpField
R
Remotion

Remotion

github.com/danielmiessler创意与媒体19.7k129 次安装3 天前更新
代码仓库

关于 Remotion

Remotion 技能通过 React 代码创建并渲染视频，面向制作解说短片和动态图形的用户。它以帧驱动动画，并提供 LIFEOS 主题集成及工作流指引。

主要功能

  1. 01用 React 定义视频构图
  2. 02按帧驱动动画
  3. 03渲染 MP4 视频
  4. 04集成 LIFEOS 主题
  5. 05提供动画与视频工作流

适用场景

  1. 01将内容制作成动画
  2. 02创建解说视频
  3. 03制作视频叠加层

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/danielmiessler/lifeos --skill remotion

安装后在 Claude Code 中输入/remotion确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

Patterns.md
CriticalRules.md
ArtIntegration.md
Tools/
Ref-animations.md
Ref-audio.md
Ref-calculate-metadata.md
Ref-3d.md
Ref-assets.md
Ref-ai-pipeline.md
Ref-can-decode.md
Ref-compositions.md
Ref-elevenlabs-captions.md
Ref-get-video-duration.md
Ref-charts.md
Ref-display-captions.md
Ref-get-video-dimensions.md
Ref-fonts.md
Ref-gifs.md
Ref-extract-frames.md
Ref-get-audio-duration.md
Ref-images.md
Ref-lambda.md
Ref-import-srt-captions.md
Ref-lottie.md
Ref-text-animations.md
Ref-tailwind.md
Ref-measuring-dom-nodes.md
Ref-measuring-text.md
Ref-timing.md
Ref-sequencing.md

详细介绍

🚨 必须：语音通知（执行任何操作前必须完成）

调用此技能时，必须先发送此通知，然后才能进行任何其他操作。

  1. 发送语音通知：

    curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the WORKFLOWNAME workflow in the Remotion skill to ACTION"}' \
  > /dev/null 2>&1 &

  2. 输出文本通知：

    Running the **WorkflowName** workflow in the **Remotion** skill to ACTION...

此步骤不可省略。调用技能后立即执行此 curl 命令。

Remotion

功能

使用 React 以编程方式创建视频。你在代码中描述合成内容；Remotion 会将其渲染为 MP4。每一帧都由 useCurrentFrame() 驱动，而非 CSS 动画，因此输出具有确定性且可复现。它会引入 LifeOS 主题常量和 Art 技能的美学风格，以保持视觉一致性，并先将输出暂存到 $LIFEOS_DOWNLOADS_DIR（未设置时默认为 ~/Downloads/），供预览使用。

要解决的问题

通常，制作一段简短的解说视频或动态图形片段，需要使用视频编辑器和时间轴，并手动设置大量关键帧——速度慢、难以进行版本管理，而且内容变更后无法重新生成。如果脚本发生变化，就必须手动重新剪辑。将视频构建为代码可以解决这个问题：合成内容是一个 React 组件，动画由帧编号决定，修改后只需运行一条命令即可重新渲染。此技能是视频的代码工作流，就像 Art 技能是图像的代码工作流一样。

工作原理

使用 React 定义合成内容，通过 useCurrentFrame() 制作动画，并使用 bunx remotion render 进行渲染。渲染需要大量 CPU 资源，因此会在后台运行。渲染命令、主题集成和模式文件请参阅下方的快速参考和工具。

自定义

执行前，请检查用户是否在以下位置设置了自定义配置： ~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Remotion/

工作流路由

工作流触发语句文件
ContentToAnimation“将这个制作成动画”、“为……创建动画”、“视频叠加层”Workflows/ContentToAnimation.md
GeneratedContentVideo“生成视频”、“AI 视频”、“将内容转为视频”、“制作一段短片”Workflows/GeneratedContentVideo.md

快速参考

  • **主题：**始终使用 Tools/Theme.ts 中的 LIFEOS_THEME
  • **Art 集成：**创建内容前加载 Art 偏好设置
  • **重要：**禁止使用 CSS 动画——只能使用 useCurrentFrame()
  • **输出：**始终先输出到 $LIFEOS_DOWNLOADS_DIR（未设置时默认为 ~/Downloads/）
  • **CLI：**始终使用 bunx（绝不使用 npx）

渲染命令：

bunx remotion render {composition-id} "${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}"/{name}.mp4

完整文档

  • Art 集成：ArtIntegration.md——主题常量、颜色映射
  • 常见模式：Patterns.md——代码示例、预设
  • 重要规则：CriticalRules.md——禁止事项
  • 详细参考：Tools/Ref-*.md——31 个模式文件，涵盖 Remotion 核心功能、Lambda、ElevenLabs 字幕和 AI 流水线

工具

工具用途
Tools/Render.ts渲染、列出合成内容、创建项目
Tools/Theme.ts从 Art 派生的 LifeOS 主题常量

链接

注意事项

  • **基于 React 的视频——组件模式不同于 Web React。**Remotion 有专用的合成、序列和计时 API。
  • **渲染需要大量 CPU 资源。**渲染命令请使用 run_in_background: true。
  • 输出会先保存到 $LIFEOS_DOWNLOADS_DIR（未设置时默认为 ~/Downloads/），供预览使用。与图像相同。
  • 不适用于静态图像——插画、图表和缩略图请使用 Art 技能。

示例

示例 1：创建动画解说视频

User: "create a video showing how the Algorithm works"
→ Builds React composition with Remotion
→ Defines sequences, animations, timing
→ Renders to MP4 in background
→ Output to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) for preview

执行日志

完成任何工作流后，追加一条 JSONL 记录：

echo '{"ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","skill":"Remotion","workflow":"WORKFLOW_USED","input":"8_WORD_SUMMARY","status":"ok|error","duration_s":SECONDS}' >> ~/.claude/LIFEOS/MEMORY/SKILLS/execution.jsonl

将 WORKFLOW_USED 替换为所执行的工作流，将 8_WORD_SUMMARY 替换为简要的输入描述，并将 SECONDS 替换为大致的实际耗时。如果工作流失败，则记录 status: "error"。

评论

支持 Markdown