Anhvu1107/all-agent-skill

Stitch zu Remotion Walkthrough-Videos

Selektive Leseregel

Beginne mit:

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

Lade dann nur die vererbten Dokumente, Skripte, Assets oder Beispiele, die zur tatsächlichen Aufgabe des Benutzers passen.

Du bist ein Videoproduktionsspezialist, der sich auf die Erstellung ansprechender Walkthrough-Videos aus App-Designs konzentriert. Du kombinierst die Bildschirmabruffunktionen von Stitch mit der programmatischen Videogenerierung von Remotion, um flüssige, professionelle Präsentationen zu erstellen.

Übersicht

Diese Fähigkeit ermöglicht es dir, Walkthrough-Videos zu erstellen, die App-Bildschirme mit professionellen Übergängen, Zoomeffekten und kontextbezogenen Texteinblendungen präsentieren. Der Workflow ruft Bildschirme aus Stitch-Projekten ab und orchestriert sie zu einer Remotion-Videokomposition.

Voraussetzungen

Erforderlich:

• Zugriff auf den Stitch MCP Server
• Zugriff auf den Remotion MCP Server (oder Remotion CLI)
• Node.js und npm installiert
• Ein Stitch-Projekt mit entworfenen Bildschirmen

Empfohlen:

• Vertrautheit mit Remotions Videofunktionen
• Verständnis von React-Komponenten (Remotion verwendet React)

Abruf und Vernetzung

Schritt 1: Verfügbare MCP-Server entdecken

Führe list_tools aus, um verfügbare MCP-Server und ihre Präfixe zu identifizieren:

• Stitch MCP: Suche nach stitch: oder mcp_stitch: Präfix
• Remotion MCP: Suche nach remotion: oder mcp_remotion: Präfix

Schritt 2: Stitch-Projektinformationen abrufen

1. Projektsuche (falls keine Projekt-ID angegeben):

   • Rufe [stitch_prefix]:list_projects mit filter: "view=owned" auf
   • Identifiziere das Zielprojekt anhand des Titels (z.B. "Taschenrechner-App")
   • Extrahiere die Projekt-ID aus dem Feld name (z.B. projects/13534454087919359824)

2. Bildschirmabruf:

   • Rufe [stitch_prefix]:list_screens mit der Projekt-ID auf (nur numerisch)
   • Überprüfe die Bildschirmtitel, um alle Bildschirme für den Walkthrough zu identifizieren
   • Extrahiere die Bildschirm-IDs aus dem name-Feld jedes Bildschirms

3. Bildschirm-Metadaten abrufen: Für jeden Bildschirm:

   • Rufe [stitch_prefix]:get_screen mit projectId und screenId auf
   • Rufe ab:
     • screenshot.downloadUrl — Visuelles Asset für das Video
     • htmlCode.downloadUrl — Optional: zum Extrahieren von Text/Inhalten
     • width, height — Bildschirmabmessungen für korrekte Skalierung
     • Bildschirmtitel und -beschreibung für Texteinblendungen

4. Asset-Download:

   • Verwende web_fetch oder Bash mit curl, um Screenshots herunterzuladen
   • Speichere in einem Staging-Verzeichnis: assets/screens/{screen-name}.png
   • Organisiere Assets in der Reihenfolge des geplanten Walkthrough-Ablaufs

Schritt 3: Remotion-Projekt einrichten

1. Prüfen auf bestehendes Remotion-Projekt:

   • Suche nach remotion.config.ts oder package.json mit Remotion-Abhängigkeiten
   • Falls vorhanden, verwende die bestehende Projektstruktur

2. Neues Remotion-Projekt erstellen (falls nötig):

   npm create video@latest -- --blank
   

   • Wähle die TypeScript-Vorlage
   • Richte es in einem dedizierten video/ Verzeichnis ein

3. Abhängigkeiten installieren:

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

Videokompositionsstrategie

Architektur

Erstelle eine modulare Remotion-Komposition mit diesen Komponenten:

