Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →remotion-dev/docs-demo
Add an interactive demo to the Remotion documentation.
Passed 22 of 22 test cases with the skill, and 11 of 22 without it.
and 16 more in the full report
11 fixed11 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
Every interactive control option defined for a Remotion docs player demo requires an identifier field for its label and prop name. What is the key name for this field in the option object?
| Checked | Without skill | With skill |
|---|---|---|
| Uses name property for option identification | Missed | Passed |
The instructions your model reads when the skill loads.
Interactive demos render a Remotion composition inline in documentation pages using @remotion/player. They live in packages/docs/components/demos/.
Effect demos are separate: use <EffectsDemo type="effects-..." /> and register them in packages/docs/components/effects-demos/registry.ts with the real effect schema, not the generic <Demo> options array.
Create a component in packages/docs/components/demos/ (e.g. MyDemo.tsx). It should be a standard React component using Remotion hooks like useCurrentFrame() and useVideoConfig().
Register the demo in packages/docs/components/demos/types.ts:
DemoType object with these fields:
id: unique string used in <Demo type="..." />comp: the React componentcompWidth / compHeight: canvas dimensions (e.g. 1280x720)fps: frame rate (typically 30)durationInFrames: animation lengthautoPlay: whether it plays automaticallyoptions: array of interactive controls (can be empty [])Add to the demos array in packages/docs/components/demos/index.tsx:
./typesdemos arrayUse in MDX with <Demo type="your-id" />
Options add interactive controls below the player. Each option needs name and optional ('no', 'default-enabled', or 'default-disabled').
Supported types:
type: 'numeric' — slider with min, max, step, defaulttype: 'boolean' — checkbox with defaulttype: 'enum' — dropdown with values array and defaulttype: 'string' — text input with defaultOption values are passed to the component as inputProps. Access them as regular React props.
test cases passed, vs 11 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.