Docs Demo
Add inline Remotion Player demos to the docs site by registering components in the demos registry and embedding them in MDX.
Overview
Docs-demo is an agent skill for the Build phase that adds interactive Remotion Player demos to documentation by registering components in the docs demos package and embedding them in MDX.
Install
npx skills add https://github.com/remotion-dev/remotion --skill docs-demoWhat is this skill?
- Four-step flow: create demo component, register in types.ts, add to demos index, use <Demo type="..." /> in MDX
- Registers DemoType with id, comp, dimensions, fps, durationInFrames, autoPlay, and options controls
- Separates effect demos: use EffectsDemo + effects-demos/registry.ts with real effect schema
- Demos live under packages/docs/components/demos/ using useCurrentFrame and useVideoConfig
- Four-step demo registration flow (component, types.ts, index, MDX)
Adoption & trust: 1k installs on skills.sh; 49.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are updating Remotion docs and need a live, configurable composition preview instead of a dead code block readers cannot interact with.
Who is it for?
Remotion repo contributors or teams maintaining a Remotion-based docs site who already work inside packages/docs.
Skip if: General Markdown sites without MDX/Remotion, or end users who only render videos locally without touching the docs package.
When should I use this skill?
Creating a new Demo component for Remotion documentation pages or registering effect demos in the effects registry.
What do I get? / Deliverables
A registered demo component appears on the docs page via <Demo type="your-id" /> with correct dimensions, timing, and optional controls—or an EffectsDemo wired to the effects registry.
- New demo TSX under packages/docs/components/demos/
- DemoType registration and MDX embed line <Demo type="..." />
Recommended Skills
Journey fit
Interactive documentation for Remotion lives in the build phase where maintainers extend the docs package alongside the core product. Docs is the right shelf because the workflow is MDX pages, demo registries, and @remotion/player—not shipping a separate consumer app.
How it compares
Contributor workflow for the Remotion docs monorepo—not a standalone video export or CLI render skill.
Common Questions / FAQ
Who is docs-demo for?
Developers contributing to Remotion documentation or a fork that mirrors packages/docs/components/demos/ and MDX-driven pages.
When should I use docs-demo?
Use it during Build docs work when you create a new <Demo> component or need to register effect demos before publishing an MDX page.
Is docs-demo safe to install?
Check the Security Audits panel on this Prism page; the skill only describes in-repo doc changes but your agent still needs filesystem access to edit the monorepo.
SKILL.md
READMESKILL.md - Docs Demo
# 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: [], }; ```