Remotion Agent Skills

The Decision

Remotion Agent Skills brings the Remotion framework to Claude Code. It allows you to create professional motion graphics and data-driven videos by simply describing them in natural language. Claude generates the React component code, and Remotion renders it to an MP4.

It replaces After Effects, manual video editing, and hand-coded frame-by-frame animation.

Our testing rates it 9.3/10. It is the most viral video generation skill of 2026 (6M+ views, 25k+ installs first week).

Who It’s For

• Developers creating product demo videos quickly
• Data teams making animated charts and graphs
• Marketing teams needing brand-consistent motion graphics
• Educators making algorithmic explanations

Who Should Skip

• Talking-head tutorial creators (use chengfeng-videocut-skills)
• Live-action footage editors
• Simple slide-show creators (overkill)

Why This Skill Matters

Creating motion graphics traditionally requires learning After Effects or similar tools, manually keyframing each property, and waiting for renders. Remotion inverts this: you describe the video, Claude writes the code, and Remotion renders it. The code is reproducible, version-controllable, and easy to iterate. For data-driven videos, the ability to tie the animation directly to a dataset is transformative.

The Workflow

Natural language prompt
        |
        v
   Claude + Remotion Skill
   Writes React component:
   - Composition setup
   - Sequences and keyframes
   - Data-driven animations
   - Brand styling
        |
        v
   Local Preivew
   Instant browser preview
   → Claude adjusts based on your feedback
        |
        v
   Render
   Remotion renders MP4
   - Local or Remotion Cloud
        |
        v
   Output
   Final video file ready

Core Features

1. Code-to-Video
   Describe the video, Claude outputs a Remotion React component. No timeline, no manual keyframing. Verdict: excellent.

2. Data Visualization
   Directly use JavaScript/TypeScript data to drive animations. Perfect for animated bar races, line graphs, and scatter plots that update over time. Verdict: excellent.

3. Built-in Transitions & Animations
   A massive library of spring animations, interpolations, sequence utilities, and transition components. Verdict: great.

4. Lambda Rendering (Remotion Cloud)
   Offload renders to the cloud. No need for a powerful local GPU; get results faster with parallel rendering. Verdict: great.

5. Real-time Preview
   Browser-based preview updates instantly as you edit the code. No waiting for full renders during iteration. Verdict: great.

Hands-On

Installation:

npx skills add remotion

First video — Product launch teaser (30s):

Using Remotion skill, create a 30-second product launch video.
Product: "AI Agent Studio"
Key features: "plan tasks", "delegate to subagents", "real-time monitoring"
Style: "tech blue theme, smooth ease-out transitions, clean typography"
Output: 1080x1920 vertical MP4

Claude will generate a Video.tsx file. Preview in browser:

npx remotion render src/Video.tsx out/video.mp4

For cloud rendering (faster):

npx remotion upload src/Video.tsx
# Get a render ID, poll until complete, then download

Data-driven video example:

Using Remotion, create a bar chart race showing the top 5 programming language popularity from 2015 to 2025.
Data format: [Year, Language, Percentage] as JavaScript array.
Animation: bars grow smoothly when language gains share.
Output: 60 seconds, 1920x1080.

Real-World Case Study: Building a Data-Driven Weekly Metrics Video for Slack/Discord

The Challenge

Your team posts weekly performance metrics in Slack. Currently someone manually creates a static screenshot from a dashboard. You want:

• A 30-second animated video showing key metrics with smooth transitions
• Auto-updated data each week (pull from your analytics API)
• A consistent brand style (blue theme, clean typography)
• Posted automatically to Slack every Monday at 9am

Manual creation takes 20 minutes/week. Goal: fully automated pipeline that runs while you sleep.

The Prompt Chain (Exact Steps)

