Communitygithub.com

Review-Schleife (HyperFrames)

Visuelle Selbstprüfung für Animationsvideos (HyperFrames) – Entwurf ausgeben, Kontaktabzüge pro Timeline-Takt erstellen, Punkt für Punkt prüfen, korrigieren, wiederholen.

Was ist Review-Schleife (HyperFrames)?

Dieses Skill („Review-Schleife“) ermöglicht es KI-gestützten Assistenten wie Claude, die visuelle Qualität von Animationsvideos systematisch zu überprüfen, ohne das fertige Video selbst betrachten zu können. Es erstellt aus einem Draft-Rendering Kontaktabzüge (Contact Sheets) zu jedem Timeline-Takt, die dann mit einer detaillierten Checkliste auf Komposition, Text, Rhythmus und Konsistenz geprüft werden. Das Skill nutzt die HyperFrames-Tools (via `hyperframes_render`, `hyperframes_check` und das lokale Skript `scripts/sheet.py`) und ersetzt die ursprünglichen npm-Befehle der zugrunde liegenden `review-loop`-Idee. Es ist speziell für den Einsatz mit Kinocut MCP und Claude Code optimiert und hilft, Fehler wie überlappende Elemente, abgeschnittene Texte oder zu kurze Pausen zu erkennen, bevor das finale Video in hoher Qualität ausgegeben wird. Zusätzlich enthält es Prüfungen für Audio-Pegel und chinesische Schriftzeichen (traditionell, keine vereinfachten Zeichen).

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mathruffian-dot/claude-motion-explainer/tree/HEAD/skills/review-loop

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Review-Schleife (HyperFrames)?

Du kannst keine Videos ansehen, aber du kannst Einzelbilder betrachten. Melde ein Video erst dann als fertig, wenn du den Kontaktabzug der aktuellen Version gesehen hast.

Adaptiert aus whaleyxbt/claude-motion review-loop skill (MIT, siehe LICENSE im selben Ordner). Die ursprünglichen npm run …-Befehle wurden durch Kinocut MCP HyperFrames-Tools und das Skript scripts/sheet.py in diesem Ordner ersetzt. Mit „(neu in dieser Version)“ markierte Absätze sind nicht Teil des Originals.

Im Folgenden bezeichnet SHEET den Befehl python "<Skills-Ordner>/scripts/sheet.py" (z. B. ~/.claude/skills/review-loop/scripts/sheet.py). Alle Pfade werden absolut angegeben.

Schleife

  1. Zuerst maschinelle Prüfung (neu in dieser Version): Führe im Projektordner hyperframes check aus. Es führt nacheinander Linting, Laufzeit-, Layout-Überlauf-, Bewegungs- und Kontrastprüfungen durch (die offiziellen validate/inspect-Befehle sind veraltet – verwende check). Behebe alle Fehler, bevor du fortfährst. Details siehe offizielles hyperframes-cli skill.
    • Eine Masken-Enthüllung meldet während des Einflugs zwangsläufig container_overflow – das ist beabsichtigt; füge dem Masken-Container data-layout-allow-overflow hinzu. Wenn jedoch nach dem Einrasten text_box_overflow gemeldet wird, ist der Container zu flach und schneidet Text ab (besonders bei Chinesisch und hochgestellten Zeichen) – ziehe den Container höher.
  2. Entwurf: hyperframes_render, Parameter quality: "draft", output_path auf <Projekt>/out/draft.mp4 setzen.
  3. Kontaktabzug: SHEET --video <Projekt>/out/draft.mp4 --timeline <Projekt>/timeline.js --out <Projekt>/out/sheets Nimmt 0,3 Sekunden nach jedem Takt (wenn die Bewegung abgeschlossen ist) einen Frame, setzt diese 4×2 zu out/sheets/beats-N.png zusammen, beschriftet jeden Frame mit Taktnamen und Zeit. Jeder Frame ist standardmäßig 360 px breit – die tatsächliche Breite auf einem Mobilgerät.
  4. Öffne jedes Sheet mit Read und überprüfe es Punkt für Punkt anhand der Checkliste unten.
  5. Vergrößere verdächtige Stellen:
    • Scan eines Übergangs: SHEET --video … --from 3 --to 5 --every 0.2 --name scrub
    • Bestimmte Zeitpunkte: SHEET --video … --at 3.7,3.75,3.8 --name exact
    • Einzelner Frame in voller Auflösung: hyperframes_still, Parameter frame (Sekunden × fps)
    • Ohne erneutes Rendern: hyperframes_snapshot mit at direkt aus der Komposition, dann mit SHEET --images … --labels … zusammenstellen.
  6. Korrigiere und kehre zu Schritt 0 zurück. Beende den Zyklus erst, wenn ein vollständiger Durchlauf keine Probleme mehr zeigt.
  7. Finale Version: hyperframes_render, Parameter quality: "high" für das Endvideo, führe dann Schritt 2 erneut für das Endvideo durch und mache die Audioprüfung (siehe unten).

