Communitygithub.com

media-use

Das Medien-Betriebssystem für HyperFrames: Löse alle Medienanforderungen in einem Skill – von BGM, SFX, Bildern und Logos über Sprachausgabe, Transkription und Untertitel bis hin zu Farbkorrektur, LUTs und kreativen Behandlungen.

Was ist media-use?

Dieser Skill ist die zentrale Medienverwaltung für HyperFrames-Projekte. Er ermöglicht es, jegliche Medienressourcen (Hintergrundmusik, Soundeffekte, Bilder, Icons, Logos, Sprachaufnahmen, Farbkorrekturen und LUTs) mit einem einzigen Befehl (`resolve`) aufzulösen und als lokale Datei oder einfügebereiten Block bereitzustellen. Fehlende Assets können mittels TTS-, Musik- oder Bildgenerierungsmodellen erzeugt werden. Darüber hinaus bietet der Skill eine gemeinsame Audio-Engine für Sprachaufnahmen, Transkription, Untertitel und Hintergrundentfernung sowie Operatoren zum Schneiden, Neurahmen und Transformieren von Medien. Besonders nützlich ist die Fähigkeit, vage Benutzerrückmeldungen (z. B. „sieht dunkel/flach/langweilig aus“, „soll retro/Camcorder/Print/ASCII wirken“) als Medienabsicht zu interpretieren und entsprechende Behandlungen vorzuschlagen. Der Skill unterstützt die Plattformen HeyGen (Standard) sowie lokale Anbieter und wird als CLI-Tool (Node.js) ausgeführt. Er arbeitet deterministisch, vermeidet unnötige Kontextüberflutung und bietet eine klare Referenzdokumentation für jede Teilaufgabe.

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

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht media-use?

Das Medien-Betriebssystem für HyperFrames: auflösen · erzeugen · bearbeiten · merken – jeder Medientyp, ein Skill, null Kontextrauschen.

Erster Durchlauf: Installiere und melde dich in der heygen CLI an (der kostenlose Nutzungspfad), verifiziere dann mit node <SKILL_DIR>/scripts/resolve.mjs --doctor. Einrichtung und Anbieter: references/setup-providers.md.

Auflösen – das eine Verb

node <SKILL_DIR>/scripts/resolve.mjs --type <type> --intent "<description>" --project <dir>

Gibt eine Zeile zurück: resolved <id> → <path> (<type>, <metadata>). Aller 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+ Vektoren)
iconIcons, Symbole (transparent)
logoOffizielle Markenzeichen (svgl → simple-icons → GitHub-Avatar → Favicon; nie neu gezeichnet)
voiceTTS-Sprachaufnahme (HeyGen kostenloser Pfad; optional lokales Kokoro)
gradeGemessene Korrekturvorschlag; breite Politur/Stilisierung folgt Medienbehandlungen
lutBenutzerbereitgestellte oder explizit gewählte wiederverwendbare validierte .cube-Datei

Bevor du frische Ressourcen auflöst, liste wiederverwendbare Kandidaten mit --candidates auf und beurteile selbst die Eignung – Wiederverwendungsregeln, alle Flags, Import (--from) und Übernahme findest du in references/resolve.md.

Behandle breites visuelles Feedback als Medienabsicht

Wenn ein Benutzer explizit darum bittet, fotografische Medien zu korrigieren, zu polieren, zu stilisieren, zu verdecken, hervorzuheben oder zu enthüllen, lies references/media-treatments.md – auch wenn er keine Farbkorrektur oder einen Effekt nennt. Untersuche das tatsächliche <img>/<video>, wähle eine primäre Absicht, verwende dann deterministische Persistenz und Verifikation. Verwende ein passendes Rezept als optionalen getesteten Startpunkt oder inspiziere hyperframes media-treatment --capabilities --json und fordere dann eine relevante Familie/einen relevanten Effekt mit --capability <id> an und stelle eine benutzerdefinierte Behandlung aus kanonischen Steuerelementen zusammen. Lade niemals --all für normales Authoring. Eine Behandlung kann Korrektur, ein Preset, Finishing, kompatible Shader-Effekte, unterstützte Keyframes und optionale Registry-Overlays kombinieren. Füge nur quellbegründete begrenzte Anpassungen und kompatible Teile hinzu, niemals Effekte nur, um das Ergebnis ausgefeilter erscheinen zu lassen. Persistiere die endgültige kombinierte Nutzlast mit hyperframes media-treatment.

