Skip to content
cccskills
FreePublished on GitHub

docs-demo

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

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli
See how to install

Files included (1)

  • SKILL.md1.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

  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().

  2. 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 [])

  3. Add to the demos array in packages/docs/components/demos/index.tsx:

    • Import the demo constant from ./types
    • Add it to the demos array

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

add-expert

Free

Add a new expert to the Remotion experts page

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

add-sfx

Free

Add a new sound effect to @remotion/sfx

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

agent-email-inbox

Free

Use when setting up a secure email inbox for any AI agent — configuring inbound email via Resend, webhooks, tunneling for local development, and implementing security measures to prevent prompt injection attacks. Also use when someone mentions 'agent email', 'bot inbox', 'receive emails for agent', 'agent webhook', 'email security for AI', 'prompt injection via email', 'inbound email for bot', or wants their AI agent to receive and respond to emails securely.

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

ai-seo

Free

Builds, measures, and improves an Answer Engine Optimization program across ChatGPT, Perplexity, Claude, Gemini, Google AI Overviews, and Copilot. Use for AEO, GEO, LLMO, AI search visibility, AI citations, brand mentions, answer-engine monitoring, llms.txt, AI crawler audits, or questions like 'what does AI say about us?' and 'why are competitors cited instead of us?'. Produces a durable evidence report and prioritized gameplan, not a one-shot content checklist.

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

app-store-screenshots

Free

Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions. Screenshots are advertisements, not documentation — every screenshot sells one idea. Use when building App Store screenshots, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators. Triggers on 'app store screenshots', 'App Store', 'screenshot generator', 'iOS screenshots', 'marketing screenshots', 'phone mockup', 'ASO screenshots', 'app store assets', 'app listing', 'app store page', or 'app preview images'. Also use when someone is about to submit an app and needs store assets, or when they say 'make my app store page look good'. Includes iPhone and iPad mockup components with pre-measured dimensions.

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

audience-research

Free

Build detailed buyer personas and audience profiles from research. Use this skill whenever the user mentions audience, buyer persona, ideal customer, target market, ICP, watering holes, 'who am I selling to', customer research, or audience profile. Also use when content feels unfocused or generic (that's an audience problem), when conversion is low because messaging doesn't resonate, when starting any new project (audience should be first), or when any downstream skill needs audience.md but it doesn't exist yet. Even if the user doesn't explicitly ask for audience research, trigger this if they're writing copy or building a landing page without a clear audience defined. Three approaches: Quick Profile, Persona Build, Community Mining.

The English summary is being prepared. Showing the original description.

MoizIbnYousaf/marketing-cli32Updated Oct 20, 2026

See all skills by MoizIbnYousaf

Report a problem with this skill