SKILL.md
$27
-
Add to the demos array in packages/docs/components/demos/index.tsx:
- Import the demo constant from
./types
- Add it to the
demosarray
-
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 withmin,max,step,default
type: 'boolean'— checkbox withdefault
type: 'enum'— dropdown withvaluesarray anddefault
type: 'string'— text input withdefault
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: [],
};