assafkip/claude-video-editor

Installieren und verdrahten Sie Registry-Blöcke und -Komponenten in HyperFrames-Kompositionen. Verwenden Sie dies beim Ausführen von 'hyperframes add', beim Installieren eines Blocks oder einer Komponente, beim Verdrahten eines installierten Elements in index.html oder beim Arbeiten mit hyperframes.json. Behandelt den add-Befehl, Installationsorte, Block-Subkompositions-Verdrahtung, Komponenten-Snippet-Zusammenführung und Registry-Erkennung.

Was ist claude-video-editor?

Dieses Skill ermöglicht die Arbeit mit der HyperFrames-Registry, einer Sammlung wiederverwendbarer Blöcke (eigenständige Unterkompositionen mit eigenen Dimensionen, Dauer und Timeline) und Komponenten (Effekt-Snippets ohne eigene Dimensionen). Es wird aktiviert, wenn der Benutzer Begriffe wie 'hyperframes add', 'Block', 'Komponente' oder 'hyperframes.json' erwähnt oder wenn die Ausgabe von 'hyperframes add' in der Sitzung erscheint. Der Skill behandelt die Installation über die CLI (z.B. 'hyperframes add data-chart'), die korrekte Verdrahtung von Blöcken via 'data-composition-src' in der index.html (inklusive Attribute wie data-composition-id, data-start und data-track-index) sowie das Einfügen von Komponenten-Snippets in bestehende Kompositionen. Er unterstützt alle gängigen Plattformen, die HyperFrames verwenden (z.B. Claude Code), und basiert auf der offiziellen SKILL.md-Dokumentation, die Installationspfade, Registry-Erkennung (via curl) und Konfigurationsmöglichkeiten in hyperframes.json abdeckt. Nützlich für Entwickler, die schnell Blöcke oder Komponenten aus der Registry in ihre HyperFrames-Projekte einbinden und korrekt verdrahten möchten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/assafkip/claude-video-editor/tree/HEAD/skills/hyperframes-registry

Dokumentation

HyperFrames-Registry

Die Registry stellt wiederverwendbare Blöcke und Komponenten zur Verfügung, die über hyperframes add <name> installiert werden können.

Blöcke — eigenständige Unterkompositionen (eigene Dimensionen, Dauer, Timeline). Werden per data-composition-src in eine Host-Komposition eingebunden.
Komponenten — Effekt-Snippets (keine eigenen Dimensionen). Werden direkt in das HTML einer Host-Komposition eingefügt.

Wann dieses Skill verwendet werden soll

Der Benutzer erwähnt hyperframes add, „Block“, „Komponente“ oder hyperframes.json
Die Ausgabe von hyperframes add erscheint in der Sitzung (Dateipfade, Zwischenablage-Snippet)
Sie müssen ein installiertes Element in eine bestehende Komposition verdrahten
Sie möchten entdecken, was in der Registry verfügbar ist

Kurzreferenz

hyperframes add data-chart              # Block installieren
hyperframes add grain-overlay           # Komponente installieren
hyperframes add shimmer-sweep --dir .   # Auf ein bestimmtes Projekt abzielen
hyperframes add data-chart --json       # Maschinenlesbare Ausgabe
hyperframes add data-chart --no-clipboard  # Zwischenablage überspringen (CI/headless)

Nach der Installation gibt die CLI aus, welche Dateien geschrieben wurden und ein Snippet zum Einfügen in Ihre Host-Komposition. Das Snippet ist ein Ausgangspunkt – Sie müssen die Attribute data-composition-id (muss mit der internen Kompositions-ID des Blocks übereinstimmen), data-start und data-track-index hinzufügen, wenn Sie Blöcke verdrahten.

Hinweis: hyperframes add funktioniert nur für Blöcke und Komponenten. Für Beispiele verwenden Sie stattdessen hyperframes init <dir> --example <name>.

Installationsorte

Blöcke werden standardmäßig in compositions/<name>.html installiert. Komponenten werden standardmäßig in compositions/components/<name>.html installiert.

Diese Pfade können in hyperframes.json konfiguriert werden:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

Siehe install-locations.md für vollständige Details.

Blöcke verdrahten

Blöcke sind eigenständige Kompositionen – binden Sie sie über data-composition-src in Ihre Host-index.html ein:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Wichtige Attribute:

data-composition-src — Pfad zur Block-HTML-Datei
data-composition-id — muss mit der internen ID des Blocks übereinstimmen
data-start — wann der Block in der Host-Timeline erscheint (Sekunden)
data-duration — wie lange der Block abgespielt wird
data-width / data-height — Block-Canvas-Abmessungen
data-track-index — Ebenen-Reihenfolge (höher = weiter vorne)

Siehe wiring-blocks.md für vollständige Details.

Komponenten verdrahten

Komponenten sind Snippets – fügen Sie ihr HTML in Ihr Kompositions-Markup, ihr CSS in Ihren Style-Block und ihr JS in Ihr Skript ein (falls vorhanden):

Lesen Sie die installierte Datei (z. B. compositions/components/grain-overlay.html)
Kopieren Sie die HTML-Elemente in Ihr <div data-composition-id="..."> der Komposition
Kopieren Sie den <style>-Block in die Styles Ihrer Komposition
Kopieren Sie jeglichen <script>-Inhalt in Ihr Kompositions-Skript (vor Ihrem Timeline-Code)
Wenn die Komponente eine GSAP-Timeline-Integration bereitstellt (siehe Kommentarblock im Snippet), fügen Sie diese Aufrufe zu Ihrer Timeline hinzu

Siehe wiring-components.md für vollständige Details.

Erkennung

Durchsuchen Sie verfügbare Elemente:

# Registry-Manifest lesen
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

Die registry-item.json jedes Elements enthält: Name, Typ, Titel, Beschreibung, Tags, Dimensionen (nur Blöcke), Dauer (nur Blöcke) und Dateiliste.

Siehe discovery.md für Details zum Filtern nach Typ und Tags.