remotion-best-practices
Best practices for Remotion - Video creation in React
Install
With your agent
Install OMGSkills skill "remotion-dev/html-in-canvas:remotion-best-practices" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/remotion-dev/html-in-canvas /tmp/html-in-canvas && ln -s /tmp/html-in-canvas/.agents/skills/remotion-best-practices ~/.claude/skills/remotion-best-practicesFrom README
When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. New project When in an empty folder or workspace with no existing Remotion project, scaffold one using: Replace my-video with a suitable project name. Designing a video Animate properties using useCurrentFrame() and interpolate(). Use Easing to customize the timing of the animation. 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 images using the component: Add videos using the component from @remotion/media: Add audio using the component from @remotion/media: Assets can be also referenced as remote URLs: To delay content wrap it in and use from. To limit the duration of an element, use durationInFrames of . by default is an absolute fill.