Menu
Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | interactivity-best-practices |
| description | Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode. |
Use the canonical interactivity best-practices page instead: packages/docs/docs/studio/interactivity-best-practices.mdx
To make an element or custom component interactive, use: packages/docs/docs/studio/make-component-interactive.mdx
Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and builds.
Add a new sound effect to @remotion/sfx
Publish Remotion Lambda Chrome binaries to the eu-central-1 test region and update hosted layer and Chrome version references. Use when updating Chrome binaries before full regional rollout.
Document Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill or packages/skills as a public skill.
Guidance for Remotion Studio UI changes where the global CSS reset affects nested elements. Use when editing packages/studio UI, especially when adding wrapper spans, inline icons, labels, buttons, compact rows, or any nested text whose typography, color, sizing, or truncation must stay stable.
Start Remotion Studio from packages/example and open it in the Codex browser. Use when the user invokes /studio or $studio, asks to launch the example Studio, or wants the Remotion Studio dev UI available locally.
