MCPInstall

remotion

by davila7Media & Creative

Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling

Installs
1.5K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/davila7/claude-code-templates --skill remotion
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads remotion automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Remotion - Video Creation in React

Comprehensive skill set for creating programmatic videos using Remotion, a framework for creating videos programmatically using React.

When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about:

  • Creating video compositions with React components
  • Animating elements using frame-based animations
  • Working with audio, video, and image assets
  • Building charts and data visualizations
  • Implementing text animations and captions
  • Using 3D content with Three.js
  • Applying transitions and sequencing
  • Integrating Tailwind CSS and Lottie animations

Core Concepts

Remotion allows you to create videos using:

  • React Components: Build video content with familiar React syntax
  • Frame-based Animations: All animations driven by useCurrentFrame() hook
  • Compositions: Define video compositions with duration, dimensions, and props
  • Assets: Import and manipulate images, videos, audio, and fonts
  • Rendering: Export videos programmatically with customizable settings

Key Features

  • Frame-by-frame control over animations
  • Dynamic metadata calculation
  • Media processing (trimming, volume, speed, pitch)
  • Caption generation and display
  • Data visualization with charts
  • 3D content integration
  • Professional text animations
  • Scene transitions and sequencing

How to use

Read individual rule files for detailed explanations and code examples:

Core Animation & Timing

  • references/animations.md - Fundamental animation techniques for Remotion
  • references/timing.md - Interpolation curves: linear, easing, spring animations
  • references/sequencing.md - Delay, trim, and limit duration of items
  • references/trimming.md - Cut the beginning or end of animations

Compositions & Metadata

  • references/compositions.md - Defining compositions, stills, folders, default props
  • references/calculate-metadata.md - Dynamically set composition duration, dimensions, and props

Assets & Media

  • references/assets.md - Importing images, videos, audio, and fonts
  • references/images.md - Embedding images using the Img component
  • references/videos.md - Embedding videos with trimming, volume, speed, looping, pitch
  • references/audio.md - Using audio and sound with trimming, volume, speed, pitch
  • references/gifs.md - Displaying GIFs synchronized with timeline

Text & Typography

  • references/text-animations.md - Typography and text animation patterns
  • references/measuring-text.md - Measuring text dimensions, fitting text, checking overflow
  • references/fonts.md - Loading Google Fonts and local fonts

Captions & Transcription

  • references/display-captions.md - Displaying captions with TikTok-style pages and word highlighting
  • references/import-srt-captions.md - Importing .srt subtitle files using @remotion/captions
  • references/transcribe-captions.md - Transcribing audio to generate captions

Data Visualization

  • references/charts.md - Chart and data visualization patterns

Advanced Features

  • references/3d.md - 3D content using Three.js and React Three Fiber
  • references/lottie.md - Embedding Lottie animations
  • references/transitions.md - Scene transition patterns

Styling & Layout

  • references/tailwind.md - Using TailwindCSS in Remotion
  • references/measuring-dom-nodes.md - Measuring DOM element dimensions

Media Processing (Mediabunny)

  • references/can-decode.md - Check if a video can be decoded by the browser
  • references/extract-frames.md - Extract frames from videos at specific timestamps
  • references/get-audio-duration.md - Getting the duration of an audio file
  • references/get-video-dimensions.md - Getting the width and height of a video file
  • references/get-video-duration.md - Getting the duration of a video file

Quick Start Example

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

Best Practices

  1. Always use useCurrentFrame() - Drive all animations from the current frame
  2. Avoid CSS animations - They won't render correctly in videos
  3. Think in seconds - Multiply time in seconds by fps for frame calculations
  4. Use interpolate for smooth animations - Built-in interpolation with easing functions
  5. Clamp extrapolation - Prevent values from exceeding intended ranges
  6. Test frequently - Preview in Remotion Studio before rendering

Resources

FAQ

What does the remotion skill do?

Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling

How do I install remotion?

Run npx skills add https://github.com/davila7/claude-code-templates --skill remotion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion/ (personal) or .claude/skills/remotion/ (project).

Which AI agents can use remotion?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is remotion safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains remotion?

It is published by davila7 in davila7/claude-code-templates. It has 1,504 recorded installs.

More from davila7/claude-code-templates

View all →

senior-data-scientist

davila7/claude-code-templates

World-class data science skill for statistical modeling, experimentation, causal inference, and advanced analytics. Expertise in Python (NumPy, Pandas, Scikit-learn), R, SQL, statistical methods, A/B testing, time series, and business intelligence. Includes experiment design, feature engineering, model evaluation, and stakeholder communication. Use when designing experiments, building predictive models, performing causal analysis, or driving data-driven decisions.

Data & Databases3.2K installs

senior-backend

davila7/claude-code-templates

Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API scaffolding, database optimization, security implementation, and performance tuning. Use when designing APIs, optimizing database queries, implementing business logic, handling authentication/authorization, or reviewing backend code.

Backend & APIs2.7K installs

excel analysis

davila7/claude-code-templates

Analyze Excel spreadsheets, create pivot tables, generate charts, and perform data analysis. Use when analyzing Excel files, spreadsheets, tabular data, or .xlsx files.

Data & Databases2.6K installs

markitdown

davila7/claude-code-templates

Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.

Docs & Writing2.4K installs

senior-frontend

davila7/claude-code-templates

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

Frontend & Design2.1K installs

scientific-writing

davila7/claude-code-templates

Core skill for the deep research and writing tool. Write scientific manuscripts in full paragraphs (never bullet points). Use two-stage process: (1) create section outlines with key points using research-lookup, (2) convert to flowing prose. IMRAD structure, citations (APA/AMA/Vancouver), figures/tables, reporting guidelines (CONSORT/STROBE/PRISMA), for research papers and journal submissions.

Education & Science2K installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs