Agent skill · remotion-dev
remotion-markup
Content, animation and effects best practices
What it needs
About 5k tokens when loaded.
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 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. Structure your markup according to Remotion Interactivity Best Practices 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. Media components Add video and audio using <Video> and <Audio> from @remotion/media. Add images using the <CanvasImage> component. Add animated GIFs, APNG, WebP or AVIF images using <AnimatedImage>, use @remotion/gif if not using Chrome. Use staticFile() for files in public/ or pass a remote URL directly: Example scene Delaying, trimming Most components (<AbsoluteFill>, <Interactive.> <Img>, <AnimatedImage>, <CanvasImage>, <HtmlInCanvas>, <Solid>, <Sequence> from remotion, <Video> and <Audio> from @remotion/media, <Gif>, and more) support the following props: from When the element starts appearing in the timelien. durationInFrames For how long the layer plays in the timeline. For media, pass the natural duration of the media: <Video durationInFrames={29.322 fps}/> trimBefore Useful for components whose internal clock should start later: Fallback If a component does not support these props, wrap it in<Sequence> from remotion, which has them. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/remotion-markup--98f566