assafkip/claude-video-editor

Ein Video erstellen – Der Skill vom Anfänger zum fertigen MP4

Zwei Phasen, acht sequenzielle Gates. Jedes Gate erzeugt ein konkretes Artefakt, das vom nächsten Gate konsumiert wird. Überspringen Sie keine Gates.

Wann dieser Skill verwendet wird – und wann übergeben wird

Diesen Skill verwenden, wenn:

• Der Benutzer neu bei HyperFrames ist und mit einem Konzept, Drehbuch oder einer Gliederung beginnt
• Sie eine End-to-End-Anleitung wünschen, kein Framework-Referenzmaterial
• Sie sich noch nicht für ein Format entschieden haben

Übergeben, wenn:

• Der Benutzer eine URL einfügt und ein Video von dieser Website wünscht → /website-to-hyperframes aufrufen
• Der Benutzer explizit ein vertikales 9:16-Video mit Face-Cam und Szenen-Overlays möchte → Gates 1–4 hier ausführen, dann ab Gate 5 /short-form-video aufrufen
• Der Benutzer nach Framework-Regeln fragt, nicht nach einem Video → /hyperframes aufrufen

Die zwei Phasen

• Phase 1 – INTERVIEW (Gates 1–4): Ein Konversationsdurchgang, um alles zu sammeln, bevor Code berührt wird. Absicht, Format, Skript, Stimme, Stil, Assets, Tempo. In einer BRIEF.md zusammenfassen und auf explizite Zustimmung warten.
• Phase 2 – BUILD (Gates 5–8): Gerüst → Storyboard → Kompositionen → Lint → Studio-Vorschau → Entwurfsrender → visuelle Überprüfung → MP4-Vorschau → endgültiges Rendern.

---

Gate 1 · Absicht & Format

Stellen Sie jeweils eine Frage über AskUserQuestion, möglichst mit Mehrfachauswahl.

