docs-demo
starsforks
How to install docs-demo?
moizibnyousaf/marketing-cli/docs-demo
$npx -y skills add MoizIbnYousaf/marketing-cli --skill docs-demoAdd an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
SKILL.md
| 1 | # Adding an Interactive Demo to Docs |
| 2 | |
| 3 | Interactive demos render a Remotion composition inline in documentation pages using `@remotion/player`. They live in `packages/docs/components/demos/`. |
| 4 | |
| 5 | ## Steps |
| 6 | |
| 7 | 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()`. |
| 8 | |
| 9 | 2. **Register the demo** in `packages/docs/components/demos/types.ts`: |
| 10 | - Import the component |
| 11 | - Export a `DemoType` object with these fields: |
| 12 | - `id`: unique string used in `<Demo type="..." />` |
| 13 | - `comp`: the React component |
| 14 | - `compWidth` / `compHeight`: canvas dimensions (e.g. 1280x720) |
| 15 | - `fps`: frame rate (typically 30) |
| 16 | - `durationInFrames`: animation length |
| 17 | - `autoPlay`: whether it plays automatically |
| 18 | - `options`: array of interactive controls (can be empty `[]`) |
| 19 | |
| 20 | 3. **Add to the demos array** in `packages/docs/components/demos/index.tsx`: |
| 21 | - Import the demo constant from `./types` |
| 22 | - Add it to the `demos` array |
| 23 | |
| 24 | 4. **Use in MDX** with `<Demo type="your-id" />` |
| 25 | |
| 26 | ## Options |
| 27 | |
| 28 | Options add interactive controls below the player. Each option needs `name` and `optional` (`'no'`, `'default-enabled'`, or `'default-disabled'`). |
| 29 | |
| 30 | Supported types: |
| 31 | |
| 32 | - `type: 'numeric'` — slider with `min`, `max`, `step`, `default` |
| 33 | - `type: 'boolean'` — checkbox with `default` |
| 34 | - `type: 'enum'` — dropdown with `values` array and `default` |
| 35 | - `type: 'string'` — text input with `default` |
| 36 | |
| 37 | Option values are passed to the component as `inputProps`. Access them as regular React props. |
| 38 | |
| 39 | ## Example registration |
| 40 | |
| 41 | ```ts |
| 42 | export const myDemo: DemoType = { |
| 43 | comp: MyDemoComp, |
| 44 | compHeight: 720, |
| 45 | compWidth: 1280, |
| 46 | durationInFrames: 150, |
| 47 | fps: 30, |
| 48 | id: 'my-demo', |
| 49 | autoPlay: true, |
| 50 | options: [], |
| 51 | }; |
| 52 | ``` |
People who liked this also viewed
6 picksType
- grill-with-docsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.SkillsJul 2026
- lark-minutes飞书妙记：搜索妙记、查看妙记基础信息、下载/上传音视频、读取或编辑妙记的产物内容、改标题、替换说话人/关键词、申请妙记查看/编辑权限。当给出minute_token、本地音视频文件，要查/改/转妙记产物，或用户明确要主动申请妙记权限时使用；本地音视频转纪要/逐字稿优先走本 skill，不要用 ffmpeg/whisper 本地转写。不负责：获取会议关联妙记，或仅按自然语言标题定位纪要SkillsJul 2026
- lark-markdown飞书 Markdown：查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。SkillsJul 2026
- docxUse this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', SkillsJul 2026
- edit-articleSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- lark-note飞书会议纪要（Note）直查：已知 note_id 时查询纪要详情、展示类型、关联文档 token，并读取 unified 原始逐字记录。当用户已持有 note_id，或从文档显式 vc-node-id 获得 note_id 时使用。不负责会议/日程/妙记定位、文档标题搜索或 Docx 正文读取。SkillsJul 2026
