SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Documentation · Frontend / AGENT SKILL
docs-demo
0
Create interactive Demo components for Remotion documentation pages.
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
Understand the trade-offs.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# 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
```ts
export const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};
```