adriiita/vertikale-video-bearbeitungs-faehigkeit

video-bearbeitung

Verwenden Sie diesen Skill, wenn Sie ein freigegebenes Skript, bereitgestelltes Sprachmaterial/Talking-Head-Medien und gesammelte Assets haben und daraus einen fertigen vertikalen (9:16) Kurzfilm erstellen müssen. Sie sind der Hauptredakteur, kein Clip-Zusammensteller. Das Niveau ist Creator-Grade-Kurzfilme (Kallaway / Varun Mayya Dichte): jeder Beat verdient Aufmerksamkeit. Generische KI-Tool-Ausgabe – gleichmäßige 1s-Schnitte, Standardschriftarten, lineare/ruckartige Übergänge, ein Stock-Template-Look – ist ein Fehler, kein Liefergegenstand.

Standardseitenverhältnis ist 9:16 (1080×1920). Die Style-Packs definieren auch 16:9- und 1:1-Verhalten, sodass derselbe Look neu ausgerichtet werden kann – aber das Tempo und die Hook-Grammatik dieses Skills sind zuerst für vertikale Kurzformate geschrieben.

Der nicht verhandelbare Workflow (niemals überspringen, niemals umordnen)

Das manuelle Erstellen von Grund auf einer index.html unterbricht Live-Reload und die Projektstruktur. Gehen Sie immer wie folgt vor:

1. npx hyperframes init edit innerhalb des edit/-Ordners Ihres Projekts – erstellt das Grundgerüst (index.html, meta.json, hyperframes.json, CLAUDE.md, package.json).
2. cd edit und ändern Sie die generierten Projektdateien, um den eigentlichen Schnitt zu erstellen. Fügen Sie fonts/, assets/sfx/, Unterkompositionen unter compositions/ hinzu.
3. npx hyperframes preview (lange Laufzeit – im Hintergrund ausführen) – im Browser mit Live-Reload überprüfen. Verwenden Sie ein Browser-Tool, um zu inspizieren und Screenshots zu machen. Bestätigen Sie Tempo, Layout, Text-Timing und Animationsglätte vor dem Rendern.
4. npx hyperframes lint / npm run check – jeden Fehler beheben; Warnungen überprüfen.
5. npx hyperframes render – endgültiges MP4.
6. Verifizieren: ffprobe (9:16-Abmessungen, Dauer, Codec) + ffmpeg Frame-Stichproben anhand eines Kontaktbogens. Führen Sie das gebündelte Gate-Skript (unten) aus.

Verwenden Sie die hyperframes-Dokumentation (npx hyperframes docs) für API-/Feature-Referenzen und die Referenzen in diesem Skill für den Bearbeitungsstandard. Wenn HyperFrames-Tooling fehlt oder defekt ist, stoppen Sie und teilen Sie dem Benutzer mit, anstatt einen generischen Schnitt manuell zu erstellen.

Anforderungen

• HyperFrames – die Rendering-Engine, ausgeführt mit npx hyperframes. Dieser Skill ist der Bearbeitungsstandard aufbauend auf HyperFrames; er ersetzt es nicht.
• Node.js (für npx und das Verifizierungsskript).
• ffmpeg / ffprobe im PATH – für SFX-Synthese, Audiomischung und Render-Verifizierung.
• Ein Style-Pack unter styles/<style>/FRAME.md (dieser Skill liefert vibe-life als funktionierendes Beispiel und _template als Ausgangspunkt – siehe styles/README.md).

Eingaben

Arbeiten Sie von einem Projektordner aus. Ein empfohlenes Layout (an Ihr eigenes anpassen):

ihr-projekt/
├── script.md            # freigegebenes Skript mit Beats/Zeitstempeln, Einblendungen, Energiehinweisen – DIE GRUNDSTRUKTUR
├── voiceover/           # bereitgestelltes Sprach-/Talking-Head-Material (das A-Roll)
├── avatar/              # optionales Talking-Head-Material
├── assets/
│   ├── manifest.json    # gesammeltes B-Roll + Asset-Zuordnung pro Beat + Rechtehinweise
│   └── ...              # die gesammelten Medien
└── edit/                # IHRE Ausgabe (erstellt mit `npx hyperframes init edit`)

