New to Claude Skills? Learn how to install them β†’

danielmiessler on GitHub

Remotion

Free

Programmatically create videos with React.

Get this skill

Free Β· Opens the source repo

What Remotion does

Remotion is a powerful tool that allows developers to create videos programmatically using React. By defining video compositions as React components, users can leverage the useCurrentFrame() hook to animate their content frame by frame, resulting in deterministic and reproducible outputs. The rendered videos are saved as MP4 files, making it easy to share and distribute the final product. This skill integrates seamlessly with the LifeOS environment, pulling in theme constants and aesthetics from the Art skill to ensure visual consistency across projects.

Traditional video editing often requires manual keyframing and a timeline, which can be slow and cumbersome, especially when content needs to be updated frequently. With Remotion, the entire video composition is treated as code, allowing for quick edits and re-renders with minimal effort. If the script or content changes, users can simply modify their React component and re-render the video with a single command, significantly speeding up the workflow.

The skill is particularly useful for creating explainer videos, motion graphics, and other animated content where programmatic control over animations is beneficial. It is designed for developers and designers who are comfortable working with React and want to automate their video production process. By using Remotion, users can focus on the creative aspects of their projects while relying on code to handle the rendering and animation details.

When to use it

Use Remotion when you need to create animated videos or motion graphics programmatically, especially when working with React.

When not to use it

This skill is not suitable for static image creation, traditional video editing, or audio-only projects.

What you can build with it

Create Animated Explainer

Build a React composition that visually explains a concept, using animations driven by the current frame.

Automate Video Production

Modify content in your React component and quickly re-render the video, streamlining the production process.

Integrate with LifeOS Themes

Utilize LifeOS theme constants for consistent visual design across your video projects.

How to install Remotion

View source

1. Install with the skills CLI

npx skills add danielmiessler/lifeos/Remotion --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by danielmiessler

🚨 MANDATORY: Voice Notification (REQUIRED BEFORE ANY ACTION)

You MUST send this notification BEFORE doing anything else when this skill is invoked.

  1. 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 &
    
  2. 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.

Remotion

What It Does

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.

The Problem

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.

How It Works

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.

Customization

Before executing, check for user customizations at: ~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Remotion/

Workflow Routing

WorkflowTriggerFile
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

Quick Reference

  • Theme: Always use LIFEOS_THEME from Tools/Theme.ts
  • Art Integration: Load Art preferences before creating content
  • Critical: NO CSS animations - use useCurrentFrame() only
  • Output: Always to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) first
  • CLI: bunx always (never npx)

Render command:

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

Full Documentation

  • Art integration: ArtIntegration.md - theme constants, color mapping
  • Common patterns: Patterns.md - code examples, presets
  • Critical rules: CriticalRules.md - what NOT to do
  • Detailed reference: Tools/Ref-*.md - 31 pattern files covering core Remotion + Lambda + ElevenLabs captions + AI pipeline

Tools

ToolPurpose
Tools/Render.tsRender, list compositions, create projects
Tools/Theme.tsLifeOS theme constants derived from Art

Links

Gotchas

  • React-based video β€” component patterns differ from web React. Remotion has specific composition, sequence, and timing APIs.
  • Rendering is CPU-intensive. Use run_in_background: true for render commands.
  • Output goes to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) first for preview. Same as images.
  • NOT for static images β€” use Art skill for illustrations, diagrams, thumbnails.

Examples

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

Execution Log

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.

Frequently asked questions about Remotion

Similar skills