Agent skill · writing content · remotion-dev
remotion-markup
Content, animation and effects best practices
Why this skill is useful
Provides specific best practices and code patterns for Remotion that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 55,698 stars on the source repository.
What this skill does
This is guidance for writing Remotion React Markup. If this is not relevant, load Remotion Best Practices instead. 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. General rules Keep useCurrentFrame() in the smallest component that needs it. Extract frame-dependent audio volume, titles, and overlays into their own components instead of subscribing the whole composition or scene; otherwise unrelated descendants re-render on every frame. Preserve the existing frame coordinates when extracting across timing boundaries, and keep editable interpolations inline on the item's props. Inside a composition or scene component, get fps from useVideoConfig() for all seconds-to-frames calculations, including timing props such as from, trimBefore and durationInFrames. Keeping the expression on the JSX node, such as trimBefore={4 fps}, lets Studio edit the timing and keeps it correct if the composition frame rate changes. Drive animations using useCurrentFrame() and interpolate(). CSS transition or animation will not render correctly, they need to refactored. Tailwind animation class will not render correctly, they need to be refactored. Use Easing.bezier() and Easing.spring() to customize timing. Before choosing the markup hierarchy, read editable timeline structure. Choose editing units first, then the tracks or shared timing boundaries they need. It includes a complete example with interactive components and their registrations. For source-editable styles, schemas, and keyframes, see Remotion Interactivity. Keep the interpolate() call inline in the style prop. Use scale, translate, rotate CSS properties over transform. Assets Place assets in the public/ folder at your project root. Use staticFile() to reference files from the public/ folder. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/remotion-markup