Creates programmatic video with React via Remotion — compositions, sequences, and motion graphics animated with useCurrentFrame() and rendered to MP4. USE WHEN
复制下面这句话,粘贴给 Claude Code、Codex、Cursor 等 AI 编程工具,它会读取安装说明并在你确认后完成安装。
请阅读 https://ai.atlankj.com/install/asset/gh-remotion-ea3d9478a509 ,按照其中的说明把「Remotion」安装到你(当前 AI 工具)中。执行前先告诉我将运行的命令和写入的位置,等我确认。
查看 AI 将读取的安装说明正在读取 GitHub 原文…
内容来自 GitHub 原始文件,由原作者维护。在 GitHub 查看
You MUST send this notification BEFORE doing anything else when this skill is invoked.
Send voice notification:
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 &
Output text notification:
Running the **WorkflowName** workflow in the **Remotion** skill to ACTION...
This is not optional. Execute this curl command immediately upon skill invocation.
Creates video programmatically with React. You describe the composition in code; Remotion renders it to MP4. Every frame is driven by useCurrentFrame() rather than CSS animation, so the output is deterministic and reproducible. It pulls LifeOS theme constants and Art-skill aesthetics for visual consistency, and stages output to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) for preview first.
Making a short explainer or motion-graphics clip the usual way means a video editor, a timeline, and a lot of manual keyframing — slow, hard to version, and impossible to regenerate when the content changes. If the script changes, you redo the edit by hand. Building video as code fixes that: the composition is a React component, animation is a function of the frame number, and re-rendering after an edit is one command. This skill is the code path for video, the way the Art skill is the code path for images.
Define a composition as React, animate with useCurrentFrame(), render with bunx remotion render. Rendering is CPU-intensive, so it runs in the background. See the Quick Reference and Tools below for the render command, theme integration, and pattern files.
Before executing, check for user customizations at:
~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Remotion/
| Workflow | Trigger | File |
|---|---|---|
| ContentToAnimation | "animate this", "create animations for", "video overlay" | Workflows/ContentToAnimation.md |
| GeneratedContentVideo | "generate video", "AI video", "content to video", "make a short" | Workflows/GeneratedContentVideo.md |
Tools/Theme.tsuseCurrentFrame() only$LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) firstbunx always (never npx)Render command:
bunx remotion render {composition-id} "${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}"/{name}.mp4
ArtIntegration.md - theme constants, color mappingPatterns.md - code examples, presetsCriticalRules.md - what NOT to doTools/Ref-*.md - 31 pattern files covering core Remotion + Lambda + ElevenLabs captions + AI pipeline| Tool | Purpose |
|---|---|
Tools/Render.ts | Render, list compositions, create projects |
Tools/Theme.ts | LifeOS theme constants derived from Art |
run_in_background: true for render commands.Example 1: Create animated explainer
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
After completing any workflow, append a single JSONL entry:
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
Replace WORKFLOW_USED with the workflow executed, 8_WORD_SUMMARY with a brief input description, and SECONDS with approximate wall-clock time. Log status: "error" if the workflow failed.