nyosegawa/skills

Remotion Promo Video Factory

Nutzen Sie diese Fähigkeit, um wiederholbare, hochwertige App-Einführungsvideos in Remotion zu produzieren. Diese Fähigkeit ist bewusst app-agnostisch und funktioniert sowohl für UI-lastige Produkte als auch für Nicht-UI-Produkte.

Kernregeln

1. Offizielle Remotion-Skill-Regeln als primäre Autorität verwenden.
2. Alle Bewegungen über useCurrentFrame() mit interpolate() und spring() steuern.
3. Zeit in Sekunden entwerfen, dann mit sec() umrechnen.
4. Zuerst einen App-Typ-Blueprint auswählen; nicht standardmäßig nur UI-Demos verwenden.
5. Wiederverwendbare visuelle Primitive gegenüber einmalig aufgenommenem Material bevorzugen.
6. Typografie-Größenregeln vor der Animationsverfeinerung anwenden.
7. Jede größere Bearbeitung mit Bildaufnahmen validieren, dann Typprüfung und Rendering durchführen.
8. Keine Qualitätsaussagen ohne bildgenaue Beweise treffen.
9. Niemals ohne explizite Nutzerfreigabe committen, pushen oder Aufgaben als erledigt markieren.

Offizielle Skill-Interop

Lesen Sie zuerst references/official-skill-integration.md.

Erforderliche offizielle Regelgruppen nach Phase:

1. Kompositionsphase: compositions, parameters, calculate-metadata
2. Bewegungsphase: animations, timing, sequencing, transitions
3. Asset-Phase: assets, images, fonts
4. Optionale Phase: audio, videos, subtitles, text-animations

Referenzen

• App-Typ-Auswahl und Szenenvorlagen: references/app-type-blueprints.md
• Offizielle Remotion-Regelzuordnung: references/official-skill-integration.md
• Zeitstrahl und Bewegungsmuster: references/timeline-and-motion.md
• Timing-Budgets und Debug-Loop: references/timing-and-debug-loop.md
• Typografie- und Lesbarkeitsregeln: references/typography-and-readability.md
• Wiederverwendbare visuelle Bausteine: references/visual-primitives.md
• QA-Checkliste: references/qa-checklist.md
• Fehlerbehebungsleitfaden: references/troubleshooting.md

Arbeitsablauf

Schritt 1: Eingaben sammeln

Sammeln Sie aus dem lokalen Projektkontext (README, Dokumentation, Landing Page, vorhandene UI, CLI/API-Beispiele):

1. Zielgruppe
2. Kernversprechen in einem Satz
3. Verfügbare Nachweis-Assets (UI, Code, Logs, Metriken, Erfahrungsberichte)
4. Verfügbare Medien-Assets (Logo, Screenshots, Clips, Audio)

Schritt 2: App-Typ-Blueprint auswählen

Lesen Sie references/app-type-blueprints.md und wählen Sie einen aus:

1. UI-zentrierte App
2. API/SDK-App
3. Entwickler-Tool / Infrastruktur-App
4. KI/Automations-App

Erstellen Sie eine Shot-Liste basierend auf dem ausgewählten Blueprint.

Schritt 3: Erzählung und Dauer

1. Definieren Sie den Erzählbogen: Hook -> Problem -> Mechanismus -> Beweis -> CTA
2. Wählen Sie die Ziellänge: 15s, 30s, 45s oder 60s
3. Weisen Sie Szenendauern vor der Implementierung zu

Schritt 4: Kompositionssetup

1. Definieren Sie Composition in src/Root.tsx
2. Fügen Sie schema und defaultProps hinzu
3. Berechnen Sie die Dauer in calculateMetadata
4. Verbinden Sie Szenen in src/Video.tsx mit TransitionSeries

Schritt 5: Szenenkonstruktion

1. Bauen Sie zuerst wiederverwendbare Komponenten in src/components
2. Stellen Sie Szenen in src/scenes mit diesen Komponenten zusammen
3. Verwenden Sie absolute Positionierung mit Konstanten für Layout und Timing
4. Halten Sie Szenendateien fokussiert auf Orchestrierung, nicht auf Details der niedrigen UI-Ebene

Schritt 6: Typografie-Durchlauf

Lesen Sie references/typography-and-readability.md und setzen Sie zuerst alle wichtigen Textgrößen.

1. Wenden Sie die empfohlenen Größenbereiche für 1920x1080 an
2. Respektieren Sie harte Mindestwerte, sofern nicht explizit begründet
3. Bestätigen Sie die Lesbarkeit auf Mobilgeräten/iOS vor der Animationsverfeinerung

Schritt 7: Bewegungsdurchlauf

1. Verwenden Sie Trapez-Fades für Lesbarkeit
2. Verwenden Sie Federn für Eingänge und cursorähnliche Bewegungen
3. Fügen Sie pro Szene exitOpacity hinzu, um Überlappungsartefakte während Übergängen zu vermeiden
4. Verwenden Sie Overlays/Beschriftungen, um Phasenwechsel explizit zu machen

Schritt 8: Timing-Validierung

Lesen Sie references/timing-and-debug-loop.md und validieren Sie Timing-Budgets:

1. Prüfen Sie Textverweildauer und Lesefenster
2. Prüfen Sie Verarbeitungs- und Ergebnis-Halte-Dauern
3. Prüfen Sie Überlappung und Übergabe-Timing
4. Korrigieren Sie Zeitstrahl-Konstanten vor der Optimierungsarbeit

Schritt 9: QA-Loop (Beweise erforderlich)

1. Erfassen Sie Schlüsselbilder nach jeder wesentlichen Änderung
2. Überprüfen Sie visuelle Klarheit, Timing, Überlappung und Kompositionsbalance
3. Dokumentieren Sie Bestehen/Nichtbestehen-Beweise in einem Debug-Log
4. Iterieren Sie, bis alle kritischen Prüfpunkte bestanden sind

Verwenden Sie bei Bedarf scripts/capture-frames.sh.

Wenn Bildlesetools fehlschlagen oder keinen brauchbaren Inhalt liefern, erfassen Sie erneut und wiederholen Sie den Vorgang. Fahren Sie nicht mit nicht verifizierbaren Prüfungen fort.

Schritt 10: Finale Validierung

1. npx tsc --noEmit
2. npm run -s build
3. npm run -s build:gif falls verfügbar
4. Finales mp4 rendern und Laufzeit sowie Ausgabegröße überprüfen
5. Wichtige Zeitstempel gegen das beabsichtigte Szenenverhalten erneut prüfen

Verwenden Sie bei Bedarf scripts/verify-build.sh.

Schritt 11: Übergabe und Freigabe

1. Berichten Sie eine evidenzbasierte QA-Zusammenfassung (was bestanden/fehlgeschlagen ist und warum)
2. Listen Sie bekannte Kompromisse oder Restrisiken auf
3. Fordern Sie explizite Freigabe an, bevor Sie committen/pushen/als erledigt markieren

Ausgabeformat

Wenn Sie über die Arbeit berichten, fügen Sie Folgendes ein:

1. Ausgewählter App-Typ und Blueprint
2. Szenenstruktur und endgültige Dauer
3. Wichtigste implementierte Komponenten
4. Wichtige Animationsentscheidungen
5. Timing-Budget-Prüfungen und Ergebnisse
6. Validierungsbefehle und Ergebnisse
7. Verbleibende Risiken oder Folgemaßnahmen

Leitplanken

1. Verwenden Sie Img + staticFile() für lokale Bilder.
2. Laden Sie Schriftarten auf Modulebene, nicht innerhalb von Effekten.
3. Halten Sie Sequence-Layout und Premount-Einstellungen kompatibel.
4. Verwenden Sie harte Typografie-Mindestwerte aus references/typography-and-readability.md.
5. Konzentrieren Sie komplexe Effekte in einem Brennpunkt.
6. Optimieren Sie nicht für zu viele Ziele in einem Schnitt; behalten Sie eine einzige primäre Botschaft.
7. Beschreiben Sie die Ausgabe niemals als "perfekt" ohne explizite Beweise.
8. Überspringen Sie QA-Beweise nicht, selbst wenn Renderbefehle erfolgreich sind.