Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →guanyang/remotion-interactivity
Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
Passed 22 of 23 test cases with the skill, and 11 of 23 without it.
and 16 more in the full report
12 fixed10 passed either way0 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/13/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
I have an animation where an element scales up over the first second of video. I currently compute `const scaleVal = interpolate(frame, [0, 30], [0, 1]);` at the top of my component function and pass `scale: scaleVal` into `style`. Remotion Studio grays out the animation controls. How should I adjust the `interpolate` code?
| Checked | Without skill | With skill |
|---|---|---|
| Inlines the interpolate function call inside the style object | Missed | Passed |
| Uses frame as the input variable in interpolate | Passed | Passed |
The instructions your model reads when the skill loads.
Studio edits the JSX nodes that create timeline items. Structure the code around what the user should be able to select, move, trim, or style independently. Keep editable values inline on each instance.
Before writing a scene or refactoring its layers, read editable timeline structure. It covers editing units, tracks, shared timing, plain layout containers, and a complete component-to-root example. For a timeline built from footage, also read editable video timelines.
Use connected compositions when a scene or reusable group needs its own timeline. Validate both its standalone view and the full parent timeline; a connection alone does not guarantee fewer visible rows.
Each key in the schema is a prop that Studio can read and edit at the call site.
Props that are not in the schema still work, but are not editable in Studio.
Keys may use dot notation, such as style.color.
| Type | Use for | Keyframable |
|---|---|---|
string | Strings, such as a title, prompt, or code snippet | No |
number | Numbers, with optional min, max, step, integer | Yes |
boolean | On/off switches | Yes (hold) |
color | CSS color strings | Yes |
enum | A choice between variants, each with its own nested schema | Opt-in (hold) |
array | Lists of numbers, colors, enums and more | No |
asset | Media sources, with optional assetType | No |
font-family | CSS font family | No |
font-weight | Font weight | Yes |
translate, scale, rotation-css, rotation-degrees, transform-origin | Transforms | Yes |
uv-coordinate | A normalized [x, y] point on the element | Yes |
svg-path | SVG path data | Yes |
remotion-captions | Caption[] data | No |
hidden | A value kept out of the controls | — |
Every field needs a default and should have a description, which Studio shows as the label.
Set keyframable: false to show a static control.
test cases passed, vs 11 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.