Communitygithub.com

heygen-com/hyperframes

Agent Media OS: Ein Skill für alle Medienanforderungen in HyperFrames-Projekten – auflösen, generieren, bearbeiten und wiederverwenden von Assets wie BGM, SFX, Bildern, Icons, Logos, Stimmen, Farbkorrekturen und LUTs.

Was ist hyperframes?

Dieser Skill verwandelt HyperFrames in ein vollständiges Media-Betriebssystem für KI-Agenten. Er vereint die Funktionen zum Auflösen von Medien-Assets aus Katalogen, zur Generierung fehlender Inhalte per TTS/Musik/Bild-KI, zur Bearbeitung (Schneiden, Umrahmen, Transformieren) und zur projektübergreifenden Wiederverwendung – alles mit einem einzigen Befehl: `resolve`. Der Skill unterstützt die Plattformen Claude Code, Cursor und Codex und ist besonders nützlich für Entwickler, die in HyperFrames arbeiten und Medienintelligenz benötigen, ohne zwischen verschiedenen Diensten wechseln zu müssen. Eine Besonderheit ist die proaktive Medienanalyse: Der Agent erkennt selbstständig, wo Soundeffekte, Hintergrundmusik oder eine Farbkorrektur das Projekt verbessern könnten, und schlägt diese gezielt vor – ohne aufdringlich zu sein.

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

In Ihrer bevorzugten KI fragen

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

Dokumentation

Plugin-Installation: Bevor Sie Setup- oder Aktualisierungsbefehle ausführen, beachten Sie die Plugin-Ausführungsregeln, wenn dieser Skill Teil eines HyperFrames-Plugins ist. Bei eigenständigen Installationen gelten die unten stehenden Update-Hinweise.

Mediennutzung

Das Media-Betriebssystem für HyperFrames: Auflösen · Generieren · Bearbeiten · Merken – jeder Medientyp, ein Skill, null Kontextrauschen.

Erster Start: Installieren und melden Sie sich bei der heygen CLI an (kostenloser Pfad), dann überprüfen Sie mit npx hyperframes media-use resolve --doctor. Einrichtung und Anbieter: references/setup-providers.md.

Auflösen – das eine Verb

npx hyperframes media-use resolve --type <Typ> --intent "<Beschreibung>" --project <Verzeichnis>

Gibt eine Zeile zurück: resolved <ID> → <Pfad> (<Typ>, <Metadaten>). Der gesamte Suchlärm bleibt auf der Festplatte.

TypEinzeilige Absicht
bgmHintergrundmusik (HeyGen-Katalog, 10k+ Titel)
sfxSoundeffekte (gebündelte 19-Datei-Bibliothek + Katalog)
imageFotos, Hintergründe (HeyGen-Assetsuche, 75k+ Vektorgrafiken)
iconSymbole, Icons (transparent)
logoOffizielle Markenzeichen (theSVG → GitHub-Avatar → Favicon; nie neu gezeichnet)
voiceTTS-Sprachausgabe (HeyGen-Kostenlos-Pfad; optional lokales Kokoro)
gradeGemessener Korrekturvorschlag; breite Verfeinerung/Stylisierung folgt Media Treatments
lutBenutzerdefinierte oder explizit gewählte, wiederverwendbare validierte .cube-Datei

Vor dem Auflösen frischer Assets listen Sie wiederverwendbare Kandidaten mit --candidates auf und beurteilen Sie selbst die Eignung – Wiederverwendungsregeln, alle Flags, Import (--from) und Übernahme finden Sie in references/resolve.md.

Behandeln Sie breites visuelles Feedback als Medienabsicht

Wenn ein Benutzer explizit darum bittet, fotografische Medien zu korrigieren, zu polieren, zu stylisieren, zu verdecken, hervorzuheben oder freizulegen, lesen Sie references/media-treatments.md, auch wenn er keine Farbkorrektur oder einen Effekt nennt. Prüfen Sie das tatsächliche <img>/<video>, wählen Sie eine primäre Absicht, verwenden Sie dann deterministische Persistenz und Verifizierung. Verwenden Sie ein passendes Rezept als optionalen getesteten Startwert oder prüfen Sie hyperframes media-treatment --capabilities --json, fordern Sie dann eine relevante Familie/einen Effekt mit --capability <ID> an und stellen Sie eine benutzerdefinierte Behandlung aus kanonischen Steuerelementen zusammen. Laden Sie für normales Erstellen niemals --all. Eine Behandlung kann Korrektur, ein Preset, Finishing, kompatible Shader-Effekte, unterstützte Keyframes und optionale Registry-Überlagerungen kombinieren. Fügen Sie nur quellenbegründete, begrenzte Anpassungen und kompatible Teile hinzu, niemals Effekte, nur um das Ergebnis anspruchsvoller aussehen zu lassen. Persistieren Sie die endgültige kombinierte Nutzlast mit hyperframes media-treatment.