Verwende einen schrittweise eskalierenden Arbeitsablauf. Für Video inspiziere ein beschriftetes frühes/mittleres/spätes Kontaktblatt, anstatt Frames einzeln zu lesen. Wende einen Kandidaten an und inspiziere ein Nachher-Blatt für gewöhnliche Korrektur oder Politur. Eskaliere zu einzelnen Frames oder bewegten Entwurfsnachweisen nur, wenn das Ergebnis mehrdeutig, zeitlich, stilisiert, LUT-basiert, HDR/LOG-empfindlich, privat oder markenkritisch ist.

Für gewöhnliche Korrektur oder Politur persistiere das endgültige Preset/Anpassungs-JSON der Behandlung. Erzeuge keine .cube-LUT nur, um Belichtung, Schatten, Kontrast oder Wärme zu codieren. Verwende eine LUT nur, wenn der Benutzer eine bereitstellt oder die ausgewählte Behandlung explizit eine besitzt. resolve --type grade --for ... --analyze ist Messnachweis, keine Erlaubnis, die gewählte Behandlung durch eine erzeugte LUT zu ersetzen. Erstelle keine unterstützten Vignetten-, Körnungs-, Weichzeichnungs-, Pixelierungs-, Farb- oder Behandlungseffekte mit CSS/SVG-Overlays neu; das umgeht die Studio-Steuerung und den kanonischen Vorschau-/Render-Shader-Pfad.

Sei proaktiv – führe einen Medienchancen-Durchlauf durch

Der Mensch kann meist nicht sagen, welche Medien das Stück verbessern würden. Du schon. Wenn du eine Komposition erstellst oder überprüfst, führe einen fundierten Scan durch und frage dann einmal – füge nichts stillschweigend hinzu und nörgele nicht pro Asset.

Präsentiere eine Chance nur, wenn ein konkretes Signal vorhanden ist:

Detektiertes SignalAngebot
Bildschirmtext / ein Skript ohne SprachaufnahmeTTS-Sprachaufnahme (Audio-Engine)
Emoji oder ein als Icon gestyltes <div>echte icons auflösen
Bild, das ein Platzhalter, winzig oder hochskaliert wirktein besseres image (und/oder hochskalieren – siehe references/operations.md)
Harte Szenenschnitte / Übergänge ohne TonÜbergangs-sfx
Ein Stück über ~10s ohne Musikbettbgm
Aufnahmen, die unter-/überbelichtet oder farbstichig wirkeneine korrigierende Gradierung (untersuche es mit hyperframes media-treatment --selector '#hero' --analyze --json)
Fotografische Medien, die visuell flach oder themenfremd wirkenein spezifisches, quellenangepasstes Preset oder eine benutzerdefinierte Behandlung mit benanntem Ziel
Ein bedeutungsvoller Medieneintritt/Enthüllung, der statisch wirkteine unterstützte, seeksichere Behandlungsanimation; Farbe beibehalten, es sei denn, die Anfrage rechtfertigt auch ein Preset

Regeln, die das zu einer Hilfe und nicht zu einer Nörgelei machen: begründet, nicht generisch (kein Signal → kein Vorschlag); meinungsstark + konkret (schlage die spezifische Korrektur mit Standardeinstellungen vor – der Mensch genehmigt alles / einiges / nichts); einmal pro Projekt (eine konsolidierte Anfrage; respektiere „Lass es“); vorschlagen, niemals stillschweigend ändern (besonders Farbkorrekturen: vorschlagen und in der Vorschau zeigen – eine Grauwelt-„Korrektur“ ruiniert einen beabsichtigten Sonnenuntergangs- oder Neon-Look).

Wo nachschlagen – lies nur die Datei, die deine Aufgabe braucht

AufgabeLies
auflösen / wiederverwenden / übernehmen / importieren, Flags, Kaskade, Inventarreferences/resolve.md
Farbkorrektur, LUTs, Smart Grade (--for), Grade-Vergleichreferences/grading.md
Sprachaufnahme / TTS, Musik, SFX, Untertitel, Transkription (Audio-Engine)references/audio.md
vorhandene Medien schneiden / neurahmen / transformieren, 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
Besitzmatrix, Nutzungsstatistiken, Telemetrie, Privatsphäre (Maintainer-Perspektive)references/meta.md

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Verwandte Skills