83.3K+Download
Zur Nutzungsanleitung springen
remotionvon Google Labs

Remotion Skill.

Ein Claude Code und Codex Skill für Motion und Video: Walkthrough-Videos aus Stitch-Projekten mit Remotion-Übergängen und Zooms.

  • Motion & Video
  • Video
OpenDesign herunterladenAnleitung ansehen
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Metadaten und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 12.764 Zeichen insgesamt

01 Was es tut

Was die remotion Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Verwandelt ein bestehendes Stitch-Projekt in ein Walkthrough-Video. Der Agent listet Stitch-Projekte und -Screens auf, lädt die screenshot.downloadUrl jedes Screens nach assets/screens/ herunter, erfasst Breite, Höhe, Titel und Beschreibung in einem screens.json-Manifest und erstellt anschließend eine Remotion-Komposition aus ScreenSlide.tsx und WalkthroughComposition.tsx mit Fade-, Slide- und spring-gesteuerten Zoom-Übergängen sowie Text-Overlays.

Es richtet sich an Designer und Entwickler, die bereits gestaltete Screens in Stitch haben und mit Node.js und React vertraut sind, da Remotion React-Komponenten rendert. Frames sind standardmäßig auf 30 fps eingestellt, Screens auf 3–5 Sekunden, und das Ergebnis wird in Remotion Studio vorab angesehen, bevor eine MP4-Datei gerendert wird.

Was er erzeugt

  • Ein screens.json-Manifest mit Projektname, Screen-IDs, Titeln, Beschreibungen, Bildpfaden, Abmessungen und der Dauer pro Screen
  • Für den Walkthrough generierte Remotion-Komponentendateien
  • Aktualisierte Remotion-Projektkonfiguration
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    MCP-Server finden

    list_tools ausführen und die Server-Präfixe für Stitch und Remotion identifizieren, damit spätere Aufrufe korrekt adressiert werden können.

  2. 02
    Screens von Stitch abrufen

    Das Projekt finden, dessen Screens auflisten und dann die Metadaten jedes Screens abrufen, um die Screenshot-URL, Abmessungen und Beschreibung zu erhalten.

  3. 03
    Screenshots bereitstellen

    Jeden Screenshot mit web_fetch oder curl in ein Staging-Verzeichnis herunterladen, geordnet nach dem gewünschten Ablauf des Walkthroughs.

  4. 04
    Remotion-Projekt aufsetzen

    Ein bestehendes Remotion-Projekt wiederverwenden, falls vorhanden, andernfalls ein leeres TypeScript-Projekt in einem video/-Verzeichnis erstellen.

  5. 05
    Die Komposition erstellen

    ScreenSlide.tsx für die Animation pro Screen schreiben, WalkthroughComposition.tsx für die Sequenzierung und Übergänge, sowie config.ts für fps und Abmessungen.

  6. 06
    Vorschau, dann Rendern

    In Remotion Studio Timing und Spring-Werte iterieren, dann die finale Datei über die CLI oder das Remotion-Render-Tool rendern.

02 Finden Sie Ihren Favoriten

Wann Sie den remotion Skill verwenden

Verwenden Sie das remotion-Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Eignung und Grenzen stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Sie haben bereits ein Stitch-Projekt mit gestalteten Screens, durch die geführt werden soll
  • Sie möchten bestimmte UI-Elemente mit animierten Zeigern und Hotspot-Ringen hervorheben
  • Sie erstellen ein schrittweises User-Journey-Video statt einer einfachen Slide-Show
  • Sie sind bereits mit den Videofunktionen von Remotion vertraut und möchten, dass dessen Konventionen eingehalten werden

Grenzen kennen

  • Sie haben keinen Zugriff auf den Stitch MCP Server, der eine zwingende Voraussetzung ist
  • Niemand im Team kennt sich mit React aus, da Remotion React-Komponenten komponiert
  • Screenshots können nicht in voller Auflösung abgerufen werden, was die Datei als Ursache für unscharfe Ausgaben nennt

Was Sie bereitstellen sollten

  • Stitch-ProjektkennungEntweder eine bereits bekannte Projekt-ID oder ein Titel, den der Agent nachschlagen kann, wenn die ID nicht angegeben ist.
  • Welche Screens ins Video gehörenDie Screen-Liste des Projekts wird geprüft, damit alle für den Walkthrough benötigten Screens vor dem Download erkannt werden.
  • Screen-AbmessungenBreite und Höhe jedes Screens sind erforderlich, damit die Komposition den Screenshot korrekt skaliert.
  • Titel und BeschreibungenScreen-Titel und -Beschreibungen werden zum kontextuellen Text, der über jedem Frame angezeigt wird.
  • Vorgesehene Walkthrough-ReihenfolgeDie Assets werden in der Reihenfolge angeordnet, in der der Betrachter sie sehen soll, nicht in der Reihenfolge, in der Stitch sie zurückgibt.

03 Innerhalb des Skills