Lesen Sie (nicht bearbeiten) das Skript, die Sprach-/Avatar-Medien und das Asset-Manifest. Wählen Sie das Style-Pack aus, das das Video verwenden soll (styles/<style>/FRAME.md).

Ausgaben

Schreiben Sie alles in den edit/-Ordner Ihres Projekts:

• Das HyperFrames-Projekt (index.html + compositions/ + fonts/ + assets/sfx/ + assets/master_audio.*).
• Das endgültig gerenderte MP4 (9:16), verifiziert.
• edit-report.md – eine Übergabenotiz: Bearbeitungsentscheidungen pro Beat, verwendete Assets (mit Manifest-Referenzen), verwendete SFX/Musik, Vorschau-/Render-Verifizierungsnotizen und alles, was Sie für die endgültige Überprüfung markiert haben. Vorlage in references/edit-report-template.md (unten angehängt).

Bearbeitungsgrammatik (was "professionell" hier bedeutet)

Jeder der folgenden Punkte ist ein Qualitätstor, kein Vorschlag.

Die visuelle Haussprache ist der redaktionelle Look – siehe "editorial-look" unten. Bilder sind gestaltete Seiten, kein Video mit darüberliegendem Text: gemischte Serifen-kursiv/fette serifenlose redaktionelle Überschriften, Papierbühnen- und dunkle Raster-Hintergrunde, der gestapelte Split (B-Roll oben / Talking-Head unten) als Standard-A-Roll/B-Roll-Layout, Einblendungen mit Hervorhebungsbalken und Keyword-Farbe, Naht-Beschriftungen und Namens-Pills, Überschriftenkarten und UI-Kartenstapel. Bauen Sie jeden Kurzfilm aus diesen zehn Mustern, thematisch pro Style-Pack.

• Technisch ausgearbeiteter Hook (erste 1–3s): Texteinblendungen oben, eine Musterunterbrechung, dann eine Bewegung in den Rahmen (z. B. ein geteiltes Panel, das auf volle 9:16 wächst). Niemals mit einem statischen Talking-Head eröffnen.
• A-Roll / B-Roll-Struktur: A-Roll (Talking-Head / VO) ist die Grundstruktur; B-Roll (Clips, Screenshots, Bewegungsgrafiken) bedeckt und pointiert es. Schneiden Sie B-Roll über die Audio des A-Rolls, nicht in der Stille.
• Schnittgranularität: Schnitte so schnell wie 0,2s, wenn die Energie des Skripts es erfordert; niemals metronomische 1s-Schnitte. Das Tempo folgt dem Skript.
• Split-Screen-Layouts: Nebeneinander- und gestapelte Kompositionen mit bewussten Übergängen in und aus dem Vollbild. Der gestapelte Split mit einer Nahtbeschriftung ist das Arbeitstier – Vollbild-B-Roll-Abdeckung ist die Ausnahme.
• Gesichtssichere Rahmung: Wann immer eine Person in einem Panel oder Zuschnitt ist, neigen Sie den Zuschnitt mit object-position, sodass das Gesicht in der Mitte des sichtbaren Bereichs des Panels sitzt, die Augen im oberen Drittel – die Standardeinstellung 50% 50% ist für Talking-Head-Quellen fast immer falsch und schneidet Köpfe ab. Kamerafahrten auf einem Personen-Panel müssen das Gesicht für die gesamte Bewegung im Rahmen behalten. Ein außermittiges oder abgeschnittenes Gesicht ist ein Gate-Fehler. Siehe "editorial-look" §4 "Face-safe framing".
• Ermüdete Kamerabewegung: Zoom-In/Out und Schwenk nach links/rechts, immer ermüdet, niemals linear, niemals ruckartig. Siehe "camera-moves" für den Anti-Jitter-Vertrag.
• Kinetischer Text / Beschriftungen: animierte Eingänge, Keyword-Hervorhebung (ein Akzentwort), Beschriftungseinblendungen passend zur Stimme.
• Thematische Bewegungsgrafiken: Zahlenkarten, Spezifikations-/JSON-Karten, Bounding-Box-Markierungen, Poster-Splits, Diagrammerstellungen – gestaltet im Stil des Themas, nicht generisch.
• Logo / Wortmarken-Animation: animierte Marken-/Produktzeichen, wenn das Skript sie nennt.
• SFX: Wuschs, Klicks, Steigerungen, Impacts, die auf Schnitte und grafische Treffer geschichtet sind – subtil, unter der Stimme gemischt. Siehe "sfx-and-audio".
• Kohärente Ästhetik: ein Farbthema, konsistente Typografie, ermüdete Kurven, keine Standard-Look-Elemente, kein Hervorstechen. Alles aus dem Style-Pack FRAME.md.

