remotion-dev

remotion-best-practices

Domain-specific knowledge base for building videos with Remotion and React.

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

New project setup

If no Remotion project currently exists, load Create a new Remotion project

React Markup Best Practices

If you are writing Remotion React Markup, load Remotion Markup Best Practices

Mediabunny Skills

For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load Mediabunny Best Practices

Improving Interactivity

By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: Interactivity Best Practices

Rendering

For advanced rendering beyond simple npx remotion render, see: Rendering Best Practices

Captions

When working with Captions, load Remotion Captions.

Creating a SaaS, automation or application

Use the Remotion SaaS skill for knowledge about Remotion-powered SaaS apps, such as <Player>, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.

Looking up Remotion APIs and documentation

To find and read current Remotion documentation, load Remotion Docs.

Related

gpt-taste
Leonxlnx
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.

171.5K installs

animate
pbakaus
Enhance UX with purposeful animation and micro-interactions that support usability and delight.

83.1K installs

fixing-motion-performance
ibelick
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

18.8K installs

improve-animations
emilkowalski
Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.

16.2K installs

interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.

11.2K installs

better-ui
jakubkrehel
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.

1.5K installs