Docs demo

Skill ulpi-io/plugin-marketplace/plugins/remotion-dev/skills/docs-demo

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.From its SKILL.md

Install

npx -y skills add ulpi-io/plugin-marketplace --skill docs-demo

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.9 KB, 491 tokens by cl100k_base, as published. Nobody here has run it

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/.

Steps

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:
- 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 [])
Add to the demos array in packages/docs/components/demos/index.tsx:
- Import the demo constant from ./types
- Add it to the demos array
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

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.