PlugWiki

remotion-markup Skill for Claude: What It Does and How to Install It

Gives Claude Remotion's best practices for writing video code: animation, layout, media, audio, effects, fonts and timing.

Installs
246.7K
on skills.sh
Stars
6K
on GitHub
Files
60+
besides SKILL.md
Updated
Oct 2026
last repo commit

remotion-markup is the large reference in Remotion's skill set for writing React markup that renders as video. Its rules include driving animation with useCurrentFrame() and interpolate() instead of CSS transitions or Tailwind animation classes, taking fps from useVideoConfig(), and keeping interpolations inline so Studio can edit them. It also tells Claude not to overwrite edits you made outside the chat.

Its sections cover assets, media, trimming, transitions, motion blur, effects, color correction, 3D, sound, audio visualization, maps, captions, right-to-left text, fonts, GIFs, Lottie and timing. The folder has 68 files, including map techniques for Cesium, Mapbox, MapLibre and MapTiler and two helper scripts. SKILL.md tells Claude to load Remotion Best Practices if it is not relevant and the Remotion Captions skill for captions, so install the whole Remotion set.

Good for

  • Developers writing Remotion compositions
  • Teams building animated explainers or map flyovers

Install remotion-markup

Claude Code

  1. 1

    Copy this prompt.

    Install the remotion-markup skill in Claude Code. Run this command:

npx skills add remotion-dev/skills

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Install the whole set, not just remotion-markup. This skill hands off to other Remotion skills in the same repo, such as best practices, and the README says the set works with Claude Code, Codex, Kimi Code and Cursor.

From the project README. Source.

What's in the skill

When it loads

Content, animation and effects best practices

Sections in SKILL.md

  1. Preserve user changes
  2. General rules
  3. Assets
  4. Media components
  5. Delaying, trimming
  6. Maps
  7. Text highlights and annotations
  8. Multi-scene videos
  9. Connected compositions
  10. Voiceover
  11. Embedding Videos
  12. Embedding Audio
  13. Cropping
  14. Transitions
  15. Motion blur
  16. Visual and pixel effects

Key facts

Author
remotion-dev
Repo
remotion-dev/skills (skills/remotion-markup)
Installs on skills.sh
246,661 (Nov 2026)
GitHub stars
6,037 (Nov 2026)
Last repo commit
Oct 26, 2026
Files in the skill folder
68 including SKILL.md
skills.sh audits
Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Helper scripts
prep-cesium-path.mjs and prep-geo.mjs, in the maps techniques
Map providers
The Mapbox technique needs a Mapbox access token

What it includes

  • Drive motion with useCurrentFrame() and interpolate(); CSS transitions will not render

    Frame-driven animation

  • Images, video, audio, GIFs, Lottie, trimming, delaying and sequencing

    Media and timing

  • Visual and pixel effects, motion blur, light leaks and color correction

    Effects and color

  • Sound effects, voiceover and audio visualization

    Audio

  • Measuring text, Google and local fonts, Arabic and right-to-left text

    Text and fonts

  • Cesium, Mapbox, MapLibre, MapTiler and static map techniques with data-prep scripts

    Runs code · Maps

  • Guidance for 3D scenes in a video

    3D content

  • Structure for videos with several scenes

    Multi-scene and connected compositions

  • Uses the Remotion add command to install packages at the right version

    Runs code · Add packages

From the official docs

Permissions

Low risk

Mostly guidance, but Claude may add packages and run the two bundled map-prep scripts in your project.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It can add npm packages

    SKILL.md tells Claude to use the Remotion add command for new packages. Check your package changes.

  • Map techniques bundle helper scripts

    prep-cesium-path.mjs and prep-geo.mjs prepare map data. Read them before Claude runs them on your files.

Technical details
Talks tonpm registry

Questions

How do I install remotion-markup?

Use the install box above. It installs the whole Remotion set, because this skill points to others such as best practices and captions.

How do I use it?

The repo README gives the example prompt /remotion-markup Create an animated title card using Inter.

Why does it ban CSS transitions?

SKILL.md says CSS transition, CSS animation and Tailwind animation classes will not render correctly in Remotion. Claude should drive animation from the current frame instead.

Does it need an API key?

Mostly no. The Mapbox map technique needs a Mapbox access token; its TECHNIQUE.md says to pass it as an input prop or read it from an environment variable such as REMOTION_MAPBOX_TOKEN.

How is it different from remotion-interactivity?

remotion-markup is about writing the video content. remotion-interactivity is about structuring that code so you can edit items in Remotion Studio.

Information

updated Nov 2, 2026

Repository
remotion-dev/skills
Folder
skills/remotion-markup

remotion-dev/skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. remotion-dev/skills README · github.com
  2. remotion-markup SKILL.md · github.com
  3. remotion-markup maps mapbox/TECHNIQUE.md · github.com
  4. remotion-markup maps cesium/TECHNIQUE.md · github.com
  5. remotion-markup maps maptiler/TECHNIQUE.md · github.com

Updated Nov 2, 2026.