Style-Theming (erforderlich, bevor etwas entworfen wird)

Leiten Sie die visuelle Identität zuerst aus dem Style-Pack ab – Farben, Schrift, Bewegungspersönlichkeit und grafische Sprache stammen alle aus styles/<style>/FRAME.md. Anderer Style → anderer Look. Siehe "style-theming" unten für die Umwandlung von FRAME.md in eine konkrete frame.md-Entwurfsspezifikation (Palettentokens, @font-face für lokale Schriften, Bewegungspersönlichkeit → Easing-/Schnittentscheidungen). Das mitgelieferte vibe-life-Beispiel verwendet eine Creme/Tinte/Pfirsich/Butter-Palette; Space Grotesk + Instrument Serif kursiv + JetBrains Mono; Papierschnitt-Bewegung (harte Schnitte, maskiert durch SFX, keine Überblendungen); ein kursives Serifen-Akzentwort pro Frame in einer Pille; flache, harte, tintenfarbene Schatten. Ihr eigener Style füllt dieselben Rollen mit seinen eigenen Tokens.

HyperFrames harte Regeln (brechen Sie diese und der Render bricht)

1. Jedes zeitgesteuerte Element benötigt data-start, data-duration, data-track-index und class="clip" (das Framework steuert die Sichtbarkeit über clip).
2. Animieren Sie niemals das .clip-Element selbst – das Framework besitzt seine Sichtbarkeit/Transformation. Animieren Sie einen untergeordneten Wrapper (z. B. .cam, .inner).
3. Timelines müssen gsap.timeline({ paused: true }) sein und auf window.__timelines["main"] registriert werden (ID stimmt mit data-composition-id überein).
4. Nur deterministisch – kein Math.random(), kein Date.now(), keine Netzwerkabrufe, kein repeat: -1. Renderings werden frameweise abgetastet und müssen reproduzierbar sein.
5. 9:16 = 1080×1920. Setzen Sie #root { container-type: size; }, sodass cqw/cqh gegen den Frame aufgelöst werden (1cqw = 10,8px). Größe von Text/Grafiken in cqw/cqh, nicht in vw/vh.
6. Benachbarte Clips auf demselben Track dürfen sich nicht berühren – Fließkommagenauigkeit macht 3.2 + 0.35 = 3.5500000000000003, was einen Clip überlappt, der bei 3.55 beginnt und overlapping_clips_same_track auslöst. Lassen Sie eine Lücke oder verwenden Sie Dauern wie 0.34. (Übernommen aus den Lint-Gotchas von hyperframes-helper.)
7. Audio: Videos sind muted mit einem separaten <audio>-Element. Bevorzugen Sie einen vorab gemischten Master-Audiospur (VO + SFX gemischt über ffmpeg adelay+amix) gegenüber vielen <audio>-Elementen – mehrere Spuren verursachen Echo/Desync. Platzieren Sie es auf einem hohen, dedizierten data-track-index.
8. Dichte: timeline_track_too_dense (viele zeitgesteuerte Elemente auf einer Spur) ist für einen kurzen Pilotfilm beratend, aber in echtem Maßstab – teilen Sie Szenen in Unterkompositionen (data-composition-src="compositions/file.html") für produktionslange Schnitte auf.