Checkliste

Komposition

  • Jeder Frame hat nur einen Fokus. Wenn zwei Elemente um Aufmerksamkeit konkurrieren, muss eines warten.
  • Keine unbeabsichtigten Kollisionen oder Überlappungen, besonders bei Übergängen, bei denen ausgehende und eingehende Elemente denselben Raum teilen.
  • Sicherheitszone: Wichtige Inhalte nicht näher als etwa 60 px an den Rand.
  • Frame 0 zeigt ein echtes Bild, nicht Schwarz (es ist das Thumbnail auf Social-Media-Plattformen).

Text

  • Nichts wird durch Masken, Container oder Bildränder angeschnitten (außer beabsichtigt).
  • Bei Mobilbreite (den Sheet-Frames) bleiben die wichtigsten Informationen lesbar.
  • Text bewegt sich nicht, während er gelesen werden soll.
  • (Neu in dieser Version) Chinesisch: Keine Rechtschreibfehler; ausschließlich traditionelle Schriftzeichen (keine vereinfachten); Satzzeichen in voller Breite; keine fehlenden Schriftzeichen (die als Kästchen oder deutlich andere Schrift erscheinen).

Rhythmus

  • Jeder Zustand, der gelesen werden soll, hält lang genug an (siehe motion-design Abschnitt 4). Wenn Text in den Frames des Haltebereichs noch in Bewegung ist, ist die Haltezeit zu kurz.
  • Szenen überlappen einander – kein Schnitt auf einen leeren Bildschirm.
  • Ausblendungen sind schneller als Einblendungen.

Konsistenz

  • Nur Farben aus dem :root-Farbfeld verwenden; die Akzentfarbe markiert den Schwerpunkt dieses Frames.
  • Dasselbe Element sieht in allen Szenen, in denen es vorkommt, gleich aus.

Audio (nur wenn Ton vorhanden)

  • Wellenform: video_audio_waveform prüft, ob die Spitzenwerte des Tons auf den Takten der TL liegen.
  • Lautstärke (neu in dieser Version, ersetzt das originale npm run wave): ffmpeg -hide_banner -nostats -i <Endvideo> -af ebur128=peak=true -f null - Lies die Zusammenfassung für Integrated loudness und True peak. Ziel: −14 LUFS ±1, True Peak ≤ −1 dBFS.
  • Aussprache und Emotion chinesischer Voiceovers: Der Benutzer hört mit eigenen Ohren, keine automatisierte Bewertung (neu in dieser Version).

Bericht

Gib bei Fertigstellung klar an: was geprüft wurde, was korrigiert wurde und auf welchem Sheet das Ergebnis zu sehen ist. Behaupte nicht, einen Fehler behoben zu haben, ohne das Rendering erneut ausgeführt und selbst gesehen zu haben.

Individual skills in this repo

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

Verwandte Skills