Communitygithub.com

pj1433139082-hue/video-design-skills

Generiert MP4-Videos mit Remotion gemäß dem Video-Design-System (DESIGN.md). Wird verwendet, wenn der Nutzer nach der remotion-consult oder dem Erhalt der DESIGN.md die Erstellung eines Videos wünscht.

Was ist video-design-skills?

Diese Fähigkeit generiert MP4-Videos mit Remotion, basierend auf einer DESIGN.md, die zuvor durch `remotion-consult` erstellt wurde. Sie ist speziell für Entwickler und KI-Agenten konzipiert, die Videoinhalte auf Code-Ebene steuern möchten. Die Kernlogik ist untertitelgetrieben (SRT-Dateien), wobei die Zeitstempel präzise auf Einzelbilder abgestimmt werden. Animationen werden aus einer zentralen Bewegungsbibliothek importiert und Medieninhalte über eine sogenannte „Cross-Harness-Routing“-Struktur bezogen. Die Fähigkeit umfasst einen detaillierten Workflow mit fünf Schritten: Modusauswahl, Untertitelverarbeitung, Referenzsuche, Erstellung von Anti-Slop-Regeln und einem strengen Abnahmeprozess in fünf Schritten mit Frame-Extraktion und mehrstufiger Qualitätsprüfung. Sie unterstützt sowohl den Remotion- als auch den HyperFrames-Renderkern und legt großen Wert auf die Einhaltung des Designs, ohne die Ausrichtung eigenmächtig zu ändern. Standardmäßig wird nur berichtet; Änderungen an der Designrichtung werden nicht eigenmächtig vorgenommen.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/pj1433139082-hue/video-design-skills/tree/HEAD/skills/remotion-build

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

remotion-build — Remotion-Videos generieren

Generiert MP4 mit React-Code gemäß DESIGN.md (aus remotion-consult). Untertitel sind die einzige Zeitachse, Effekte werden aus der globalen Bewegungsbibliothek importiert, Medien werden über Cross-Harness-Routing bezogen.

Workflow

Schritt 0 — Modusauswahl (vier Optionen, zuerst festlegen, dann loslegen)

  1. Nach Kategorie-Vorlage: Der Nutzer wünscht einen bestimmten Stil oder wählt aus remotion-shared/categories/ eine der vier Kategorien (Sprecheruntertitel/Datenvisualisierung/Produktdemo/Markenanimation) → Lese DESIGN.template.md + motion-list.md dieser Kategorie, übernimm das Designsystem und ersetze nur Inhalt und Untertitel.
  2. Nach Referenz: Der Nutzer gibt ein Referenzvideo (höchste Priorität) oder wählt aus remotion-shared/video-real-library.md → Analysiere dessen Untertitelstil/Übergänge/Rhythmus und repliziere ihn mit Komponenten aus der globalen Bewegungsbibliothek.
  3. Freies Design: Keine Referenz, keine Vorlage → Vermeide nur die negativen Prompt-Wörter aus video-anti-slop.md.
  4. Nach vorhandener DESIGN (consult-Ergebnis): consult hat DESIGN + Stilbeispiele bereits festgelegt → Führe strikt DESIGN tokens/§8 aus, frage nicht erneut nach der Stilrichtung (Schritt 0.5 gleicht nur die Abnahmekriterien ab, wiederholt nicht Phase 1 der Klärung). Bei Unsicherheit: Liste die Optionen dem Nutzer auf.

Render-Kern: Zweite Wahl (fünfte Dimension, in DESIGN markiert): Zusätzlich zu den vier Pfaden oben wird der Render-Backend festgelegt (diese Fähigkeit standardmäßig Remotion-Kern; nur wenn DESIGN es angibt oder der Nutzer es verlangt, HyperFrames-Kern):

  • Remotion-Kern (Standard): React-Komplexe Effekte / Shotcraft-Karten / src/-Schichten + Sequence + useCurrentFrame. Verwende ihn, wenn die höchste Animationsfreiheit erforderlich ist.
  • HyperFrames-Kern (HeyGen Open-Source HTML→MP4, optional): index.html Datenattribute + GSAP-Timeline (npx hyperframes init/render, lokal kostenlos) → Näher am Web-Feeling, mit integriertem npm run check (Lint + Kontrast + Bewegung). Medien/BGM/Untertitel/Abnahme werden alle wiederverwendet, nur die Rendermethode ändert sich. Regeln siehe references/hyperframes-guide.md.
  • Entscheidung: Komplexe Karten (Flip/Partikel/3D) oder bestehendes Remotion-Projekt → Remotion; Reine HTML/GSAP-Animationen, Web-Feeling gewünscht, integriertes Lint erwünscht → HyperFrames. Mische nicht beide Kerne im selben Projekt.

