Skip to content
cccskills
FreePublished on GitHub

Remotion

Create explainer clips, short videos, and animated overlays with React code. Define scenes and motion by frame number, then render an MP4 that can be regenerated after changes to the content, timing, or visual design.

OriginalShow the original description

Creates programmatic video with React via Remotion — compositions, sequences, and motion graphics animated with useCurrentFrame() and rendered to MP4. USE WHEN video, animation, motion graphics, video rendering, React video, render video, animate content, make a short, create animations, video overlay, explainer video, animated explainer, content to video, programmatic video. NOT FOR static images, diagrams, or illustrations (use Art), tight-cut filler removal from raw talking-head recordings (that is video editing, not motion graphics), or audio-only podcast cleaning (use AudioEditor).

See how to install

Good for

  • Turn a process explanation into an animated video
  • Create a short video from supplied content
  • Build animated overlays for video
  • Update content and render the video again

Files included (41)

  • SKILL.md5.2 KB
  • ArtIntegration.md2.8 KB
  • CriticalRules.md4.4 KB
  • Patterns.md3.4 KB
  • Tools/package.json582 B
  • Tools/Ref-3d.md2.1 KB
  • Tools/Ref-ai-pipeline.md4.4 KB
  • Tools/Ref-animations.md790 B
  • Tools/Ref-assets.md1.6 KB
  • Tools/Ref-audio.md3.6 KB
  • Tools/Ref-calculate-metadata.md2.9 KB
  • Tools/Ref-can-decode.md1.5 KB
  • Tools/Ref-charts.md1.7 KB
  • Tools/Ref-compositions.md3.4 KB
  • Tools/Ref-display-captions.md3.5 KB
  • Tools/Ref-elevenlabs-captions.md2.2 KB
  • Tools/Ref-extract-frames.md5.4 KB
  • Tools/Ref-fonts.md3.2 KB
  • Tools/Ref-get-audio-duration.md1.3 KB
  • Tools/Ref-get-video-dimensions.md1.6 KB
  • Tools/Ref-get-video-duration.md1.3 KB
  • Tools/Ref-gifs.md3.8 KB
  • Tools/Ref-images.md2.9 KB
  • Tools/Ref-import-srt-captions.md1.9 KB
  • Tools/Ref-lambda.md3.7 KB
  • Tools/Ref-lottie.md1.6 KB
  • Tools/Ref-measuring-dom-nodes.md974 B
  • Tools/Ref-measuring-text.md2.8 KB
  • Tools/Ref-sequencing.md2.3 KB
  • Tools/Ref-tailwind.md422 B
  • Tools/Ref-text-animations.md614 B
  • Tools/Ref-timing.md4.1 KB
  • Tools/Ref-transcribe-captions.md850 B
  • Tools/Ref-transitions.md3.5 KB
  • Tools/Ref-trimming.md1.2 KB
  • Tools/Ref-videos.md3.8 KB
  • Tools/Render.ts13.3 KB
  • Tools/Theme.ts4.5 KB
  • Tools/tsconfig.json459 B
  • Workflows/ContentToAnimation.md23.3 KB
  • Workflows/GeneratedContentVideo.md4.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

🚨 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Compare a component's own design needs with the goals of the larger system through three structured passes. The result identifies conflicts, recommends an appropriate scope, and assesses whether the proposed design fits the whole.

  • Choosing between a service, a library, and inline code
  • Comparing feature requests with product goals
  • Checking how new components fit an existing system
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

Aphorisms

FreeSummary

Find quotes that fit a text’s themes, with attribution and a short reason for each suggestion. Add sourced quotes, research thinkers, and organize a quote collection by theme and usage history to avoid repetition.

  • Finding a fitting quote for a newsletter
  • Saving sourced quotes without duplicates
  • Researching a thinker’s quotes by theme
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

Apify

FreeSummary

Collect social posts, business listings, and product reviews through Apify actors, ready-made data collection tools. Filter results by date, rating, or engagement in code before sending relevant records to the AI for research or lead generation.

  • Find competitors' most popular social posts
  • Build a contact list of local businesses
  • Extract recent negative Amazon reviews
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

Art

FreeSummary

Create blog illustrations, technical diagrams, comparisons, comics, and icons through workflows tailored to each format. The skill guides composition, color, and model selection, then stages generated images for review before they are used in a project.

  • Creating blog header illustrations
  • Explaining a system with a technical diagram
  • Visualizing comparisons and timelines
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

ArXiv

FreeSummary

Find arXiv papers by topic, research category, or paper ID. Retrieve titles, authors, abstracts, and links, check new submissions, and add AlphaXiv's AI-generated overviews when available to help decide which papers to read.

  • Checking new AI and machine learning papers
  • Finding papers on a specific research topic
  • Looking up a paper by its ID or arXiv URL
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

AudioEditor

FreeSummary

Clean spoken recordings by transcribing words, identifying filler and false starts, and joining cuts with short audio fades. Preview proposed edits, reduce breaths, repair noise-gate clicks, and optionally use Cleanvoice for additional cloud processing.

  • Removing filler words and long silences from a podcast
  • Reviewing proposed edits before applying them
  • Repairing clicks caused by a noise gate
danielmiessler/LifeOS19.5KUpdated Sep 4, 2026

See all skills by danielmiessler

Report a problem with this skill