Verwenden Sie einen schrittweise eskalierenden Workflow. Prüfen Sie bei Videos eine beschriftete Kontaktliste von frühen/mittleren/späten Frames, anstatt Frames separat zu lesen. Wenden Sie einen Kandidaten an und prüfen Sie für gewöhnliche Korrekturen oder Politur eine Nachher-Kontaktliste. Eskalieren Sie zu einzelnen Frames oder bewegten Entwurfsbeweisen nur, wenn das Ergebnis mehrdeutig, zeitlich, stilisiert, LUT-basiert, HDR/LOG-empfindlich, privat oder markenkritisch ist.

Für gewöhnliche Korrekturen oder Politur persistieren Sie das Preset/Anpassungs-JSON der endgültigen Behandlung. Generieren Sie keine .cube-LUT, nur um Belichtung, Schatten, Kontrast oder Wärme zu kodieren. Verwenden Sie eine LUT nur, wenn der Benutzer eine bereitstellt oder die ausgewählte Behandlung explizit eine besitzt. resolve --type grade --for ... --analyze ist Messnachweis, keine Berechtigung, die gewählte Behandlung durch eine generierte LUT zu ersetzen. Erstellen Sie unterstützte Vignetten-, Körnungs-, Unschärfe-, Pixel-, Farb- oder Behandlungseffekte nicht mit CSS/SVG-Overlays nach; dies umgeht Studio-Steuerelemente und den kanonischen Vorschau-/Rendering-Shader-Pfad.

Seien Sie proaktiv – führen Sie einen Medienchancen-Durchlauf durch

Der Mensch kann normalerweise nicht sagen, welche Medien das Stück aufwerten würden. Sie können. Wenn Sie eine Komposition erstellen oder überprüfen, führen Sie einen fundierten Scan durch und fragen Sie dann einmal – fügen Sie nichts stillschweigend hinzu und nörgeln Sie nicht an jedem Asset.

Schlagen Sie eine Chance nur dann vor, wenn ein konkretes Signal vorliegt:

Detektiertes SignalAngebot
Text auf dem Bildschirm / ein Skript ohne SprachausgabeTTS-Sprachausgabe (Audio-Engine)
Emoji oder ein <div>, das als Icon gestylt istechte icons auflösen
Bild, das ein Platzhalter, winzig oder hochskaliert aussiehtein besseres image (und/oder Upscaling – siehe references/operations.md)
Harte Szenenschnitte / Übergänge ohne TonÜbergangs-sfx
Ein Stück länger als ~10s ohne Musikbettbgm
Filmmaterial, das unter-/überbelichtet oder farbstichig wirkteine korrektive Gradierung (prüfen mit hyperframes media-treatment --selector '#hero' --analyze --json)
Fotografisches Medium, das visuell flach oder themenfremd wirktein spezifisches, quellenangepasstes Preset oder eine benutzerdefinierte Behandlung mit benanntem Ziel
Eine bedeutungsvolle Medien-Einblendung/-Enthüllung, die statisch wirkteine unterstützte suchsichere Behandlungsanimation; Farbe erhalten, es sei denn, die Anfrage rechtfertigt auch ein Preset

Regeln, die dies zu einer Hilfe machen, nicht zu Nörgelware: fundiert, nicht generisch (kein Signal → kein Vorschlag); meinungsstark + konkret (die spezifische Lösung mit Standardwerten vorschlagen – der Mensch genehmigt alles / etwas / nichts); einmal pro Projekt (eine konsolidierte Anfrage; „lass es“ respektieren); an der Oberfläche, niemals stillschweigend mutieren (besonders Farbkorrekturen: vorschlagen und Vorschau anzeigen – eine Grauwelt-„Korrektur“ ruiniert einen absichtlichen Sonnenuntergang oder Neon-Look).

Wo suchen – lesen Sie nur die Datei, die Ihre Aufgabe benötigt

AufgabeLesen
Auflösen / Wiederverwenden / Übernehmen / Importieren, Flags, Kaskade, Inventarreferences/resolve.md
Farbkorrektur, LUTs, intelligente Gradierung (--for), Gradierung-Vergleichreferences/grading.md
Sprachausgabe / TTS, Musik, SFX, Untertitel, Transkription (Audio-Engine)references/audio.md
Schneiden / Umrahmen / Transformieren vorhandener Medien, exakte Fehlerdiffusion, HEVCreferences/operations.md
Quellenbewusste kreative Behandlungen, Echtzeiteffekte, Overlays, Enthüllungenreferences/media-treatments.md
Installation + Authentifizierung, Anbietertabelle, RAM-Stufen, --local-only, --providerreferences/setup-providers.md
Gespeicherte Präferenzen + eingefrorene Rezepte (Benutzerspeicher)references/memory.md
Eigentumsmatrix, Nutzungsstatistiken, Telemetrie, Datenschutz (für Betreuer)references/meta.md

Individual skills in this repo

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

general-video

>

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

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

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

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

name: embedded-captions

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

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

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]

Verwandte Skills