1. Wofür ist dieses Video? (Werbung · Social Ad · Launch-Teaser · Produktdemo · Tutorial · Erklärvideo · Intro/Outro-Card · Sonstiges)
2. Wer ist die Zielgruppe? (offen)
3. Gewünschte Dauer? (10–20s kurz · 20–45s Werbung · 45–90s Erklärvideo · 1,5–3 Min Lektion · benutzerdefiniert)
4. Seitenverhältnis? (16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
5. Bildrate? (30 Standard · 60 für knackige UI · 24 filmisch)
6. Plattform-/Auslieferungsbeschränkungen? (Dateigröße · Abgabetermin · Abspielort)

Gate: Alle sechs erfasst. Wenn die Antwort 9:16 + Face-Cam ist, planen, bei Gate 5 an /short-form-video zu übergeben.

Vollständiger Fragenkatalog: Read: references/interview-questions.md

---

Gate 2 · Skript & Stimme

1. Skript-Quelle? (einfügen · Gliederung → ich erstelle Entwurf · ich nehme auf · TTS aus Text · keine Erzählung)
2. Wenn TTS: Stimmenpräferenz. Optionen aus npx hyperframes tts --help anbieten. Auch Tempo erfassen.
3. Wenn Face-Cam: Aufnahmepfad · Vollbild- oder Eckplatzierung · Transkription nötig? (npx hyperframes transcribe <datei> --model small.en --json)
4. Untertitel? (aus · auffällig · geschäftlich · karaoke-wortweise · minimalistisch)

Gate: Skript erfasst (oder entworfen), Audio-Plan erfasst, Untertitel-Plan erfasst.

---

Gate 3 · Stil-Erfassung

Bevor Sie den Benutzer etwas fragen, inventarisieren Sie vorhandene Assets. Überprüfen Sie <workspace-root>/assets/ und alle assets/-Ordner des Projekts. Fragen Sie nicht, was bereits vorhanden ist.

Dann fragen Sie schrittweise – der Benutzer muss nicht alle Punkte beantworten:

1. Styleguide oder Markenrichtlinien? (einfügen/Pfad · nein)
2. Farbpalette? (Hex-Codes · keine – Standardeinstellungen von MOTION_PHILOSOPHY verwenden)
3. Schriftarten? (Google Fonts-Name(n) · Dateipfade · keine – Inter + JetBrains Mono Standard verwenden)
4. Logo-Datei? (Pfad · keine – stattdessen Text-Wordmarke verwenden)
5. Referenzvideos für den Look? (URLs/Pfade · keine)
6. Andere Assets? (Screenshots · Produktfotos · B-Roll · Musik – Pfade auflisten)
7. MOTION_PHILOSOPHY-Ästhetik (schwarze Leinwand · Chrome-Schrift · Perspektivraster · Peitschen-Übergänge) oder ein anderes Gefühl?
8. Tempo? (schnell 1–2s · ausgewogen 2–3s · entspannt 3–5s)
9. Musik? (keine · Ambient-Pad 0.15 · Musikbett 0.4 · voll 0.8 – Dateipfad, falls vorhanden)
10. Outro / Call-to-Action-Text?

Zwingen Sie dem Benutzer niemals eine Marke auf. Fallen Sie nur auf die MOTION_PHILOSOPHY-Standards zurück, wenn der Benutzer ausdrücklich ablehnt, einen Stil anzugeben.

Vollständiger Stil-Flow + MOTION_PHILOSOPHY-Standards: Read: references/style-intake.md

---

Gate 4 · Kurzzusammenfassung (HARTES GATE vor dem Bauen)

1. Lesen Sie MOTION_PHILOSOPHY.md, falls es im Workspace-Root existiert – zwingend, wenn vorhanden. Wenn nicht vorhanden, fahren Sie mit den Standardwerten aus references/style-intake.md fort und notieren Sie das Fehlen in der Kurzzusammenfassung.
2. Fragen Sie, wo Projekte leben, falls nicht offensichtlich:
   • Wenn video-projects/ existiert → video-projects/<slug>/ verwenden
   • Sonst → den Benutzer fragen
3. Schreiben Sie <project-folder>/BRIEF.md:
   • Slug · Absicht · Zielgruppe · Abmessungen · fps · Dauer
   • Skript (vollständig oder Gliederung)
   • Stimmenauswahl · Untertitel-Plan · Face-Cam-Plan
   • Stilprofil: Palette (Hex), Schriftarten, Logo-Pfad, Referenzvideos
   • Tempo
   • Asset-Inventar mit Pfaden
   • Outro / CTA-Text
4. Zeigen Sie die Kurzzusammenfassung. WARTEN Sie auf explizite Zustimmung. Fahren Sie erst mit Gate 5 fort, nachdem ein klares „Ja, baue es“ vorliegt.

---

Gate 5 · Gerüst & Storyboard

Zuerst Übergabe prüfen

Wenn die Kurzzusammenfassung ein vertikales 9:16-Video mit Face-Cam und Szenen-Overlays beschreibt, rufen Sie JETZT /short-form-video auf und übergeben Sie die Kurzzusammenfassung. Sein 4-schichtiges Gerüst ist speziell für dieses Format optimiert.

Andernfalls fortfahren:

Gerüst

1. mkdir <project-folder>
2. Wenn ein benachbartes Projekt mit ähnlichem Format existiert, anbieten, dessen hyperframes.json + meta.json als Vorlage zu kopieren. Andernfalls innerhalb des Ordners: npx hyperframes init
3. meta.json mit dem Slug, den Abmessungen und der fps des Benutzers bearbeiten.
4. Bereitgestellte Assets in <project-folder>/assets/ kopieren.
5. <project-folder>/assets/style-profile.md aus Gate 3 erstellen – einzige Quelle der Wahrheit für Palette/Schriftarten/Logo.

Storyboard

Erstellen Sie <project-folder>/STORYBOARD.md mit der Vorlage in references/storyboard-template.md. Jeder Beat erhält:

Beat N – TITEL (Start–Ende, Dauer) – Konzept in einem Satz
Visuelle Elemente: [jedes Element, Größe, Animation, Timing]
Bewegungssprache: [Art der Bewegung]
Verwendete Easing-Funktionen: [3–4 verschiedene GSAP Easing-Funktionen]
Ausgang: [Übergang zum nächsten Beat]
Audio: [VO-Zeile / SFX / Musikebene]

Am Anfang der Datei: eine Zeittabelle mit Szene · Start · Dauer · Kompositionsdatei.

Schlagen Sie eine Dreier-Struktur vor:

• Akt 1 (Aufhänger) ≈ 20% der Dauer
• Akt 2 (Hauptteil) ≈ 55%
• Akt 3 (Ausgang + Outro mit 4–6 Sekunden Halten) ≈ 25%

(MOTION_PHILOSOPHY §0 Gesetz 9, §1.)

Benutzerabsichten auf Katalogblöcke abbilden: Read: references/catalog-intent-map.md

Gate: Zeigen Sie Storyboard + Zeittabelle. Iterieren, bis der Benutzer zustimmt.

---

Gate 6 · Kompositionen bauen

Rufen Sie /hyperframes für Framework-Regeln auf. Dieser Skill besitzt das Gerüst und die Disziplin; /hyperframes setzt die Regeln durch.

Jede Unterkomposition einrichten

<div data-composition-id="szene-name" data-start="..." data-duration="...">
  <style>[data-composition-id="szene-name"] { /* begrenzt */ }</style>
  <!-- DOM -->
  <script>
    (function(){
      const SLOT_DURATION = ...;
      const tl = gsap.timeline({ paused: true });
      // ... Tweens ...
      tl.to({}, { duration: SLOT_DURATION }, 0);   // Anker – MOTION_PHILOSOPHY Gesetz 11
      window.__timelines["szene-name"] = tl;
    })();
  </script>
</div>

Vollständiger Boilerplate + Untertitel-Muster + Ambient-BG-Muster: Read: references/composition-scaffold.md

Bauregeln

• Ambient-Hintergrund auf data-track-index="0" für die gesamte Kompositionsdauer.
• Kinetic-Type-Opener: Wort-für-Wort-Staffelung 0,06–0,10s.
• Untertitel als Geschwisterelemente auf Körperebene der Root-Komposition in index.html, jedes mit data-track-index ≥ 20. Niemals innerhalb von Szenen-Timelines (MOTION_PHILOSOPHY §3.13).
• Katalogblöcke, installiert über npx hyperframes add <name>. Begrenzen Sie sofort das CSS des Blocks auf [data-composition-id="..."] – Katalogblöcke enthalten html, body { ... }-Regeln, die in das übergeordnete Dokument einfließen, wenn sie als Unterkompositionen geladen werden.
• Vertikal + Face-Cam: Native 1920×1080 Face in einer Transformation (translate + scale) für den unteren Bildschirmhälften- oder Vollbildmodus umschließen. (Wenn Sie hier anstatt bei /short-form-video landen, sollten Sie die Übergabe ernsthaft in Betracht ziehen.)
• WENDEN SIE NUR an, was der Benutzer bereitgestellt hat. Seine Palette, seine Schriftarten, sein Logo. Fügen Sie nichts anderes hinzu. Wenn der Benutzer MOTION_PHILOSOPHY-Standards gewählt hat, ziehen Sie die Palette + Schriftartenkombination aus references/style-intake.md.

Determiniertheit

Kein Math.random(), kein Date.now(), kein fetch() zur Renderzeit. Verwenden Sie gesäte PRNGs oder harmonische Sinus-Hashes (MOTION_PHILOSOPHY §3.10).

---

Gate 7 · Lint → Studio-Vorschau (VORSCHAUGATE 1 – VERPFLICHTEND)

1. npx hyperframes lint – alle Fehler beheben, Warnungen auswerten.
2. npx hyperframes preview im Hintergrund ausführen.
3. Warten, bis „Studio läuft“ auf http://localhost:3002 erscheint.
4. Dem Benutzer die URL plus einzelne Kompositions-URLs (http://localhost:3002/?comp=<id>) aushändigen. Wenn das Projekt WebGL-Shader-Blöcke hat, zuerst mit den einzelnen URLs beginnen – der Software-WebGL-Fallback kann die Hauptkomposition blockieren.
5. WARTEN auf explizites „sieht gut aus, rendern Sie einen Entwurf“, bevor Sie fortfahren. Schweigen ist keine Zustimmung.

Hot Reload ist aktiv – Änderungen werden live angezeigt.

---

Gate 8 · Entwurfsrender → visuelle Überprüfung → MP4-Vorschau → Final

Entwurfsrender

npx hyperframes render --quality draft --output renders/<slug>-draft.mp4

Visuelle Überprüfung (VERPFLICHTEND vor der Auslieferung)

Lint bestanden ≠ Design funktioniert. Extrahieren Sie Frames und betrachten Sie sie.

1. mkdir -p renders/frames
2. Für jeden Beat-Heldenmoment UND jeden Übergang:

   ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png
   

3. Rufen Sie das Read-Werkzeug für jedes PNG auf. Das Read-Werkzeug lädt das Bild in den Kontext – listen Sie nicht nur Dateinamen auf.
4. Pro Frame bestätigen: keine abgeschnittenen Gesichter, korrekter Face-Modus pro Szene, Text lesbar und in der Palette, kein Überlauf, Übergänge landen auf den beabsichtigten Wörtern, keine leeren Frames.
5. Wenn etwas falsch ist: korrigieren → erneut rendern → erneut überprüfen. Liefern Sie niemals einen fehlerhaften Entwurf aus.

MP4-Vorschau (VORSCHAUGATE 2 – VERPFLICHTEND)

npx serve renders -p 8080 -n

Verwenden Sie NICHT Pythons http.server – es unterstützt keine HTTP-Range-Anfragen, daher funktioniert das Spulen nicht.

Dem Benutzer http://localhost:8080/<slug>-draft.mp4 aushändigen. WARTEN auf explizite Freigabe für Wiedergabe und Audio-Synchronisation.

Endgültiges Rendern

npx hyperframes render --quality standard --output renders/<slug>-final.mp4

Den Ausgabepfad melden. Erledigt.

Vollständige Preflight- und Pre-Delivery-Checkliste: Read: references/build-checklist.md

---

Unverhandelbar (tragend – nicht aufweichen)

• ÜBERSPRINGEN SIE NICHT VORSCHAUGATE 1 (Studio) oder VORSCHAUGATE 2 (gerendertes MP4). Zwei Gates pro Build, immer.
• BEHAUPTEN SIE NICHT, dass ein Render abgeschlossen ist, bis Frames extrahiert UND über das Read-Werkzeug gelesen wurden.
• BAUEN SIE NUR innerhalb eines dedizierten Projektordners. Platzieren Sie index.html niemals im Workspace-Root.
• FRAGEN SIE DEN BENUTZER NICHT nach Assets, bevor Sie seinen Workspace inventarisiert haben.
• ÜBERSPRINGEN SIE NICHT den Anker-Tween tl.to({}, { duration: SLOT_DURATION }, 0) am Ende jeder Unterkompositions-Timeline. MOTION_PHILOSOPHY Gesetz 11.
• VERWENDEN SIE KEIN Math.random() / Date.now() innerhalb der Render-Logik. Nur gesäte Hashes.
• FÜGEN SIE KEIN class="clip" zu <video>-Tags hinzu. Es zerbricht sie.
• ZWINGEN SIE DEM BENUTZER KEINE MARKE AUF. Fragen Sie zuerst; fallen Sie nur auf MOTION_PHILOSOPHY-Standards zurück, wenn der Benutzer ausdrücklich ablehnt.

---

Referenzen

• references/interview-questions.md – vollständiger Fragenkatalog nach Gate
• references/style-intake.md – Stil-Interview + MOTION_PHILOSOPHY-Standards
• references/catalog-intent-map.md – „Benutzer sagt X → installiere Y“
• references/storyboard-template.md – Beat-für-Beat-Vorlage + ausgearbeitetes Beispiel
• references/composition-scaffold.md – begrenzte Styles + IIFE GSAP Boilerplate
• references/build-checklist.md – Preflight- + Pre-Delivery-Gates

Extern (Workspace-Ebene):

• MOTION_PHILOSOPHY.md – die eine externe Referenz, deren Existenz dieser Skill annimmt. Ästhetische Basislinie. Fallback befindet sich in references/style-intake.md, falls die Datei fehlt.

Verwandte Skills

• /hyperframes – Framework-Regeln, bei Gate 6 aufrufen
• /hyperframes-cli – init · lint · preview · render · transcribe · tts
• /hyperframes-registry – Katalogblöcke installieren
• /gsap – GSAP-Animation-Referenz
• /short-form-video – bei Gate 5 für 9:16-Talking-Head-Format übergeben
• /website-to-hyperframes – bei Gate 1 übergeben, wenn die Eingabe eine URL ist