Creates programmatic video with React via Remotion — compositions, sequences, and motion graphics animated with useCurrentFrame() and rendered to MP4
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.
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 LIFEOS_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.
What you say to your DA, and what the Remotion skill actually does.
The thinking, frameworks, and architecture that distinguish this skill from a generic version of the same task.
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 ~/Downloads/ 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.
Tools/Theme.tsuseCurrentFrame() only~/Downloads/ firstbunx always (never npx)Render command:
bunx remotion render {composition-id} ~/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 ~/Downloads/ for preview
Each workflow is one job the skill runs. The trigger phrases route your request to the right one — this is the skill's routing table.
Workflows/ContentToAnimation.md animate this, create animations for, video overlay
Workflows/GeneratedContentVideo.md generate video, AI video, content to video, make a short
Deterministic executables the workflows call — the code that does the real work, not prompt scaffolding.
Render.tsTheme.tsSay any of these to your DA and LifeOS activates the Remotion skill automatically:
Or invoke explicitly:
Skill("Remotion")Auxiliary files the skill loads at runtime — frameworks, guides, configs.
The thinkers, books, frameworks, and research this skill is built on. The ideas belong to them — the integration belongs to LifeOS.
Install LifeOS on your machine — your DA gets the Remotion skill plus 46 others, all hooked into one Life OS.