Schritt 0.5 — Anforderungsabgleich + Abnahmekriterien (grill-me, obligatorisch, ≤10 Runden)

Führe die Fähigkeit grill-me aus, um die Anforderungen abzugleichen: Ein-Satz-Anforderung, Bildformat/Dauer/Plattform, Untertitelquelle (.srt/.vtt/sprechskript/von Grund auf), Modus, Stilrichtung. Muss Abnahmekriterien der vier Arten liefern:

  • Struktur: Kategorie/Bildformat/Dauer/fps
  • Visuell: Untertitel-Schriftart/Farbpalette/Komposition stimmen mit DESIGN.md oder Referenz überein (Freier Modus: "Kein KI-Geschmack")
  • Inhalt: Alle Untertitel vollständig, keine Tippfehler, Zeitstempel decken das gesamte Video ab, Text ist authentisch
  • Technisch: Bildgenaue Untertitel (Untertitel existieren am Satzanfang und -ende frame-genau), Still-Frame-Extraktion erfolgreich, MP4-Rendering erfolgreich

Wenn nach 10 Runden keine Einigung erzielt wurde → Dokumentiere ungelöste Punkte und fahre mit dem Bau fort.

Schritt 1 — Untertitelgetriebener Prozess (Kern)

Gemäß references/captions-guide.md:

  1. Quellen-Routing: Vorhandene .srt/.vtt → Verwende direkt; Vorhandenes Sprechskript.md → Entwerfe einen Rohentwurf .srt; Von Grund auf → Erstelle zuerst ein Sprechskript, dann .srt.
  2. parseSrt({input}) → Caption[], validiere auf leere Abschnitte, Zeitüberlappungen und Bereichsüberschreitungen.
  3. Frame-Ausrichtung: startFrame = Math.round((startMs/1000)*fps), endFrame = Math.round((endMs/1000)*fps), jeder Satz als <Sequence from={startFrame} durationInFrames={endFrame-startFrame}>.
  4. Wort-/Satz-Hervorhebung: createTikTokStyleCaptions → CaptionLayer-Komponente; Chinesischer ganzer Satz als einzelnes Token → Reduzieren auf Satzebene (Entscheidung in DESIGN.md highlightMode).
  5. Der visuelle Rhythmus wird an die startMs des ersten Untertitel-Satzes gebunden; Gesamtdauer des Videos durationInFrames = round(max(endMs)/1000*fps) + trailing.
  6. Nach Wortänderungen: serializeSrt zurückschreiben.

Schritt 1.5 — Sprachgesteuerte srt-Neuerstellung (zeitliche Annahme ist wirklich ausgelöst, zuerst Synchronisation, dann Frames extrahieren)