Regeln, die die remotion-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Screens Dauern Standardmäßig 3-5 Sekunden

    Jeder Screen wird für eine konfigurierbare Dauer gehalten, wobei 3-5 Sekunden pro Screen als angegebener Standard gelten.

  2. Mit 30 Fps Komponieren

    config.ts legt die Bildrate fest, der Standard ist 30 fps.

  3. Bei Ruckeln auf 60fps Wechseln

    Wenn Animationen ruckelig wirken, erhöhen Sie die Bildrate auf 60fps und passen Sie die Spring-Dämpfung an, statt das Design zu ändern.

  4. Zoomen mit Spring()

    Zoom-Effekte sollten durch Spring-Animationen gesteuert werden, die auf die hervorzuhebenden wichtigen UI-Elemente angewendet werden.

  5. Das Native Seitenverhältnis Beibehalten

    Verwenden Sie die tatsächlichen Stitch-Screen-Abmessungen oder skalieren Sie diese proportional, dehnen Sie das Layout niemals.

  6. Den Build aus einem Manifest Steuern

    Die Screen-Daten liegen in einer Manifest-Datei, sodass Reihenfolge, Titel und Dauer aktualisiert werden können, ohne den Komponenten-Code anzufassen.

  7. Timing Konstant Halten

    Die Anzeigedauer der Screens bleibt während des Walkthroughs konsistent, sofern nicht ein bestimmter Screen gezielt hervorgehoben wird.

  8. Mit Fades beginnen

    Beginnen Sie mit einfachen Fade-Übergängen und legen Sie komplexe Animationen erst dann darüber, wenn der einfache Schnitt funktioniert.

04 In Betrieb nehmen

Installieren Sie remotion in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie remotion zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

Generische skills-CLI-Form für plugins/stitch-build/skills/remotion/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Die Komposition in Remotion Studio anschauen, bevor Sie einen Render anstoßen
  • Die mitgelieferte Abschlussliste durchgehen
  • Prüfen, ob Text-Overlays in jedem Screen zum richtigen Zeitpunkt erscheinen
  • Bestätigen, dass die Screen-Dimensionen mit der Kompositionsgröße übereinstimmen, und Text an die tatsächliche Screen-Größe anpassen
  • Sicherstellen, dass der Overlay-Text durchgehend lesbar bleibt, nicht nur im ersten Frame
  • Falls sich die Bewegung ruckelig anfühlt, die 60fps-Route mit angepasster Spring-Dämpfung testen

In OpenDesign ist remotion bereits integriert: Plugins → Skills, in der oberen Leiste auswählen.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill-Datei
plugins/stitch-build/skills/remotion/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 0337446
License
Apache-2.0 Aus LICENSE.
Repository-Sterne
8.304 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository google-labs-code/stitch-skills, das 12 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für remotion.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. ÜberblickWas der Stitch-plus-Remotion-Walkthrough-Workflow insgesamt liefert
  2. VoraussetzungenErforderliche MCP-Server, Node.js, npm und ein Stitch-Projekt mit Screens
  3. Abruf und VernetzungMCP-Präfixe finden, Projekte und Screens nachschlagen, Assets herunterladen
  4. Videokompositions-StrategieArchitektur von ScreenSlide, WalkthroughComposition und Konfiguration, plus Übergänge und Overlays
  5. AusführungsschritteAssets sammeln, Manifest erstellen, Komponenten generieren, Vorschau ansehen, rendern
  6. Erweiterte FunktionenInteraktive Hotspots, Voiceover-Integration und automatische Textextraktion aus Stitch-HTML
  7. DateistrukturErwartetes Verzeichnislayout des Videoprojekts und Manifests
  8. Integration mit Remotion-SkillsInstallation der eigenen Agent-Skills von Remotion für Animation und Performance-Hinweise
  9. Gängige MusterDrei Rezepte: einfache Slideshow, Feature-Highlight und User-Flow
  10. FehlerbehebungLösungen für unscharfe Screenshots, falsch ausgerichteten Text, ruckelige Animation, Build-Fehler, Timing
  11. Best PracticesSeitenverhältnis, konsistentes Timing, lesbarer Text, sanfte Übergänge, Vorschau, Asset-Optimierung
  12. Tipps für den ErfolgEinfach starten, Remotion-Muster wiederverwenden, Manifeste nutzen, häufig Vorschau ansehen, Barrierefreiheit, Plattformgrößen
Die eigene Beschreibung des Skills
„Generieren Sie Walkthrough-Videos aus Stitch-Projekten mit Remotion mit flüssigen Übergängen, Zoomen und Texteinblendungen"

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei hat etwa 12.764 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum remotion-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was muss ich installiert haben, bevor dies ausgeführt werden kann?

Zugriff auf den Stitch MCP Server und entweder den Remotion MCP Server oder die Remotion CLI, außerdem Node.js und npm sowie ein Stitch-Projekt, das bereits gestaltete Screens enthält. Vertrautheit mit Remotion und React-Komponenten ist empfehlenswert, aber nicht zwingend erforderlich.

Muss ich den Remotion MCP Server verwenden, oder reicht die CLI?

Die CLI reicht aus. Nach der Vorschau in Remotion Studio können Sie mit npx remotion render WalkthroughComposition output.mp4 rendern oder das Remotion-Render-Tool mit den Composition-Details aufrufen, falls dieser Server verfügbar ist.

Wie lange wird jeder Screen angezeigt?

Standardmäßig drei bis fünf Sekunden pro Screen, gespeichert als Dauer pro Screen im Manifest, damit Sie einzelne Screens anpassen können. Die Dauer wird im Manifest festgelegt und in Remotion Studio als Vorschau angezeigt.

Remotion

Führen Sie remotion für eine echte Motion- und Video-Aufgabe aus.

Das remotion-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion