Communitygithub.com

Allgemein-Video

Ein Skill für die Erstellung und Bearbeitung von Videos mit KI-Unterstützung, der Workflows für Medien, Figma und kollaborative Erstellung integriert.

Was ist Allgemein-Video?

Dieser Skill bietet einen umfassenden, mehrstufigen Workflow zur KI-gestützten Videoproduktion und -bearbeitung, der Plattformen wie Claude Code, Cursor und Codex unterstützt. Er beginnt mit der Anwendung von querschnittlichen Quelladaptern für Medien- und Figma-Ressourcen, um sicherzustellen, dass alle Assets und Operationen korrekt aufgelöst und authentifiziert werden. Anschließend startet der Skill aus dem Projektzustand, indem er eine Prioritätsmatrix auswertet – von spezifischen Bearbeitungen über existierende Projektdateien bis hin zur Neuerstellung – und richtet die Umgebung mit Tools wie `npx hyperframes init` ein. Der Skill interpretiert dann die Projektform (z.B. automatisierter vs. begleiteter Ablauf), führt obligatorische Wissensladevorgänge vor jeder Phase durch und exekutiert die Komposition in einer Abhängigkeitsreihenfolge: Planung, Abhängigkeitsauflösung und Umsetzung. Er betont die Verwendung kanonischer Begriffe, die Einhaltung von Marken- und Medienverträgen und die Suche in einem Live-Katalog für Looks und Effekte, um manuelle Arbeit zu vermeiden. Der Skill ist besonders nützlich für Entwickler und Content-Ersteller, die KI-gesteuerte, reproduzierbare und qualitativ hochwertige Video-Workflows benötigen, mit besonderem Fokus auf kollaborative Qualität im Begleitmodus.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/general-video

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Allgemein-Video?

Bevor Sie sich auf diesen Workflow verlassen, führen Sie Folgendes aus:

npx hyperframes skills update general-video

Ein erfolgreicher No-Op bedeutet, dass der Skill aktuell ist. Zeigen Sie einen Update-Fehler an, anstatt aus dem Speicher fortzufahren.

1. Querschnittliche Quelladapter anwenden

  • Medien: Für alle Audio-, Bild-, Symbol-, Logo-, Sprach-, Grading-, LUT-, Bearbeitungs-/Effekt-, Untertitel- oder Medienoperationsanforderungen laden Sie /media-use und folgen Sie ../media-use/references/resolve.md (auflösen, übernehmen, wiederverwenden) und ../media-use/references/setup-providers.md (Anbieter, Authentifizierung). Vages Footage-Feedback und benannte Stile verwenden ../media-use/references/media-treatments.md vor der Bearbeitung; improvisieren Sie keine unterstützten Medieneffekte mit CSS/SVG/Opazität. Führen Sie vor der ersten authentifizierten Anbieteraktion npx hyperframes auth status aus und geben Sie dessen Ausgabe wörtlich weiter. Wenn abgemeldet, wenden Sie das Gate in ../hyperframes/references/brief-contract.md an: kollaboratives Warten auf Anmeldung oder eine explizite Offline-Wahl; autonomes Melden des Status und Fortfahren über einen verfügbaren Offline-Anbieter. Zeigen Sie einen Blocker an, wenn kein Offline-Anbieter eine erforderliche Fähigkeit erfüllen kann. Die lokale Übernahme allein erfordert kein Authentifizierungs-Gate.
  • Figma: Wenn es sich bei einer Eingabe um eine figma.com-URL handelt, führen Sie zuerst /figma aus. Bauen Sie auf den exportierten Assets, Tokens, Komponenten oder Storyboard-Frames auf. Verwenden Sie keine rohen Figma-Connector-Aufrufe, da diese die SVG-Bereinigung, Medienherkunft und Marken-Token-Bindung überspringen.

Diese Adapter ändern nicht den von /hyperframes ausgewählten Workflow.

2. Vom Projektzustand aus starten

Wenden Sie die erste zutreffende Zeile an; werten Sie keine niedrigeren Zustandszeilen aus:

ZustandAktion
Spezifische BearbeitungFühren Sie die Bearbeitung durch, bewahren Sie bestehende Projektentscheidungen und führen Sie dann betroffene Prüfungen erneut aus. Öffnen Sie die Erkundung nicht erneut.
BRIEF.md existiertLesen Sie sie. Wenn workflow einen anderen Workflow benennt und flow nicht companion ist, übergeben Sie. Stellen Sie keine Brief-Fragen.
Kein Brief, aber hyperframes.json oder STORYBOARD.md existiertSetzen Sie aus Dateien und aufgezeichneten Präferenzen fort. Füllen Sie BRIEF.md nur aus bekannten Fakten nach.
NeuerstellungFühren Sie /hyperframes und dessen Absichtsebene aus. Kehren Sie nur für workflow: general-video oder flow: companion hierher zurück.

Wählen Sie für ein neues Projekt einen kebab-case-Verzeichnisnamen aus dem Brief und erstellen Sie das Gerüst, bevor Sie den Brief schreiben:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

Schreiben Sie dann BRIEF.md im Projektstammverzeichnis unter Verwendung von ../hyperframes/references/brief-format.md. In einem bestehenden Projekt ist das Stammverzeichnis das Verzeichnis, das hyperframes.json enthält. Zeichnen Sie nur die bestätigten, präferenzgestützten Felder auf, die vom Briefformat benannt werden, unter Verwendung von node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>; zeichnen Sie niemals abgeleitete Standardwerte auf. Hier ist <MEDIA_DIR> das installierte /media-use-Skill-Verzeichnis und <PROJECT_ROOT> ist das Verzeichnis, das hyperframes.json enthält. Wenn die Absichtsebene ein Rezept übernommen hat, wenden Sie es jetzt mit node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> an und fragen Sie nicht erneut.

3. Die Ausführungsform interpretieren

Verwenden Sie nur die kanonischen Begriffe aus ../hyperframes/references/brief-contract.md:

FeldBedeutungWirkung
flowWer steuertautomation: Route auswählen und ausführen. companion: Gemeinsam im Gespräch erstellen.
storyboardPlanen, skizzieren und vor dem Bau überprüfenyes: Plan- und Skizzenüberprüfung durchführen (storyboard.html). no: Ohne bauen.
abgeleiteter modeWie Checkpoint-Gates sich verhaltenFolgen Sie dem Briefvertrag. Fragen Sie den Benutzer niemals, einen Modus zu benennen.

Erfinden Sie keine Synonyme für diese Zustände. Ein andauerndes „Bau es einfach“-Signal wird von der Absichtsebene verarbeitet und kommt als flow: automation, storyboard: no an.

  • Führen Sie für flow: automation die Route aus und geben Sie sie in einer Zeile im ersten Fortschrittsupdate an.
  • Führen Sie für eine spezifische Bearbeitung die Bearbeitung durch, ohne eine neue Route zu erfinden.

Für einen harten Schnitt, Trim, Splice oder eine Neuanordnung von vorhandenem Footage duplizieren Sie dieselbe Videoquelle in mehrere Clip-Elemente. Setzen Sie auf jeder Kopie den Quellbereich mit data-media-start plus data-duration und dann die erstellte Platzierung/Reihenfolge mit data-start. Separat erstelltes Audio folgt denselben Clip-Bereichen und dem Timing auf passenden <audio>-Elementen. /hyperframes-core besitzt diese zeitliche Bearbeitung; verwenden Sie /hyperframes-keyframes nur für die Animation visueller Eigenschaften wie Zoom, Punch, Pan, Crop, Mask oder clip-path auf einem inneren Wrapper. Kopieren Sie die vollständigen Verträge aus ../hyperframes-core/references/creator-editing-recipes.md.

Companion-Ablauf