Sprachvideos: Synchronisation ist ein obligatorischer Prozess (nicht nach dem Nutzer fragen): TTS-Erzeugung → ffprobe-Messung → srt-Neuerstellung zur Festlegung der Zeitachse, die Zeitachse basiert auf den tatsächlichen TTS-Messungen (DESIGN §4 zeitliche Annahme ist wirklich ausgelöst). Zuerst Synchronisation, dann Frames extrahieren – Vermeide, dass die srt-Ausrichtung aus Schritt 1 durch die anschließende Synchronisation aufgehoben wird und die vorherigen Schritte umsonst waren.

  1. python scripts/media/tts_gen.py --provider edge-tts --lines lines.txt --save-dir public/audio/ --voice <voice> (Standardmäßig Key-los als Fallback; wenn MiniMax verfügbar ist, ändere explizit zu --provider minimax, für Cloud-basiertes TTS in China siehe mmx-media-pipeline.md §2).
  2. ffprobe-Messung der Dauer jedes Satzes (ffprobe -show_entries format=duration), 0,8 s Atempause zwischen den Sätzen.
  3. srt-Neuerstellung (rebuild_srt.py): Start/Ende jedes Satzes = Summe der gemessenen Dauern + Atempause; Schreibe public/captions.srt.
  4. Aktualisiere die Frame-Intervalle SHOTS der Wurzel gemäß der neuen srt (round(ms/1000*fps)), hänge an jede Sequence <Audio src={staticFile("audio/s{n}.mp3")}> an.
  5. BGM: Wenn keine KI-Musik benötigt wird, beziehe sie aus der Projekt-lizenzierten Medienbibliothek; wenn eine Musik nach Prompt benötigt wird, verwende standardmäßig ACE-Step zur lokalen Generierung, mit dem Cloud-Musik-Backend als optionaler Alternative. Nach dem Bezug: Schneide auf die volle Länge zu (ffmpeg -t Videosekunden), reduziere die Lautstärke, um die Sprachaufnahme nicht zu übertönen (0,22-0,3).
  6. Szenen-Frame-Budget + Vorabprüfung des Timings (verhindert "Schlüsseleffekt erscheint nicht", 3 Mal getestet): Das to-from jedes Satzes, das von rebuild_srt ausgegeben wird, ist das Frame-Budget dieser Szene. Überprüfe vor dem Schreiben einer Karte/Animation: Der letzte Keyframe innerhalb der Karte ≤ Szenenbudget, sonst komprimiere das Timing der Karte (nicht erst bei der Abnahme feststellen):
    • Kurze Sätze (2-3s≈60-90f): Schlusseffekte wie Stempel/Kreise/Lichter überschreiten am leichtesten das Budget (S2 roter Stempel ursprünglich 70-88f überschritt 68f-Satz → auf 55-65f komprimiert; S6 Lichter ursprünglich 46-70 überschritt 70f → auf 46-64 komprimiert; S9 5 Kreise ursprünglich 136f überschritt 128f-Satz → auf 108f komprimiert).
    • Regel: Letzter Keyframe der Karte = Start + Gesamtstagger + End-Stillstand muss ≤ Satzbudget sein; wenn überschritten, komprimiere Stagger/Einzelzeit proportional, behalte End-Stillstand ≥4f.

Schritt 2 — Referenz suchen

Referenz vom Nutzer hat höchste Priorität → video-real-library.md → Freies Design. Wenn es eine Referenz gibt, verwende die "Animations-Dekompositionsmethode" (Referenz → Kombination von Komponenten aus der globalen Bewegungsbibliothek, siehe motion-patterns-video.md).

Schritt 3 — Negative Prompt-Wörter (Video-kompakt, einzige harte Einschränkung)

  • Nicht den gleichen Untertitel-Rhythmus während des gesamten Videos verwenden (jeder Satz gleich lang, wortweise Hervorhebung ohne Unterschied auf dem Bildschirm)
  • Nicht jede Szene zentriert mit der gleichen Komposition, nur Fade oder nur harte Schnitte durchgehend
  • Nicht gleichmäßig geschnittene Bilder (alle N Sekunden ein Schnitt = kein Atemgefühl)
  • Nicht den standardmäßigen violetten-indigofarbenen Verlaufshintergrund verwenden, nicht die alltägliche KI-Schriftart
  • Nicht leere Hintergrund-Untertitel ("Willkommen", "Lasst uns beginnen")
  • Animation muss vorhanden sein: Jede Szene mindestens eine Eintrittsanimation + Übergang zwischen den Szenen
  • Ende der Liste.

Schritt 4 — Bauen (technische Mindestanforderungen)

