Embed interactive Remotion demos into documentation pages via a Demo component.
npx skills add https://github.com/remotion-dev/remotion --skill docs-demo
Please help me install this Agent Skill. Skill: docs-demo Source: https://github.com/remotion-dev/remotion/tree/main/.claude/skills/docs-demo Command: npx skills add https://github.com/remotion-dev/remotion --skill docs-demo
This Skill helps documentation teams embed interactive Remotion demos into their pages, enabling dynamic previews without leaving the docs.
Create a new demo component in packages/docs/components/demos/, register it in the demos/types.ts file, import and render it in docs MDX using a Demo type.
High-intent search queries and answers about installing and using this skill.
To embed interactive Remotion demos, create a component in packages/docs/components/demos, register it in demos/types.ts, and render it in your MDX docs using the Demo type.
Registering a new demo component requires placing the file in packages/docs/components/demos, adding its type definition to demos/types.ts, and using frontmatter-driven discovery for name and description attributes.
Yes, you can add live React component previews inline within MDX documentation by registering the component as a Demo type and rendering it directly on the page.
Yes, embedding interactive demos requires a structured demo registry where components are registered in a types.ts file to ensure correct rendering with the Demo component.
The best way to showcase Remotion components without leaving the page is using inline demos that provide dynamic previews directly within the documentation environment.
remotion-devEmbed interactive Remotion demos into documentation pages via a Demo component.
lumappsGenerates Vue SFCs, integrates PropTable data, and updates MDX pages for @lumx/vue components.
idealjsCreate Next.js MDX/TSX component demo pages with variants and visual regression tests.
erbsland-devEmbed static ANSI blocks in Sphinx docs using the erbsland-ansi directive.
