Claude-skill-registry docs-demo

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/docs-demo" ~/.claude/skills/majiayu000-claude-skill-registry-docs-demo && rm -rf "$T"

manifest: skills/data/docs-demo/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/

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: [],
};