AgentAlley
Submit

Remotion best practices

Router for all Remotion skills

Remotion best practices — Super Bowl-style launch ad (from the digitalsamba/claude-code-video-toolkit README)

From the digitalsamba/claude-code-video-toolkit README — shows the whole collection, not only this skill. · view on GitHub

How to use it

Claude Code
  1. Run the line below. It pulls the whole folder into ~/.claude/skills/remotion-official, including the files SKILL.md points to.
  2. Describe your job in plain words. Claude Code follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit digitalsamba/claude-code-video-toolkit/.claude/skills/remotion-official#main ~/.claude/skills/remotion-official

For one project only, change the path to .claude/skills/remotion-official. This skill also uses Express.js — copying SKILL.md alone won't be enough. See the folder on GitHub.

Claude (web or desktop app)
  1. On this page open ⋯ → Download .md.
  2. Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
  3. Pick the file and Save. Claude shows the name and description and runs a security scan.
  4. Check the skill is switched on.
  5. Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
  1. ChatGPT: make a Project and paste it into Instructions.
  2. Neither? Paste it at the top of a new chat — it works for that chat.
Not working?
  • Check which app you pasted it into — the steps above name the right one.
  • Some skills need the paid tier of Claude or ChatGPT.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Source of Remotion best practices

Show the full text60 lines
remotion-official/SKILL.md60 lines · 2.4 KB
Outline
RawView on GitHub
namedescriptionversion
remotion-best-practicesRouter for all Remotion skills4.0.522

Preserve user changes

Users may make edits in the code outside of the conversation.

If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.

Creating a video

If the user asks to make, create, or build a new video or composition, load Create a new Remotion video, whether or not a Remotion project already exists.

New project setup

If no Remotion project currently exists, load Create a new Remotion project

React Markup Best Practices

If you are writing Remotion React Markup, load Remotion Markup Best Practices

Maps

For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load Remotion Maps.

Multimedia

For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load Remotion Multimedia

Improving Interactivity

By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: Interactivity Best Practices

Rendering

For advanced rendering beyond simple npx remotion render, see: Rendering Best Practices

Opening Remotion Studio

To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load Remotion Studio.

Captions

When working with Captions, load Remotion Captions.

Creating a SaaS, automation or application

Use the Remotion SaaS skill for knowledge about Remotion-powered SaaS apps, such as <Player>, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.

Looking up Remotion APIs and documentation

To find and read current Remotion documentation, load Remotion Docs.

Upgrading

To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load Remotion Upgrade.

1---
2name: remotion-best-practices
3description: Router for all Remotion skills
4version: 4.0.522
5---
6 
7## Preserve user changes
8 
9Users may make edits in the code outside of the conversation.
10 
11If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.
12 
13## Creating a video
14 
15If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/REFERENCE.md), whether or not a Remotion project already exists.
16 
17## New project setup
18 
19If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/REFERENCE.md)
20 
21## React Markup Best Practices
22 
23If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)
24 
25## Maps
26 
27For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).
28 
29## Multimedia
30 
31For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.md)
32 
33## Improving Interactivity
34 
35By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/REFERENCE.md)
36 
37## Rendering
38 
39For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.md)
40 
41## Opening Remotion Studio
42 
43To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/REFERENCE.md).
44 
45## Captions
46 
47When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).
48 
49## Creating a SaaS, automation or application
50 
51Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.
52 
53## Looking up Remotion APIs and documentation
54 
55To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/REFERENCE.md).
56 
57## Upgrading
58 
59To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).
60 

Discussion

Alternatives

Also in Video productionSee all 320 in Content creator →
FFmpeg for Video ProductionVideo and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.Creator · MITAnimate (A-Roll)Animate first frames into A-roll talking head clips. Uses Sora 2 via fal.ai (primary) with Kling 3 auto-fallback when Sora is unavailable or sunset.Creator · MITB-Roll (Kling 3)Generate B-roll environment and product shots with Kling 3 via fal.ai. Environment matching, cut timing, and visual-only clips that play under continuous voice.Creator · MITAI video creation assistantAct as an AI Video Creation Assistant. Guide users in generating video content ideas, script writing, and visual direction for professional video production.Creator · CC0-1.0

Browse more free Claude skills or everything in Content creator.