Workflow

1. Lesen Sie das Skript als Grundstruktur. Erstellen Sie eine Beat-Karte: jeder Beat/Zeitstempel → A-Roll (VO-/Avatar-Segment) + B-Roll-/MG-Bedarf + Einblendung auf dem Bildschirm + beabsichtigter Schnitt/Kamera/Übergang + Energie. Die Energie des Skripts bestimmt das Tempo; erzwingen Sie keinen einheitlichen Rhythmus.
2. Themen aus dem Style-Pack. Lesen Sie styles/<style>/FRAME.md. Erstellen Sie die konkrete Entwurfsspezifikation: Palettentokens, lokale @font-face-Deklarationen, Bewegungspersönlichkeit, grafische Sprache. (Siehe "style-theming".)
3. Gleichen Sie die Asset-Abdeckung ab. Querverweisen Sie Ihr Asset-Manifest: welche Beats durch gesammelte Medien abgedeckt sind, welche build-in-editor (von Ihnen als Bewegungsgrafiken zu erstellen) sind, welche alternate Austausche sind. Platzieren Sie niemals Platzhalter-/nicht lizenzierte Medien in einem endgültigen Render – markieren Sie Lücken im Bericht.
4. npx hyperframes init edit. Zuerst das Grundgerüst. Dann fügen Sie fonts/ (lokale woff2-Subsets), assets/sfx/, compositions/ hinzu.
5. Erstellen Sie den Schnitt Beat für Beat in index.html (und Unterkompositionen für die Länge). Wenden Sie die Bearbeitungsgrammatik an: technisch ausgearbeiteter Hook, A-Roll/B-Roll-Abdeckung, nicht metronomische Schnitte, Split-Screens, ermüdete Kamerabewegungen, kinetischer Text, thematische MGs, Logo-Animation. Animieren Sie untergeordnete Wrapper, niemals den .clip.
6. Erstellen Sie SFX + Master-Audio. Synthetisieren Sie rechtefreie SFX mit ffmpeg (anoisesrc/aevalsrc/sine) oder verwenden Sie freigegebene Assets; mischen Sie VO + SFX in einen Master-Track. (Siehe "sfx-and-audio".)
7. Vorschau und Inspektion. npx hyperframes preview im Hintergrund; im Browser öffnen; Schlüsselbeats screenshoten; Tempo, Layout, Text-Timing und Bewegungsglätte bestätigen. Beheben Sie Probleme vor dem Rendern.
8. Lint. npm run check / npx hyperframes lint --verbose. Beheben Sie alle Fehler; überprüfen Sie Warnungen (bekannte False Positives beachten – z. B. WCAG-Kontrastwarnungen, die zu Zeitstempeln abgetastet werden, an denen eine kontrastreiche Karte ausgeblendet ist).
9. Rendern. npx hyperframes render → MP4.
10. Mit dem Gate-Skript verifizieren. Führen Sie node scripts/verify-render.mjs <pfad-zu-mp4> aus – bestätigt 9:16, erwartete Dauer, h264/yuv420p, Audio vorhanden. Dann ffmpeg Frame-Stichproben in einen Kontaktbogen und visuelle Prüfung gegen die Vorschau.
11. Schreiben Sie edit-report.md und legen Sie den Status fest (done / in_review / blocked). Hängen Sie die MP4 + den Kontaktbogen an.

Führen Sie das Verifizierungs-Gate aus (das Skript befindet sich in scripts/verify-render.mjs neben dieser Datei):

node scripts/verify-render.mjs path/to/edit/<file>.mp4

Optional genaue Spezifikationen bestätigen:

node scripts/verify-render.mjs <file>.mp4 --duration 12 --tolerance 0.5

Fehlende Assets

Wenn ein Beat ein Asset benötigt, das Ihr assets/ nicht hat:

