Agent skill · writing content · aiskillstore
remotion-markup
Best practices for writing Remotion React Markup
Why this skill is useful
Codifies best practices for writing Remotion React Markup, which the AI could infer but now doesn't have to guess.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 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. General rules Animate properties using useCurrentFrame() and interpolate(). Use interpolate() over spring(). Use Easing.bezier() to customize timing, including jumpy or overshooting motion. Use Easing.spring() if you want spring animations HTML Elements which make sense to be made interactive in the Studio should use Interactive: <div> -> <Interactive.Div>. Set a descriptive name prop such as name="Hero title" for Interactive, Solid, Sequence. Keep the interpolate() call inline in the style prop. Prefer scale, translate, rotate CSS properties over transform. CSS transitions or animations are FORBIDDEN - they will not render correctly. Tailwind animation class names are FORBIDDEN - they will not render correctly. Place assets in the public/ folder at your project root. Use staticFile() to reference files from the public/ folder. Add video and audio using @remotion/media. Add images using the <Img> component. Use staticFile() for files in public/ or pass a remote URL directly: To delay content wrap it in <Sequence> and use from. To limit the duration of an element, use durationInFrames of <Sequence>. <Sequence> by default is an absolute fill covering the scene. For inline content, use layout="none". Maps See map.md for choosing between simple static maps, Mapbox maps, and MapLibre maps. Text highlights and annotations See text-highlights.md for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes, and brackets. Voiceover See voiceover.md for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS. Trimming See trimming.md for trimming patterns - cutting the beginning or end of animations. Embedding Videos See embedding-videos.md for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/remotion-markup