1. ScreenSlide.tsx — Einzelne Bildschirmanzeigekomponente

   • Props: imageSrc, title, description, width, height
   • Funktionen: Zoom-Animation, Einblend-Übergänge
   • Dauer: Konfigurierbar (Standard 3-5 Sekunden pro Bildschirm)

2. WalkthroughComposition.tsx — Hauptvideokomposition

   • Ordnet mehrere ScreenSlide-Komponenten in Sequenz an
   • Handhabt Übergänge zwischen Bildschirmen
   • Fügt Texteinblendungen und Annotationen hinzu

3. config.ts — Videokonfiguration

   • Bildrate (Standard: 30 fps)
   • Videoabmessungen (entsprechen Stitch-Bildschirmabmessungen oder skalieren angemessen)
   • Berechnung der Gesamtdauer

Übergangseffekte

Verwende Remotions @remotion/transitions für professionelle Effekte:

• Einblenden: Sanfter Überblendung zwischen Bildschirmen

  import {fade} from '@remotion/transitions/fade';
  

• Schieben: Gerichtete Schiebeübergänge

  import {slide} from '@remotion/transitions/slide';
  

• Zoom: Zoom-Effekte zur Hervorhebung

  • Verwende spring()-Animation für sanften Zoom
  • Auf wichtige UI-Elemente anwenden

Texteinblendungen

Füge kontextbezogene Informationen mit Remotions Textdarstellung hinzu:

1. Bildschirmtitel: Zeige oben oder unten in jedem Frame an
2. Funktionshinweise: Hebe bestimmte UI-Elemente mit animierten Zeigern hervor
3. Beschreibungen: Lasse beschreibenden Text für jeden Bildschirm einblenden
4. Fortschrittsanzeige: Zeige die aktuelle Bildschirmposition im Walkthrough an

Ausführungsschritte

Schritt 1: Bildschirm-Assets sammeln

1. Identifiziere das Ziel-Stitch-Projekt
2. Liste alle Bildschirme im Projekt auf
3. Lade Screenshots für jeden Bildschirm herunter
4. Ordne sie in der Reihenfolge des Walkthrough-Ablaufs an
5. Erstelle eine Manifest-Datei (screens.json):

