Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
Install with the open skills CLI (global, non-interactive — available in every Claude Code session):
npx skills add remotion-dev/skills --skill "remotion-interactivity" -g -a claude-code -yOr manually — copy the SKILL.md below into:
~/.claude/skills/remotion-interactivity-remotion-dev/SKILL.mdPart of the remotion-best-practices skill collection — installing the parent includes this skill.
---
name: remotion-interactivity
description: Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
metadata:
tags: remotion, interactivity, studio, visual mode
---
# Remotion Interactivity
Use the canonical interactivity best-practices page instead:
[Interactivity best practices](https://www.remotion.dev/docs/studio/interactivity-best-practices)
To make an element or custom component interactive, use:
[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive)
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Roleplay the most difficult, tech-resistant user for your product. Browse the app as that persona, find every UX pain point, then filter complaints through a pragmatism layer to separate real problems from noise. Creates actionable tickets from genuine issues only.
ASCII video: convert video/audio to colored ASCII MP4/GIF.