1. Überprüfen Sie zuerst das Manifest auf alternate oder build-in-editor Zeilen – kundenspezifische Bewegungsgrafik-Beats müssen von Ihnen erstellt werden und sind kein Blockierer.
2. Wenn es wirklich fehlt und schnell und legal direkt abrufbar ist, holen Sie es selbst und dokumentieren Sie die Herkunft in edit-report.md.
3. Andernfalls listen Sie den genauen Beat/Zeitstempel, den Asset-Bedarf und die beabsichtigte Bearbeitungsaktion im Bericht auf, bitten Sie den Benutzer, es bereitzustellen, und fahren Sie mit den Beats fort, die Sie abschließen können. Rendern Sie niemals einen Platzhalter, den Sie nicht lizenzieren können.

Verifizierung (erforderlich vor der Übergabe)

• Vorschau-Screenshots: repräsentative Frames, die aus der Live-Vorschau erfasst wurden, um Layout/Timing/Bewegung zu bestätigen.
• ffprobe: Abmessungen exakt 9:16 (1080×1920), erwartete Dauer (±Toleranz), h264 / yuv420p, Audiostream vorhanden. Das Gate-Skript erzwingt dies.
• Frame-Stichproben: ffmpeg extrahiert Frames über die Timeline in einen Kontaktbogen; bestätigen Sie, dass jede erforderliche Technik stilgerecht gerendert wird und der Vorschau entspricht.
• Gesichtsprüfung: Auf jedem Vorschau-Screenshot und Kontaktbogen-Frame, der eine Person enthält, ist das gesamte Gesicht sichtbar und in seinem Panel zentriert (nicht durch eine Naht, Beschriftung, Kante oder Kamerafahrt abgeschnitten). Wenn nicht, das Gate nicht passieren lassen und neu rahmen.
• Rechte: keine nicht lizenzierten/Platzhalter-Medien im Render; alles, was eine endgültige Lizenzprüfung benötigt, im Bericht genannt.
• Designänderungsprotokoll: jede Abweichung von der Style-Spezifikation oder den redaktionellen Look-Mustern (neues Layout, geänderte Farben/Schriftart, geänderte Bewegung) muss in edit-report.md unter "Design decisions" mit Begründung aufgezeichnet werden. Visuelle Änderungen sind in Ordnung; stille visuelle Änderungen nicht.

Credits & Herkunft

Dieser Skill hat die hyperframes-Dokumentation, github.com/robonuggets/hyperframes-helper und Referenzframes von Creator-Grade-Kurzfilmen recherchiert und ist dann darüber hinausgegangen. Siehe "standard-provenance" unten für die Aufschlüsselung. Zusammenfassung:

• Übernommen von hyperframes-helper / HyperFrames: HTML-as-source-of-truth-Modell; data-* Timing-Attribute + class="clip"; angehaltene Timelines auf window.__timelines; GSAP power2/power3.out Easing; White-Glow-Beschriftungsstyling; SVG-Unterstreichungshervorhebung; die Lint-Gotcha-Liste (Überlappungs-Fließkommapräzision, nur deterministisch, muted-video-plus-audio, etc.).
• Hinzugefügt hier: ein vollständiges ermüdetes Kamerabewegungssystem mit einem expliziten Anti-Jitter-Vertrag; 9:16 Kurzformat-Grammatik (technisch ausgearbeitete Hooks, sub-0,2s nicht metronomische Schnitte, Split→Vollbild-Übergänge); eine Style-Theming-Pipeline von FRAME.md → konkrete Entwurfsspezifikation; rechtefreie SFX-Synthese + einzelne vorab gemischte Master-Track-Disziplin; und ein Render-Verifizierungs-Gate (ffprobe-Bestätigungen + Kontaktbogen-Stichproben).

---

Anhang – Referenzbibliothek (inline)

Die Autorenquelle hält diese als separate Dateien unter references/; sie sind hier inline eingefügt, damit der Skill eine einzige in sich geschlossene SKILL...

[truncated for translation]