Gemäß references/remotion-build-guide.md:

  • Projekt-Initialisierung: Kopiere das Grundgerüst aus _dev/remotion-tutorial + npm i @remotion/captions@<Kompatible Version> + behalte den Chrome-Pfad bei.
  • Importiere Komponenten aus der globalen Bewegungsbibliothek (Arbeitsplatz/Video/_Bewegungsbibliothek/) oder kopiere sie nach src/components/.
  • Optionale Einbindung von Karten: Wenn DESIGN §8.2 eine Karte auswählt, führe gemäß remotion-shared/video-shots-spec.md die "Schritte zur Einbindung einer Karte" aus (einschließlich [copy]/[Idee borgen] Markierung); Chinesische Filme borgen standardmäßig die Idee.
  • src-Schichten: Root.tsx / theme.ts / captions.ts / components/.
  • Deterministische Animationen (useCurrentFrame/interpolate/spring, verboten: Math.random und Browser-Timer).
  • Wenn DESIGN.md vorhanden ist, führe strikt die tokens aus.
  • Medien gemäß references/video-image-spec.md über Cross-Harness-Routing (Codex image_gen / GPT-Prompt-Hin- und Her / Nutzer gibt Bilder).
  • Nach der Medienerstellung: Überprüfung der Gliederung (obligatorisch): Nach der Medienerstellung, überprüfe Satz für Satz gegen die Gliederung in DESIGN §8 – ① Passt das Bild zum semantischen Inhalt/Layout dieses Satzes (Vision-Bewertung der Übereinstimmung, <7 erneute Generierung oder Prompt-Anpassung) ② Sind die großen Schlüsselwörter mit dem Szenenbild koordiniert und verdecken sie es nicht ③ Entspricht die Z-Reihenfolge der Ebenen dem Gliederungsdesign. Wenn nicht → Passe die Schlüsselwörter an oder generiere das Medium neu, kein "Generieren und Verwenden"; Wähle aus mehreren Kandidaten pro Bildelement das beste aus.

Schritt 5 — Abnahmeschluss (grill-me Knotentabelle)

KnotenAuslöserMax. RundenAustrittsbedingung
StartSchritt 0.510 RundenAbnahmekriterien festgelegt
ÄnderungNutzer schlägt Änderung vor5 Runden/MalWas geändert wird, ist klar; jede Runde gegen Abnahmekriterien prüfen
FinalVor Lieferung4 RundenAlle Abnahmekriterien einzeln durchgehen

