majiayu000/claude-skill-registry

Hinzufügen einer interaktiven Demo zur Dokumentation

Interaktive Demos rendern eine Remotion-Komposition inline in Dokumentationsseiten mit @remotion/player. Sie befinden sich in packages/docs/components/demos/.

Schritte

1. Erstelle eine Komponente in packages/docs/components/demos/ (z.B. MyDemo.tsx). Es sollte eine standardmäßige React-Komponente sein, die Remotion-Hooks wie useCurrentFrame() und useVideoConfig() verwendet.

2. Registriere die Demo in packages/docs/components/demos/types.ts:

   • Importiere die Komponente
   • Exportiere ein DemoType-Objekt mit diesen Feldern:
     • id: eindeutiger String, der in <Demo type="..." /> verwendet wird
     • comp: die React-Komponente
     • compWidth / compHeight: Canvas-Abmessungen (z.B. 1280x720)
     • fps: Bildrate (typischerweise 30)
     • durationInFrames: Animationslänge
     • autoPlay: ob sie automatisch abgespielt wird
     • options: Array interaktiver Steuerungen (kann leer sein [])

3. Füge zum Demos-Array hinzu in packages/docs/components/demos/index.tsx:

   • Importiere die Demo-Konstante aus ./types
   • Füge sie zum demos-Array hinzu

4. Verwende in MDX mit <Demo type="deine-id" />

Optionen

Optionen fügen interaktive Steuerungen unter dem Player hinzu. Jede Option benötigt name und optional ('no', 'default-enabled' oder 'default-disabled').

Unterstützte Typen:

• type: 'numeric' — Schieberegler mit min, max, step, default
• type: 'boolean' — Checkbox mit default
• type: 'enum' — Dropdown mit values-Array und default
• type: 'string' — Texteingabe mit default

Optionenwerte werden als inputProps an die Komponente übergeben. Greife wie bei normalen React-Props darauf zu.

Beispiel-Registrierung

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};