Remotion Best Practices — guide skill for tools & renderers
For AI agents: find the right skill in one call —
curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the use-case page.
Make videos in React with Remotion: the router that loads the right Remotion skill for each step.
- Type: Guide · Tools & renderers
- Slug:
remotion-best-practices - Status: live
- Publisher: Remotion (vendor, verified)
- License: MIT
- Source: https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices
- Works in: Claude Code, Codex, Cursor, Gemini CLI
- Requires: Node.js, Remotion 4
- Cost: Free — local render (Remotion company license for larger for-profit teams)
- Adoption: 689,600 installs, 5,750 GitHub stars (skills.sh, 2026-10-26)
What it does
Remotion's top-level skill, generated from the Remotion monorepo, routes an agent through creating a project, writing React markup and animation, maps, multimedia, captions, interactivity, previewing in Remotion Studio, rendering, building an app on the Player and upgrading. It bundles every sub-skill's reference files and sets house rules such as preserving the user's edits and opening the preview before rendering.
Use when
- Any Remotion task when unsure which skill applies
- Creating a programmatic video in React
- Previewing, rendering or captioning a Remotion composition
Not for
- HTML-first videos without React (use HyperFrames)
Install
- Claude Code:
npx skills add remotion-dev/skills --skill remotion-best-practices -a claude-code - Codex:
npx skills add remotion-dev/skills --skill remotion-best-practices -a codex - Cursor:
npx skills add remotion-dev/skills --skill remotion-best-practices -a cursor - Gemini CLI:
npx skills add remotion-dev/skills --skill remotion-best-practices -a gemini-cli
Example output
https://skills.varg.ai/previews/remotion-best-practices.mp4 — Remotion's Agent Skills launch post: 'This animation was created just by prompting' with the skill (terminal install, then 'Agent Skills now available') (credit: Remotion (@Remotion), https://x.com/Remotion/status/2013626968386765291)
Used for
- SaaS launch or product promo: A polished launch film for an app or website: UI cards, device mockups, kinetic type, music.
- Photo slideshow to music: Your photos cut to music, with motion, transitions on the beat and titles.
- Animated chart or data video: Numbers from a CSV or a report as an animated chart: bar race, line, hero number.
- Personalized videos at scale: One template, many versions: each lead's name, company and website in the video, optionally in a cloned voice.
More tools & renderers skills
- varg AI: The official varg skill: videos, images, speech and music through one API key, rendered in the cloud or locally.
- Media Download: Save any video by link (X, YouTube, Instagram, TikTok, 1800+ sites) or Pinterest images as references, locally, no key.
- Templates Gallery Ops: Internal runbook for the varg app Templates gallery: publish renders, preview clips, frame-0 posters, shelves.
- HyperFrames CLI: Drive the HyperFrames CLI: scaffold, check, preview, snapshot, edit the timeline, render locally or in the cloud.
- HyperFrames Registry: Pull any of ~450 ready-made blocks into a video as editable source: transitions, titles, captions, charts, 3D.
- HyperFrames Media Use: Find or make every asset a video needs: music, SFX, voiceover, images, logos, avatars, transcripts, grades.