Wenn flow: companion:

  • Lesen Sie BRIEF.md und gleichen Sie akzeptierte ## Assets und ## Customizations mit Projektartefakten ab. Schließen Sie akzeptierte Arbeit ab, die noch aussteht; lassen Sie abgeschlossene Arbeit in Ruhe; bieten Sie eine akzeptierte Fähigkeit nicht erneut an, als ob sie neu wäre.
  • Kommen Sie als Regisseur, nicht als Auftragnehmer. Ein Benutzer, der Companion gewählt hat, hat Beteiligung und Qualität gewählt; die ehrliche Antwort ist die beste Version, die Sie entwerfen können, nicht die kleinste, die Sie verteidigen können. Der erste Plan ist die Deckenbehandlung: der Handlungsbogen (leihen Sie sich die nächstgelegene Genre-Linse – Menü § Genre-Linsen), das Design-Pflichtenheft, die Bewegungsbehandlung jeder Szene, namentlich zitiert (§ 5's Plan-Disziplin), die Übergänge, die Audio-Identität – Musik und Soundmarks oder bewusste Stille – das Material des Benutzers, platziert, und ein gestalteter Anfang und Schluss. Sagen Sie in einer Zeile, was jede Ebene hinzufügt; kennzeichnen Sie die teuren (Renderzeit, Anmeldung, Abrechnung) während Sie sie benennen. Der Benutzer reduziert eine Behandlung; er sollte nie eine Behandlung Genehmigung für Genehmigung zusammenbauen müssen.
  • Die Decke gehört zum Konzept, nicht zum Werkzeugkasten. Jede Ebene muss der Botschaft des Briefs dienen – eine Behandlung, die jedes Video gleich bekleiden würde, ist Dekoration. Das Handwerk steigt zur Decke auf; der Inhalt wächst nie über das Gefragte hinaus (§ 6).
  • Zwischen Checkpoints funktioniert ../hyperframes/references/capability-menu.md auf zwei Arten. Als Auslöserliste: Bieten Sie eine relevante Fähigkeit an, wenn der Benutzer deren Eingabe erwähnt oder der Build ihren Bedarf erreicht. Als Upgrade-Kanal jedes Durchlaufs: Ein Plan-, Skizzen- oder Build-Checkpoint kann ein oder zwei verfolgte Angebote tragen, die auf das Material verweisen, das der Benutzer gerade ansieht („Szene 3s Statistik möchte die Count-up-Behandlung“). Lesen Sie es, bevor Sie etwas anbieten; werfen Sie niemals den vollständigen Katalog aus.
  • Nachdem der Benutzer eine Fähigkeit akzeptiert hat, erstellen Sie deren Artefakt und zeichnen Sie die Entscheidung sofort im passenden BRIEF.md-Abschnitt auf. Überschreiben Sie ein Frontmatter-Feld und zeichnen Sie die bestätigte Präferenz nur auf, wenn der Benutzer sie explizit ändert.
  • Behalten Sie dieselben Storyboard-, Validierungs-, Endvorschau- und Render-Freigabe-Gates bei. Companion ändert, wer steuert, nicht, was Qualität erfordert.

4. Erforderliches Wissen vor jeder Phase laden

Diese Lesevorgänge sind obligatorisch, wenn ihre Bedingung zutrifft:

BedingungLesen Sie vor dem Handeln
Irgendein Kompositions-HTML oder Szenen-Layout/hyperframes-core; verwenden Sie references/determinism-rules.md für dessen Layout-Vertrag
Irgendeine nicht-triviale Erstellung oder visuelle Behandlung/hyperframes-creative → references/house-style.md und references/video-composition.md
Irgendeine Bewegung, Animation oder Szenen-Überblendung/hyperframes-animation; folgen Sie dessen Routing zu den passenden Regeln, Adaptern, Blaupausen oder Übergangsreferenzen
storyboard: yes../hyperframes/references/storyboard-format.md und ../hyperframes/references/review-loop.md
Irgendein Medien-Asset oder -Operation, einschließlich Erzählung, Hintergrundmusik, Soundeffekte, Untertitel, Grading oder Transformationen/media-use; für Framework-Wiedergabe und -Platzierung lesen Sie auch /hyperframes-core → references/variables-and-media.md
Mehrszenen-Montage../hyperframes/references/production-loop.md
flow: companion, vor dem ersten Plan/hyperframes-creative → references/story-spine.md und references/house-style.md; die nächstgelegene Genre-Linse und das vollständige ../hyperframes/references/capability-menu.md – die Deckenbehandlung wird daraus entworfen, nicht erinnert
Ein Companion-Fähigkeitsangebot, Capture, Beat-Gitter, generatives Video, Karte, Veröffentlichung oder Cross-Workflow-Fähigkeit../hyperframes/references/capability-menu.md
Ein Design-Pflichtenheft existiert, vor der endgültigen Freigabe/hyperframes-creative → references/design-adherence.md

Ersetzen Sie diese Lesevorgänge nicht durch Erinnerungen. Progressive Offenlegung spart nur Kontext, wenn die passende Referenz tatsächlich geladen ist.

5. Die Komposition ausführen

Verwenden Sie diese Abhängigkeitsreihenfolge. Überspringen Sie eine Phase nur, wenn ihre Eingabe fehlt.

  1. Plan. Geben Sie den Zuschauerbogen, die Struktur, den Rhythmus und den Dauer-Treiber an. Verwenden Sie eine Datei für eine kurze einzelne Szene; verwenden Sie Unterkompositionen für drei oder mehr harte Szenenschnitte oder jede wiederverwendete Szene. Lesen Sie /hyperframes-creative → references/story-spine.md für erzählte Bögen, references/beat-direction.md für Rhythmus und /hyperframes-core → references/composition-patterns.md für Struktur. Erweitern Sie für einen offenen, mehrszenigen Brief die Eingabeaufforderung über /hyperframes-creative → references/prompt-expansion.md. Ein mehrszeniger Plan zitiert die Form jeder Szene: eine Blaupausen-ID aus /hyperframes-animation → blueprints-index.md, wenn eine passt, oder die benannten Regeln, die sie aus rules-index.md zusammensetzt, wenn keine passt – Bewegungsnamen stammen aus diesen Indizes, niemals erfunden. Die Story-Wahrheit entscheidet, welche Szenen existieren; das Zitat kleidet sie ein. Durchsuchen Sie den Live-Katalog, bevor Sie planen, einen benannten Look selbst zu bauen: für jeden Look, Effekt, Behandlung oder Übergang, den der Brief nennt – „CRT-Scanlines“, „Glitch“, „Filmkorn“, „Schimmer-Sweep“, „Konfetti-Ausbruch“ – führen Sie npx hyperframes catalog --query "<der Look, auf Deutsch>" --json aus und lesen Sie die Top-Ergebnisse, bevor der Plan benennt, wie dieser Look gebaut wird. Die Suche benötigt nichts installiert: kein Projekt, kein vorheriges add, kein Konto. Sie bewertet das gesamte gehostete Registry (~400 Blöcke und Komponenten) aus jedem Verzeichnis, daher gilt sie auch für einen Look, den der Benutzer während des Baus anfragt. Blöcke, die der Plan nennt, werden in Stufe 3 installiert; schreiben Sie einen Look nur von Hand, nachdem eine Suche danach nichts Passendes ergeben hat. Ein mehrszeniger Plan wird auch als das Dispatch-Artefakt aufgezeichnet: ein ## Frame N-Block pro Szene in STORYBOARD.md – status: outline, eine deklarierte src:, das Blaupausen/Regeln-Zitat und der Beat-Text – auch wenn storyboard: no. Der Block ist die Dispatch-Einheit; das Storyboard-Blatt ist nur die Überprüfungsoberfläche.
  2. Überprüfen Sie den Plan, wenn angefordert. Führen Sie für storyboard: yes die gemeinsame Überprüfungsschleife über diese Blöcke aus. Fahren Sie für storyboard: no ohne Planpause oder Skizzenblatt fort. Wenn dennoch eine Planpause auftritt, falten Sie die Sub-Agent-Delegationsgewährung (die von Codex für Schritt 4's Dispatch benötigt wird) in diese Pause ein, anstatt später erneut anzuhalten.
  3. Abhängigkeiten auflösen. Installieren Sie Registry-Blöcke vor paralleler Arbeit. Stufen Sie Benutzer-Assets ein, übernehmen Sie vorhandene...

Individual skills in this repo

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

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Verwandte Skills