Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Remotion Video: Make Videos with React Code

    1

    Remotion lets you build videos in React, and this skill makes your agent plan and build them like a motion designer who also writes clean code.

    Free

    7 uses5.0 (1 review)
    Remotion Video: Make Videos with React Code

    Remotion Video: Make Videos with React Code

    Example session with this skill installed

    Make a 20-second vertical promo video for our shipment tracking app with the headline "Track every shipment", 3 features and a "Try it free" CTA. Also a 16:9 version for the website.

    • Read your context and instructions
    • Compiled the remotion video

    Storyboard (20 s, 30 fps, approved)

    #DurVisualOn-screen textAudio
    12 slogo pops, headline slides up"Track every shipment."whoosh
    24 sphone mockup with screen recording, zoom on map"Live map"music in
    34 sETA card, counter 0 -> 98%"98% on-time ETAs"
    44 salerts stack in"Instant delay alerts"
    56 sCTA, URL, logo"Try it free"music out

    Built

    • src/Root.tsx: PromoShort (1080x1920) and PromoWide (1920x1080), same scenes, zod props { title, features[], cta, color }
    • src/scenes/Hook.tsx, Feature.tsx (reused 3x), Cta.tsx; theme.ts with brand orange #E8590C and Inter via @remotion/google-fonts
    • Animations driven only by useCurrentFrame() + spring; counter with interpolate; music fades with a volume function
    • Text inside 8% safe margins; in the short, nothing in the top 12% / bottom 20% (platform UI)

    Checks

    npx remotion still PromoShort out/f0.png --frame=0
npx remotion still PromoShort out/f75.png --frame=75
npx remotion still PromoShort out/f599.png --frame=599

    Fixed: feature title wrapped to 3 lines on the vertical format -> font 96 -> 84 px.

    Rendered

    npx remotion render PromoShort out/promo-9x16.mp4 --codec=h264 --crf=18
npx remotion render PromoWide out/promo-16x9.mp4 --codec=h264 --crf=18
    • promo-9x16.mp4 1080x1920, 20.0 s, 6.1 MB
    • promo-16x9.mp4 1920x1080, 20.0 s, 7.4 MB

    Edit later

    Change text in defaultProps or render with --props=./promo.json (e.g. Spanish version). Replace public/screen.mp4 with a new recording.

    Note: your company has more than 3 people, so Remotion needs a company licence for commercial use.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Videos as code: editable, templatable, on-brand

    AI video tools are expensive and hard to edit. Remotion lets you build videos in React, and this skill makes your agent plan and build them like a motion designer who also writes clean code.

    What it does

    • Brief to storyboard: goal, audience, platform, duration, brand; scene list with timing, visuals, on-screen text and audio; hook in the first 2 seconds, clear CTA at the end.
    • Project setup: npx create-video@latest or your existing Remotion project; clean structure for scenes, components and theme.
    • Multi-format compositions: 1080x1920 shorts, 1920x1080 YouTube, 1080x1080 feed from the same scenes, with typed zod props for templated/data-driven videos.
    • Frame-perfect animation: useCurrentFrame + interpolate/spring, Series/Sequence, transitions; avoids the classic bugs (CSS animations, unseeded random, fonts not loaded).
    • Assets & text: fonts, images, screen recordings, music with volume ramps, captions, safe margins for platform UI.
    • Data videos: counters, bar charts, typewriter text; data loaded once via props or calculateMetadata.
    • Checks before rendering: stills of first, key and last frames for overflow, contrast and safe areas; then npx remotion render to MP4 (or ProRes/WebM/GIF).
    • Honest licensing note: Remotion is free for individuals and companies of up to 3 people; bigger companies need a licence.

    Includes

    • SKILL.md workflow
    • references/patterns.md - Root, scenes, animation, counters, charts, fonts, audio and gotchas
    • references/formats.md - platform sizes, pacing, scene-list template, render settings

    Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI and any SKILL.md-compatible agent. Requires Node.js.

    Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Agents & Orchestration.

    Requires local FFmpeg installation. No support for CSS animations or unseeded random values. Large companies need a Remotion license. Scripts limited to ~60 seconds.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before buying a skill.

    Reviews

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    This skill has been used 7 times.

    Trust & safety

    Security scan

    Security scan passed 4 days ago

    • Free with an Agensi account

    Software
    create-videoNode.jsremotion

    Permissions

    Terminal / Shell
    Listed4 days ago
    Updatedtoday

    What's inside

    Frequently Asked Questions

    Unlike traditional video editors, this skill allows you to build videos using React code, making it easy to automate product demos and data visualizations directly from your development environment.

    The skill is compatible with any AI agent that supports a TypeScript/React toolchain and has access to a local or cloud-based environment where FFmpeg can be installed for rendering.

    You will receive a suite of pre-configured Remotion templates, a library of frame-accurate animation patterns (springs/interpolation), and the logic required to programmatically render videos via CLI.

    Yes, the skill is designed for data-driven video; you can pass external JSON files or API responses as Zod-typed props to generate multiple versions of a video automatically.

    No, the skill enforces deterministic animation using frame-based logic (useCurrentFrame) and specialized hooks, as standard CSS keyframes often fail to render correctly during the video encoding process.

    To render the final MP4, you will need React, TypeScript, and FFmpeg installed on your machine; additionally, companies with 3 or more employees must obtain a valid Remotion license.

    New in Agents & Orchestration

    Free