remotion_skill

Overview

This skill provides domain-specific guidance for creating and editing Remotion videos in React. It bundles practical rules, patterns, and checks to design compositions, animations, assets, audio, and sequencing reliably. Use it to avoid common Remotion pitfalls and produce production-ready renders faster.

How this skill works

Before writing Remotion code, the skill inspects the project context and applies targeted recommendations from modular rule sets (animations, assets, audio, compositions, timing, transitions, etc.). It surfaces concrete patterns, API usage, and small code strategies for tasks like loading fonts, sequencing clips, trimming media, and syncing captions. The skill also points to utilities for measuring text/dom nodes, getting media metadata, and validating parameters.

When to use it

• When the request mentions Remotion or a Remotion project path (e.g., remotion-videos/*).
• When creating or editing video compositions, sequences, or animations in React.
• When adding or importing assets: images, audio, video, fonts, GIFs, or Lottie files.
• When implementing captions, transcribing audio, or syncing subtitles.
• When you need metadata: video/audio duration or dimensions for dynamic compositions.

Best practices

• Always validate composition props with a schema (Zod) so compositions are parametrizable and predictable.
• Load fonts and assets upfront; prefer local or CDN-hosted fonts for consistent renders.
• Use Mediabunny utilities or equivalent to read video/audio duration and dimensions before composing.
• Sequence clips with explicit start/duration; use trim/delay helpers to avoid off-by-one frame issues.
• Prefer easing and spring curves for natural motion; keep animations driven by frame-based interpolation.
• Test short renders locally (stills or trimmed segments) before full-length renders to save time.

Example use cases

• Build a templated social clip that accepts title, background image, and audio and renders variable-length videos.
• Import an .srt file, transcribe audio, and display TikTok-style captions with per-word highlighting.
• Create a data-driven chart animation where frames interpolate between datasets and export as a sequence.
• Embed Lottie animations and GIFs synchronized to audio beats using frame-accurate timing.
• Trim and loop a source video, adjust pitch/volume, and export a short promotional clip.