Creative Standard

Remotion

Creates programmatic video with React via Remotion — builds compositions, sequences, and motion graphics rendered to MP4.

02
Workflows
03
References
14
Triggers
medium
Effort

The Problem

Creating a video from content typically means jumping between tools — a script editor, a design app, a render farm, and a timeline editor — and the output drifts from your visual system at every handoff. A generic AI can write a script or describe an animation, but it can't produce a rendered MP4 that matches your brand, honors your theme colors, and plays correctly the first time. The gap between 'here's what the video should look like' and an actual video file is almost entirely manual labor.

How This Skill Approaches It

Remotion builds video as React components, which means the full expressive power of code drives the animation instead of keyframe GUIs. The skill wraps this with PAI_THEME constants from Theme.ts so every composition inherits your established color system automatically. Two workflows cover the main cases: ContentToAnimation takes existing text, diagrams, or data and builds timed sequences around it; GeneratedContentVideo starts from an idea and produces both the content and the animation together. All animation runs through useCurrentFrame() — no CSS animations, because React video has different semantics. Render.ts handles the CLI layer: listing compositions, creating projects, and kicking off bunx remotion render jobs that run in the background and land in ~/Downloads/ for review before you commit to anything.

  • Uses useCurrentFrame() for all animation (no CSS animations)
  • Integrates PAI_THEME constants from Theme.ts and Art skill aesthetic preferences for visual consistency
  • Render command: bunx remotion render {composition-id} ~/Downloads/{name}.mp4
  • Output always to ~/Downloads/ for preview first
  • Tools: Render.ts (render, list compositions, create projects) and Theme.ts
  • Reference docs cover Remotion core, Lambda rendering, ElevenLabs captions, AI pipeline
  • Rendering is CPU-intensive — use run_in_background
  • Two primary workflows: ContentToAnimation (animate existing content) and GeneratedContentVideo (AI content to video / make a short)
Not for static images, diagrams, or illustrations (use Art), tight-cut filler removal from raw recordings (use Video), or audio-only podcast cleaning (use AudioEditor)

In Action

What you say to your DA, and what the Remotion skill actually does.

  • You say "turn this blog post into a short animated explainer video"
    Runs ContentToAnimation workflow: builds a React composition in Remotion with timed text sequences and transitions using useCurrentFrame(), applies PAI_THEME constants, renders to MP4 in the background via Render.ts, and stages the file in ~/Downloads/ for preview.
  • You say "make a 60-second video explaining how the Algorithm works"
    Runs GeneratedContentVideo workflow: generates the narrative structure, builds matching React sequences with motion graphics, renders with bunx remotion render to ~/Downloads/, CPU-intensive work runs via run_in_background.

Inside the Skill

The thinking, frameworks, and architecture that distinguish this skill from a generic version of the same task.

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 PAI theme constants and Art-skill aesthetics for visual consistency, and stages output to ~/Downloads/ 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.

Quick Reference

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

Render command:

bunx remotion render {composition-id} ~/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

Tool Purpose
Tools/Render.ts Render, list compositions, create projects
Tools/Theme.ts PAI theme constants derived from Art

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 ~/Downloads/ 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 ~/Downloads/ for preview

Workflows · 2

  1. 01
    `Workflows/ContentToAnimation.md` Workflows/`Workflows/ContentToAnimation.md`.md

    animate this, create animations for, video overlay

  2. 02
    `Workflows/GeneratedContentVideo.md` Workflows/`Workflows/GeneratedContentVideo.md`.md

    generate video, AI video, content to video, make a short

How to Invoke

Say any of these to your DA and PAI activates the Remotion skill automatically:

  • "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"

Or invoke explicitly:

Skill("Remotion")

References · 3

Auxiliary files the skill loads at runtime — frameworks, guides, configs.

  • ArtIntegration
  • CriticalRules
  • Patterns

References & Credits

The thinkers, books, frameworks, and research this skill is built on. The ideas belong to them — the integration belongs to PAI.

Want PAI to do this for you?

Install PAI on your machine — your DA gets the Remotion skill plus 44 others, all hooked into one Life OS.