1. Create the Video Component

   Using the Remotion skill, create a 30-second weekly metrics video.
   Metrics to show:
   - Revenue: $42,500 (+12% week-over-week)
   - Active Users: 1,847 (+8%)
   - Conversion Rate: 3.2% (+0.3pp)
   Style: tech blue theme (#2563EB), smooth ease-out transitions, clean Inter font
   Animation: numbers count up from 0 to final value, bar charts grow, trend arrows animate
   Output: 1920x1080 MP4

   Agent output: A MetricsVideo.tsx React component with:

   • Animated number counters (using Remotion’s interpolate)
   • Bar chart with smooth height transitions
   • Slide-in transitions between metrics
   • Final frame with CTA and date

2. Preview in Browser

   npx remotion studio src/MetricsVideo.tsx

   Browser opens with a live preview. You scrub the timeline to check timing and transitions. Everything looks good.

3. Connect Real Data

   Modify the component to pull data from a JSON file.
   Structure: { "revenue": 42500, "revenue_change": 12, "users": 1847, ... }
   The video should read this JSON at render time.

   Agent output: Updated component that imports from ./metrics.json. You can update the JSON each week, or automate it with a cron job.

4. Add a Data Fetching Script

   Create a Python script that fetches weekly metrics from our analytics API
   and writes them to metrics.json in the Remotion project directory.

   Agent output: fetch_metrics.py that calls the API, parses the response, and writes the JSON file.

5. Render the Final Video

   npx remotion render src/MetricsVideo.tsx out/metrics-week-24.mp4

   Output: metrics-week-24.mp4 — a polished 30-second video with animated metrics, smooth transitions, and your brand colors.

6. Automate with Cron

   Set up a cron job that:
   1. Runs fetch_metrics.py every Monday at 8am
   2. Renders the video
   3. Posts it to Slack #weekly-metrics channel

   Agent output: A Hermes cron job that chains the three steps. Every Monday morning, the team gets a fresh metrics video in Slack.

The Result

• Before: 20 minutes/week manually creating a static screenshot
• After: Fully automated — 0 minutes/week, runs while you sleep
• Output quality: Animated metrics video with smooth transitions (vs. static image)
• Data freshness: Pulls from live API, no manual data entry
• Team impact: 50+ people see animated metrics every Monday without anyone creating them

Key Takeaways for Prompt Engineering

• Describe the animation, not the code: "numbers count up from 0" is better than "use interpolate with frame-based easing".
• Preview before render: Always use npx remotion studio to check timing. It’s faster than rendering and re-rendering.
• Separate data from component: Keeping metrics in a JSON file means you can update data without touching the video code.
• Chain with automation: The real power is connecting Remotion to a data pipeline. The video becomes a byproduct of your data workflow.
• Use cloud rendering for speed: For longer videos or complex scenes, npx remotion upload offloads rendering to Remotion Cloud ($0.10/min).

This workflow turns a manual reporting task into an automated visual asset pipeline.

Pricing

Free (Open Source) — Remotion core framework is free and open source (MIT). You can render locally indefinitely.

Optional: Remotion Cloud — server-side rendering at $0.10 per minute of output video. Useful for long videos or if you lack GPU power.

Verdict: 9.3/10

Remotion is the paradigm shift in video creation: code over timeline. For developers and data-savvy creators, it’s the most efficient way to produce high-quality, repeatable motion graphics. The agent integration makes it accessible even to non-coders who can describe the desired outcome in plain English.

Try It

npx skills add remotion

Remotion Docs · Examples Gallery

FAQ

Q: Do I need a paid Remotion Cloud account?
A: No. You can render entirely on your local machine for free. Remotion Cloud is optional for faster rendering without a powerful GPU.

Q: Can I use my own data sources (CSV, database)?
A: Yes. Since the video is defined in code, you can import any data source a Node.js script can access. Perfect for automated report videos.

Q: How does this compare to Manim?
A: Manim is specialized for mathematical animations (LaTeX, geometry). Remotion is a general-purpose motion graphics framework better suited for marketing videos and data visualizations.

Q: What if I don’t know React?
A: Claude writes the React code. You only need to describe what you want. For tweaks, you can either ask Claude or learn basic React; the code is clean and well-structured.