Harte Abnahmeaktionen (zuerst Frames extrahieren, dann rendern, um langes Rendern ohne Ergebnis zu vermeiden): Schichtenquantifizierung (4 Schichten, in DESIGN §8.2 Beweismomente: Keyframes = Satzanfang/Mitte/0,82-Endzustand):

  • Schicht 1 Hintergrundbild (Szenenbild selbst): python scripts/media/layout_calc.py <Szenenbild> – Komposition/Freiraum/empfohlenen Textbereich (basierend auf der Leerraumstruktur des Bildes den leeren Bereich finden, nicht den oberen Bereich erzwingen; wenn der obere Bereich beeinträchtigt ist → Text in die text_zone Empfohlenen Bereich verschieben oder ein reineres Bild neu generieren);
  • Schicht 2 Hintergrundbild+Text (Still mit Text): layout_calc Textplatzierung + frame_judge --subtitle-hex echten WCAG-Kontrast (Großtext ≥3,0/Fließtext ≥4,5);
  • Schicht 3 +Animation (aufeinanderfolgende Frames): Framedifferenz/aufeinanderfolgende Frames Vision zur Beurteilung, ob die Animation tatsächlich stattfindet + die Animation überlappt nicht mit der Szene (wenn die Karte ein vollständiges Bild ist, wird sie nicht als Szenenbild-Overlay behandelt, visuelles Modus siehe §8.2);
  • Schicht 4 Gesamt (fertiges Video): frame_judge gesamtes Video + audio_sync_check.py Audio-Video-Synchronisation + Verdeckungsprüfung + Vier-Fähigkeiten-Bewertung + Aktionsbeweis.
  1. npx remotion compositions zur Bestätigung der echten ID;
  2. Still-Frame-Extraktion 3-5 Bilder (Satzanfang/Satzende/Übergangsframes) – Extrahiere "Endzustands-Frames", nicht mitten in der Animation (Lehre aus der Praxis 2026-08-17): Extrahiere Frames nach Abschluss der Aktion (0,82-Endzustand / nach dem End-Stillstand), nicht während laufender Animationen – Zwischenframes führen dazu, dass Vision/das menschliche Auge fälschlicherweise "fehlend/statisch/schwarzer Rahmen" beurteilt (S2 Flip-Karte mitten ohne rotem Stempel, S6 Tachometer-Scrollen mitten ohne Periode, S7 Zeitlinie Mitte ohne Personenbild – alles Fehler im Extraktionszeitpunkt; extrahiere den Endzustand). Untertitel vorhanden und ausgerichtet, Komposition nicht gebrochen;
  3. Untertitel-Ausrichtungsprüfung: Satzanfangs-Frame Untertitel bereits erschienen, Satzende-Frame Untertitel nicht vorzeitig verschwunden;
  4. Automatisierte harte Indikatorenbewertung: Nach Frame-Extraktion führe python scripts/media/frame_judge.py preview/*.png --subtitle-hex <DESIGN Untertitelfarbe, z.B. E8833A> --subtitle-threshold 3.0 --text-bg-hex <Text-Kapsel-Hintergrund, z.B. F2F0EB> aus (--text-region wenn Text in der Ecke ist, gib die tatsächliche Position tl/tr/bl/br/center, um Fehlalarme am unteren Rand zu vermeiden; --text-bg-hex wenn der Kapsel-Hintergrund bekannt ist, berechne direkt den wahren Kontrast von Untertitel vs. Hintergrund, überspringe den Modus – Modus erfasst die Szenenfarbe, ungenau wenn Text auf der Szene liegt; Großtext-Schwellenwert 3.0 / Fließtext 4.5; jedes FAIL löst eine Überarbeitung aus); optional pip install iqa-pytorch dann NIMA-Ästhetik-Score hinzufügen (>6,5 als Referenz notieren); Indikatorschwellenwerte siehe references/video-quality-metrics.md; FAIL wegen geringer Helligkeit bei dunklem Design blockiert nicht (siehe Erklärung zu dunklem Design in metrics, Maßgeblich ist der Kontrast);
  5. Jedes extrahierte Frame gegen Checkliste prüfen (schwache Punkte <3 lösen Überarbeitung aus):
    • Komposition: ≥2 visuelle Elemente, nicht jede Szene zentriert, korrekte Z-Reihenfolge der Ebenen (bg/mid/fg)
    • Untertitel: Vorhanden und ausgerichtet, lesbar (Kontrast ≥3:1), keine defekten Zeichen
    • Übergänge: Zwischen den Sätzen gibt es einen Übergang/Eintrittsanimation, kein nackter Schnitt oder Stillstand
    • Medien: Keine KI-Kauderwelsch-Zeichen, Ebenen entsprechen §8.1, transparente Überlagerungen sauber
    • Animation: Mindestens 2 Arten von Animationen in der Szene (Materialein-/ausgang + Schriftart + Hintergrund, drei von zwei), Hintergrund mit Animation
    • Kein KI-Geschmack: Prüfe gegen video-anti-slop.md negative Prompt-Wörter
  6. Verdeckungsprüfung + visuelles Modus-Abgleich (geliehen von paper-collage-video spatial-contract, erweitert 2026-08-16): Frame-Extraktion Satz für Satz prüfen – ① Große Text-Kapsel im reservierten Bereich (oberer Freiraum) ② Hauptobjekt drückt nicht auf Großtext/Untertitelbereich ③ Vordergrund verdeckt nicht das Hauptobjekt im Mittel-/Hintergrund ④ Kartenanimation überlappt nicht mit Szenenbild: Vollbildkarten (Tachometer/Zifferblatt/Partikelsäule/Licht-Szene mit dunklem Hintergrund) dürfen keinesfalls als Szenenbild-Overlay behandelt werden (visueller Modus drei Optionen, siehe DESIGN §8.2) ⑤ Bedeutung der Animation korrespondiert mit dem Satzinhalt (Vision bewertet, ob die Partikelsäule/der Lichtschein/das digitale Scrollen in dieser Szene etwas ausdrückt und ob es mit der semantischen Bedeutung des Voiceovers übereinstimmt; wenn die Bedeutung unklar ist, löse eine Überarbeitung aus). Verdeckung/unklare Bedeutung → Ändere den visuellen Modus oder entferne die überflüssige Karte.
  7. Vier-Fähigkeiten-Prüfung harte Pforte (Wenn eine Pforte nicht bestanden wird → Überarbeitung, nicht Referenz): Führe unabhängig mit Sub-Agenten aus (hallmark/taste werden von einem unabhängigen Agenten ausgeführt, nicht selbstgeprüft und freigegeben durch das Hauptmodell) –
    • taste-skill Pre-Flight (40+ Punkte Geschmacksprüfung)
    • hallmark audit (57 Pforten gegen KI-Klischees)
    • ui-ux-pro-max (UX-Richtlinien: Lesbarkeit/Struktur/Konsistenz)
    • open-design/anti-ai-slop ("Sieben Todsünden" Entvorlagenung) Prüfe gegen extrahierte Frames/fertiges Video, zähle Punkte für Freigabe (von der Jury ergänzt, verhindere Selbstprüfung und Freigabe): hallmark 57 Pforten bestehen ≥90% (≥51 Punkte) für Freigabe, taste 40+ Punkte bestehen ≥85% für Freigabe, ui-ux-pro-max / open-design Schlüsselpunkte alle bestanden; Liste die nicht bestandenen Punkte auf und löse eine Überarbeitung aus, erst wenn alle Pforten bestanden sind, rendern und ausliefern.
  8. npx remotion render <id> out/final.mp4;
  9. Aktionsbeweismomente (geliehen von paper-collage-video proof moments): Gemäß DESIGN §8.2 pro Satz Beweismomente (Satzanfang/Mitte/0,82-Endzustand) Frames extrahieren + überprüfen, ob der Aktionstyp tatsächlich stattgefunden hat (Eintritt ist erfolgt/läuft noch/Endzustand angehalten); ffmpeg -vf "fps=4" extrahiere aufeinanderfolgende Frames → Vision bewertet, ob die Aktion gemäß DESIGN stattgefunden hat – ein einzelner statischer Frame ≠ Aktionsbeweis (Partikel/Licht/Zahlen müssen durch aufeinanderfolgende Frames bestätigt werden); Übergänge glatt/Ein-/Ausgänge ohne Sprünge (video-quality-metrics §4.6);
  10. Audio-Video-Synchronisationsprüfung (Hauptachse bei Sprachvideos, von der Jury ergänzt): Führe mit dem fertigen Video python scripts/media/audio_sync_check.py out/final.mp4 public/captions.srt aus – Innerhalb von ±0,15 s um den Start jedes srt-Satzes sollte eine Sprachton vorhanden sein (RMS≥0,01); Stille am Satzanfang = Sprachfehlausrichtung/Fehlen/Satzende abgeschnitten → Überarbeitung;
  11. Gehe die Abnahmekriterien einzeln durch → STATUS PASS/FAIL/BLOCKED, NEXT_OWNER.

Rote Linien

  • Untertitelgetrieben ist eine harte Einschränkung: captions.srt existiert, ist die einzige Quelle der Zeitachse, die Dauer wird daraus abgeleitet.
  • Zuerst Frames extrahieren, dann rendern: Still nicht bestanden, kein Rendern des gesamten Videos.
  • Karten-Idee borgen, nicht erzwingen: DESIGN §8 wählt Karten aus, dann einbinden (copy shotcraft/demos/{Klasse}/{Karte} anpassen); wenn keine Karte ausgewählt ist oder für chinesische Filme Idee borgen, gilt das nicht als Fehlen; nicht eingebundene Karte ist nicht BLOCKED.
  • Medien echte Bildgenerierung, kein SVG: Hauptmedien priorisieren Codex oder bereits konfiguriertes Bild-Backend, Transparenz über --transparent/remove_white_bg.py.
  • Programmatische Datenkarten priorisieren echtes Kopieren der vollständigen Version aus shotcraft, keine handgeschriebenen reduzierten SVG (Lehre aus der Praxis 2026-08-17): Selbstgebaute Datenkarten (Zifferblatt/Kreis/Tachometer/Diagramm), die handgeschriebene reduzierte SVG sind (nackte circle/line/path, ohne Skala/Rotzone/Nabe/Glanzdetails), werden grob (S9 Ring handgeschriebene Version mmx vision 3,5/10, echte Kopie von shotcraft NeedleSweepSelftest mit vollständigen Details 8,5/10). Datenkarten immer vollständig aus shotcraft demos/data, typography echt kopieren (Skala/Haupt/Neben/Glanz/Zifferblattnabe/Zeigerspitze etc. alle Details vorhanden), dann neu einfärben; nur einfache Dekorationen (Hintergrund-Lichtflecken/Boden-Schiene) programmatisch zeichnen.
  • Sprachgesteuerte srt-Neuerstellung ist obligatorisch (Schritt 1.5, zuerst Synchronisation, dann Frames extrahieren): Bei Sprachvideos muss Schritt 1.5 TTS→ffprobe→srt-Neuerstellung zur Festlegung der Zeitachse erfolgen (Zeitachse basiert auf tatsächlichen TTS-Messungen, DESIGN §4), Frame-Extraktion zur Abnahme erfolgt nach der srt-Neuerstellung durch die Synchronisation, nicht den Nutzer fragen.
  • Ändere die Designrichtung nicht: DESIGN.md ist festgelegt; befolge es; Wenn eine Änderung der Richtung erforderlich ist, gehe zurück zu remotion-consult.
  • Verbieten von Erfindungen: Untertitel/Daten nicht erfinden.

Referenzdateien

DateiWann lesen
references/captions-guide.mdSchritt 1 Untertitel-Zeitstempel-Ausrichtung (Kern)
references/remotion-build-guide.mdSchritt 4 Projektstandards
references/motion-patterns-video.mdSchritt 2/5 Animationsimplementierung
references/video-image-spec.mdSchritt 4 Medien-Routing
references/codex-imagegen.mdSchritt 4 bei Verwendung von Codex
references/mmx-media-pipeline.mdSchritt 4 Medien-Backend (MiniMax optional + TTS/BGM-Fallback-Kette + bekannte Fallstricke)
references/video-quality-metrics.mdSchritt 5 Automatisierte Indikatorenbewertung (frame_judge.py + VMAF/NIMA/ASL Schwellenwerte)
references/hyperframes-guide.mdSchritt 0 bei Render-Kern = HyperFrames: HTML-Datenattribute/GSAP/check-Regeln + CLI
references/hyperframes-blocks.mdBei HyperFrames-Renderkern: Auswahl der Animationsblöcke: registry blocks 154 nach Kategorie schnell nachschlagen (entspricht shotcraft)
.claude/skills/remotion-shared/video-anti-slop.mdSchritt 3 Negative Prompt-Wörter Basislinie
.claude/skills/remotion-shared/video-tokens-spec.mdBeim Schreiben von theme.ts
.claude/skills/remotion-shared/categories/{Kategorie}/motion-list.mdAuswahl der Animationskombinationen
.claude/skills/remotion-shared/video-shots-spec.mdKartenrezept-System + maßgebliche Techniken (Build-Auswahl der Karte: demos/{Klasse}/{Karte} ins Projekt kopieren)
.claude/skills/remotion-shared/aesthetic-judgment/Schritt 5 Abnahme: Fotografie/Schnitt/Frontend-Typografie sechs Achsen bewerten (<3 löst Überarbeitung aus)
.claude/skills/ui-ux-pro-max/SKILL.mdDesign-Regel-Engine: Schritt 4 beim Bauen UX-Richtlinien + Prioritäten prüfen
.claude/skills/taste-skill/SKILL.mdSchritt 5 Endkontrolle: Pre-Flight 40+ Punkte (Selbstkontrolle vor Lieferung)
.claude/skills/hallmark/SKILL.mdSchritt 5 Designprüfung: 57 Pforten / hallmark audit (vor Abnahme)
Datenbank/AI-Tools/design-skills/open-design/craft/anti-ai-slop.mdSchritt 3 Entvorlagenungsregeln ("Sieben Todsünden") + 151 Designsystem-Alternativen
.claude/skills/design-shared/review-panel.mdPrüfungspanel: agency-agents Perspektive + Designsystem-Bibliothek/ästhetische Referenzbibliothek Kriterien (Schritt 5 Abnahmebewertung)

Ausgabe und Abschluss

STATUS: PASS | FAIL | BLOCKED
Output: Pfad zu out/final.mp4 + Pfad zu preview/ extrahierte Frames
Abnahmekriterien: einzeln Erreicht / Nicht erreicht / Ausstehend
NEXT_OWNER: user (Ergebnis ansehen) | remotion-consult (Richtung ändern)
Ausstehend: Ungeklärte Punkte

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Verwandte Skills