{
  "projectName": "Taschenrechner-App",
  "screens": [
    {
      "id": "1",
      "title": "Startbildschirm",
      "description": "Hauptrechneroberfläche mit Zahlenfeld",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Verlaufsansicht",
      "description": "Ansicht der vorherigen Berechnungen",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Schritt 2: Remotion-Komponenten generieren

Erstelle die Videokomponenten gemäß den Remotion-Best Practices:

1. Erstelle ScreenSlide.tsx:

   • Verwende useCurrentFrame() und spring() für Animationen
   • Implementiere Zoom- und Einblendeffekte
   • Füge Texteinblendungen mit korrektem Timing hinzu

2. Erstelle WalkthroughComposition.tsx:

   • Importiere das Bildschirm-Manifest
   • Ordne Bildschirme mit <Sequence>-Komponenten an
   • Wende Übergänge zwischen Bildschirmen an
   • Berechne korrektes Timing und Versätze

3. Aktualisiere remotion.config.ts:

   • Setze die Kompositions-ID
   • Konfiguriere Videoabmessungen
   • Stelle Bildrate und Dauer ein

Referenz-Ressourcen:

• Verwende resources/screen-slide-template.tsx als Ausgangspunkt
• Folge resources/composition-checklist.md für Vollständigkeit
• Überprüfe Beispiele im examples/walkthrough/ Verzeichnis

Schritt 3: Vorschau und Verfeinerung

1. Remotion Studio starten:

   npm run dev
   

   • Öffnet eine browserbasierte Vorschau
   • Ermöglicht Echtzeitbearbeitung und -verfeinerung

2. Timing anpassen:

   • Stelle sicher, dass jeder Bildschirm eine angemessene Anzeigedauer hat
   • Überprüfe, ob die Übergänge flüssig sind
   • Kontrolliere das Timing der Texteinblendungen

3. Animationen verfeinern:

   • Passe die Spring-Konfigurationen für Zoomeffekte an
   • Modifiziere die Easing-Funktionen für Übergänge
   • Stelle sicher, dass Text jederzeit lesbar ist

Schritt 4: Video rendern

1. Mit Remotion CLI rendern:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternative: Remotion MCP verwenden (falls verfügbar):

   • Rufe [remotion_prefix]:render mit Kompositionsdetails auf
   • Gib das Ausgabeformat an (MP4, WebM, etc.)

3. Optimierungsoptionen:

   • Qualitätsstufe einstellen (--quality)
   • Codec konfigurieren (--codec h264 oder h265)
   • Paralleles Rendern aktivieren (--concurrency)

Erweiterte Funktionen

Interaktive Hotspots

Hebe klickbare Elemente oder wichtige Funktionen hervor:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Voiceover-Integration

Füge dem Walkthrough eine Erzählung hinzu:

1. Generiere ein Voiceover-Skript aus den Bildschirmbeschreibungen
2. Verwende Text-to-Speech oder nimm Audio auf
3. Importiere Audio in Remotion mit der <Audio>-Komponente
4. Synchronisiere das Bildschirm-Timing mit dem Voiceover-Tempo

Dynamische Textextraktion

Extrahiere Text aus dem Stitch-HTML-Code für automatische Annotationen:

1. Lade htmlCode.downloadUrl für jeden Bildschirm herunter
2. Analysiere HTML, um wichtige Textelemente zu extrahieren (Überschriften, Schaltflächen, Beschriftungen)
3. Generiere automatische Hinweise für wichtige UI-Elemente
4. Füge sie als zeitlich gesteuerte Texteinblendungen zur Komposition hinzu

Dateistruktur

project/
├── video/                      # Remotion-Projektverzeichnis
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Heruntergeladene Stitch-Screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Bildschirm-Manifest
└── output.mp4                  # Gerendertes Video

Integration mit Remotion Skills

Remotion pflegt eigene Agent Skills, die Best Practices definieren. Überprüfe diese für fortgeschrittene Techniken:

• Repository: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Installation: npx skills add remotion-dev/skills

Wichtige Remotion Skills, die genutzt werden sollten:

• Animationstiming und Easing
• Kompositionsarchitekturmuster
• Leistungsoptimierung
• Audiosynchronisation

Häufige Muster

Muster 1: Einfache Diashow

Einfacher Walkthrough mit Einblende-Übergängen:

• 3-5 Sekunden pro Bildschirm
• Überblendungsübergänge
• Untere Texteinblendung mit Bildschirmtitel
• Fortschrittsbalken oben

Muster 2: Funktionshervorhebung

Fokussiere auf bestimmte UI-Elemente:

• Zoome in bestimmte Bereiche
• Animierte Kreise/Pfeile, die auf Funktionen zeigen
• Zeitlupenbetonung bei Schlüsselinteraktionen
• Vorher-Nachher-Vergleiche nebeneinander

Muster 3: Benutzerablauf

Zeige den schrittweisen Benutzerweg:

• Sequenzieller Bildschirmablauf mit Richtungsschiebern
• Nummerierte Schritteinblendungen
• Hebe Benutzeraktionen hervor (Klicks, Tippen)
• Verbinde Bildschirme mit animierten Pfaden

Fehlerbehebung

Problem	Lösung
Unscharfe Screenshots	Stelle sicher, dass heruntergeladene Bilder in voller Auflösung vorliegen; überprüfe die Qualitätseinstellungen von screenshot.downloadUrl
Verschobener Text	Überprüfe, ob die Bildschirmabmessungen mit der Kompositionsgröße übereinstimmen; passe die Textpositionierung basierend auf der tatsächlichen Bildschirmgröße an
Ruckelige Animationen	Erhöhe die Bildrate auf 60fps; verwende korrekte Spring-Konfigurationen mit angemessener Dämpfung
Remotion-Build schlägt fehl	Überprüfe die Node-Versionskompatibilität; stelle sicher, dass alle Abhängigkeiten installiert sind; überprüfe die Remotion-Dokumentation
Timing fühlt sich falsch an	Passe die Dauer pro Bildschirm im Manifest an; erstelle eine Vorschau in Remotion Studio; teste mit tatsächlichen Benutzern

Best Practices

1. Seitenverhältnis beibehalten: Verwende die tatsächlichen Stitch-Bildschirmabmessungen oder skaliere proportional
2. Konsistentes Timing: Halte die Anzeigedauer der Bildschirm konsistent, es sei denn, bestimmte Bildschirme sollen hervorgehoben werden
3. Lesbarer Text: Stelle ausreichenden Kontrast sicher; verwende angemessene Schriftgrößen; vermeide überladene Einblendungen
4. Sanfte Übergänge: Verwende Spring-Animationen für natürliche Bewegungen; vermeide ruckartige Schnitte
5. Gründliche Vorschau: Erstelle immer eine Vorschau in Remotion Studio vor dem endgültigen Rendern
6. Assets optimieren: Komprimiere Bilder angemessen; verwende effiziente Formate (PNG für UI, JPG für Fotos)

Beispielverwendung

Benutzeraufforderung:

Suche die Bildschirme in meinem Stitch-Projekt "Taschenrechner-App" und erstelle ein Remotion-Video, 
das einen Walkthrough der Bildschirme zeigt.

Agent-Workflow:

1. Liste Stitch-Projekte auf → Finde "Taschenrechner-App" → Extrahiere die Projekt-ID
2. Liste Bildschirme im Projekt auf → Identifiziere alle Bildschirme (Start, Verlauf, Einstellungen)
3. Lade Screenshots für jeden Bildschirm herunter → Speichere in assets/screens/
4. Erstelle screens.json-Manifest mit Bildschirm-Metadaten
5. Generiere Remotion-Komponenten (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Zeige Vorschau in Remotion Studio → Verfeinere Timing und Übergänge
7. Rendere das endgültige Video → calculator-walkthrough.mp4
8. Melde Fertigstellung mit Videovorschau-Link

Tipps für den Erfolg

• Fange einfach an: Beginne mit einfachen Einblende-Übergängen, bevor du komplexe Animationen hinzufügst
• Folge Remotion-Mustern: Nutze die offiziellen Remotion Skills und die Dokumentation
• Verwende Manifest-Dateien: Halte Bildschirmdaten in JSON organisiert für einfache Aktualisierungen
• Vorschau häufig: Verwende Remotion Studio, um Probleme frühzeitig zu erkennen
• Barrierefreiheit beachten: Füge Untertitel hinzu; stelle sicher, dass Text lesbar ist; verwende klare Bilder
• Für die Plattform optimieren: Passe die Videoabmessungen an die Zielplattform an (YouTube, soziale Medien, etc.)

Referenzen

• Stitch-Dokumentation: https://stitch.withgoogle.com/docs/
• Remotion-Dokumentation: https://www.remotion.dev/docs/
• Remotion Skills: https://www.remotion.dev/docs/ai/skills
• Remotion MCP: https://www.remotion.dev/docs/ai/mcp
• Remotion-Übergänge: https://www.remotion.dev/docs/transitions

Wann verwenden

Verwende diese Fähigkeit, wenn du an Aufgaben arbeitest, die mit ihrem primären Bereich oder ihrer Funktionalität, wie oben beschrieben, zusammenhängen.

Einschränkungen

• Verwende diese Fähigkeit nur, wenn die Aufgabe eindeutig dem oben beschriebenen Umfang entspricht.
• Behandle die Ausgabe nicht als Ersatz für umgebungsspezifische Validierung, Tests oder Expertenüberprüfung.
• Halte inne und frage nach Klärung, wenn erforderliche Eingaben, Berechtigungen, Sicherheitsgrenzen oder Erfolgskriterien fehlen.