Agent skill · software engineering · remotion-dev
docs-demo
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
Why this skill is useful
Provides specific patterns and component registration steps for creating interactive demos in Remotion documentation that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-06. 55,698 stars on the source repository.
What this skill does
Adding an Interactive Demo to Docs 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. Steps 1. 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(). 2. Register the demo in packages/docs/components/demos/types.ts: Import the component Export a DemoType object with these fields: id: unique string used in <Demo type="..." /> comp: the React component compWidth / compHeight: canvas dimensions (e.g. 1280x720) fps: frame rate (typically 30) durationInFrames: animation length autoPlay: whether it plays automatically options: array of interactive controls (can be empty []) 3. Add to the demos array in packages/docs/components/demos/index.tsx: Import the demo constant from ./types Add it to the demos array 4. Use in MDX with <Demo type="your-id" /> Options 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, default type: 'boolean' — checkbox with default type: 'enum' — dropdown with values array and default type: 'string' — text input with default Option values are passed to the component as inputProps. Access them as regular React props. Example registration
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/docs-demo