Communitygithub.com

Drama2557/4RealDigital-Video-Studio

Verwandle beliebigen Text – einen Artikel, Notizen, ein Thema, eine Kurzbeschreibung – in ein gesichtsloses Erklärvideo: Es gibt keine Website oder Aufnahmen, daher werden die Bilder pro Szene erfunden (Typografie, abstrakte Grafiken, Diagramme, Datenvisualisierung).

Was ist 4RealDigital-Video-Studio?

Diese Fähigkeit (Skill) für KI-Agenten orchestriert die Erstellung von gesichtslosen Erklärvideos aus reinem Text. Sie ist ideal, um Themen zu erklären, Konzepte aufzuschlüsseln, Anleitungen zu geben oder Listicles zu erstellen – immer dann, wenn keine Produkt-Website oder Screenshots als Basis dienen. Der Workflow führt den Agenten durch sechs Schritte: initiale Einrichtung des HyperFrames-Projekts, Erstellung einer synthetischen Textgrundlage (als Ersatz für Web-Captures), Auswahl eines Designsystems aus einer Bibliothek, Entwicklung eines Storyboards und Drehbuchs, Generierung von Audio (Sprache und Hintergrundmusik) und schließlich die visuelle Gestaltung jedes einzelnen Bildes. Der Agent arbeitet eigenständig, gibt aber bei kritischen Entscheidungen (Skizzierung, Storyboard-Genehmigung) die Kontrolle an den Benutzer ab. Das Ergebnis ist eine vollständige, animierte Videodatei, die visuell neu erfunden und nicht von bestehenden Assets abhängig ist. Die Fähigkeit ist ein Teil des HyperFrames-Ökosystems und nutzt Dienste wie HeyGen für Sprachausgabe und Musik.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/faceless-explainer

In Ihrer bevorzugten KI fragen

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

Dokumentation

Halten Sie diesen Skill zunächst aktuell – führen Sie ihn still aus, ohne zu fragen: npx hyperframes skills update faceless-explainer. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es diesen Skill und die Kernbereich-Skills, von denen er abhängt, bevor Sie sich auf sie verlassen.

Nutzung von Medien: Bevor Sie Audio/Bilder/Logos beschaffen, rufen Sie /media-use auf, um BGM/SFX/Bilder aus dem HeyGen-Katalog und Markenlogos aus deren offiziellen Quellen zu beziehen. Führen Sie zuerst --adopt aus, um vorhandene Assets zu registrieren. Siehe /media-use Skill.

Gesichtsloser Erklärer zu HyperFrames

Verwenden Sie diesen Skill, um einen Textkörper in ein Erklärvideo zu verwandeln: Wählen Sie ein Designsystem, planen Sie eine Lehrgeschichte und bauen Sie sie Bild für Bild in HyperFrames auf. Gesichtslos bedeutet, dass jedes Bild nachgelagert erfunden wird – es gibt keinen Aufnahmeschritt und kein reales Asset-Inventar.

Die Eingangstür ist /hyperframes. Sie sind der Orchestrator. Führen Sie jeden Schritt aus, überprüfen Sie sein Tor und fahren Sie erst dann fort. Dieser Skill dient dazu, ein Thema aus Text zu erklären, ohne Produkt und ohne aufzunehmende Website. Bei jeder anderen Absicht, einem bloßen "Video erstellen" oder bei Unsicherheit → lesen Sie zuerst /hyperframes – die Intent-Ebene besitzt jede Routenentscheidung, und eine frische Erstellung, die hier ohne BRIEF.md ankommt, durchläuft sie trotzdem (Eröffnungsregel des Setups).

Sie sind der Orchestrator. Arbeiten Sie in videos/<Projekt>/. Führen Sie die Schritte nacheinander aus und passieren Sie jedes Tor, bevor Sie fortfahren. Benutzergesteuerte Schritte sind Schritt 0, Schritt 3 und Schritt 6. Lesen Sie ../hyperframes-core/references/brief-contract.md vor Schritt 0 – es definiert die Tortypen und wie flow/storyboard der BRIEF.md den Modus ableiten, der die Tore von Schritt 3/4/6 bestimmt. Führen Sie jeden Schritt selbst aus, außer Schritt 5, wo Sie einen Unter-Agenten pro Bild entsenden. Legen Sie keine Design- oder Bewegungsregeln hier ab; diese leben im Frame-Worker-Unter-Agenten, in den lokalen ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ und in hyperframes-creative.

Workflow: Schritt 0 Setup → hyperframes.json; Schritt 1 Kurzbeschreibung → capture/extracted/; Schritt 2 Designsystem → frame.md; Schritt 3 Storyboard/Skript → STORYBOARD.md und SCRIPT.md; Schritt 3.1 Audio → audio_meta.json; Schritt 4 Visuelles Design → angereichertes STORYBOARD.md; Schritt 5 Bilder → compositions/frames/NN-*.html und index.html; Schritt 6 Finaler Render → renders/video.mp4.


Schritt 0: Setup

Ziel: Mit einer bestätigten Kurzbeschreibung eintreten, das HyperFrames-Projekt erstellen und die Kurzbeschreibung beständig machen.

Die Kurzbeschreibung wird von der Intent-Ebene bestätigt, nicht durch hier gestellte Fragen. Eröffnungsregel, in der Reihenfolge: (1) BRIEF.md existiert → lesen Sie sie und fragen Sie nichts – die Kurzbeschreibung ist abgeschlossen, und ihr flow/storyboard leiten den Modus ab (Kurzbeschreibungsvertrag § 1). (2) Kein BRIED.md, aber das Projekt existiert (hyperframes.json / STORYBOARD.md auf der Festplatte) → setzen Sie vom Frontmatter des Storyboards und den aufgezeichneten Präferenzen fort; befragen Sie niemals ein halbfertiges Projekt erneut. (3) Weder noch – eine frische Erstellungsanfrage, die direkt hier angekommen ist → lesen Sie /hyperframes und führen Sie dessen Intent-Ebene aus (references/intent-interview.md): sie prüft Rezepte und gespeicherte Standardeinstellungen, führt die Fragen dieser Route durch (../hyperframes/references/routes/faceless-explainer.md) und gibt die gesperrte Kurzbeschreibung zurück. Bearbeitungsanfragen überspringen all dies – gehen Sie und führen Sie die Bearbeitung durch.

Initialisieren Sie nur, wenn hyperframes.json fehlt. Benennen Sie <Projekt> nach dem Thema in Kebab-Schreibweise, z. B. zinseszins-erklaert; verwenden Sie niemals den Arbeitsbereichsnamen oder einen Zeitstempel.

npx hyperframes init "videos/<Projekt>" --non-interactive --example=blank --skill=faceless-explainer – init prüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert das globale Set, falls eines veraltet ist.

Nach der Initialisierung legen Sie <PROJEKT_ROOT> als videos/<Projekt> fest und führen jeden nachfolgenden relativen Pfadbefehl mit diesem Verzeichnis als Arbeitsverzeichnis aus. In den folgenden Befehlen bedeutet . <PROJEKT_ROOT>; schreiben Sie niemals .media, capture oder Ausgabedateien in das Aufruferverzeichnis.

Schreiben Sie BRIEF.md sofort nach der Initialisierung (niemals davor – init verweigert ein nicht leeres Verzeichnis): die gesperrte Kurzbeschreibung der Intent-Ebene, Form gemäß ../hyperframes-core/references/brief-format.md. Lösen Sie <MEDIA_DIR> als das installierte /media-use Skill-Verzeichnis auf. Zeichnen Sie dann jede präferenzgestützte Antwort mit node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . auf (brief-format.md benennt die Teilmenge). Wenn die Intent-Ebene ein Rezept übernommen hat, führen Sie node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <Name> aus; es kopiert sein frame.md in das Projekt (Schritt 2 wird dann übersprungen) und gibt die Skelettentwürfe von Schritt 3 zurück. Ein Rezept füllt Antworten, nicht Genehmigungen; die Überprüfungstore laufen trotzdem.

Zeigen Sie den Anmeldestatus an, bevor Sie mit dem Setup fortfahren – führen Sie npx hyperframes auth status aus und geben Sie dessen Ausgabe wörtlich wieder. Es meldet, ob Sprache/BGM die HeyGen- oder lokale Engines verwendet und, wenn abgemeldet, wie man sich anmeldet. Wenden Sie einen Zweig an:

  • Kollaborativ: Warten Sie, bis sich der Benutzer anmeldet oder explizit offline / go wählt.
  • Autonom: Geben Sie den Status an und fahren Sie mit den verfügbaren lokalen Engines fort.

Verschweigen Sie nicht stillschweigend eine erforderliche Fähigkeit, wenn kein Offline-Anbieter existiert; zeigen Sie den Blocker auf. Falten Sie diese Entscheidung nicht in eine andere Frage oder schreiben Sie Schlüssel in ein pro-Repo .env. Authentifizierungsbesitz und Offline-Fallback: /media-use references/setup-providers.md § Anbieter.

Tor: hyperframes.json und BRIEF.md existieren; die präferenzgestützten Antworten wurden aufgezeichnet (Kurzbeschreibungsvertrag § 2); der Anmeldestatus wurde angezeigt (angemeldet, oder Fortsetzung offline).


Schritt 1: Kurzbeschreibung (keine Aufnahme)

Ziel: Den Text des Benutzers als Informationsquelle in das Projekt einbinden. Es gibt keine Website-Aufnahme und keine echten Assets – dies ist ein gesichtsloser Erklärer.

Speichern Sie die vollständige Benutzereingabe wörtlich, erstellen Sie dann das synthetische Aufnahmepaket von Hand:

  • capture/extracted/visible-text.txt – der vollständige Artikel / Notizen / Thema / Kurzbeschreibung, wörtlich. Dies ist die Quelle der Information, keine Story-Vorlage (Schritt 3 formt sie um).
  • capture/extracted/tokens.json – { "title": "", "description": "", "colors": [], "fonts": [] }. Füllen Sie title/description aus der Kurzbeschreibung. Lassen Sie colors/fonts leer, es sei denn, der Benutzer hat explizit Markenfarben oder -schriftarten angegeben – dann fügen Sie sie hinzu (die Designvoreinstellung liefert trotzdem eine vollständige Palette).

Wenn der Benutzer ein Skript eingefügt hat oder wünscht, dass sein Wortlaut beibehalten wird, speichern Sie es wörtlich als user_script.txt; VO_MODE (wörtlich oder umstrukturiert) stammt aus BRIEF.md – die Intent-Ebene fragt danach, wenn ein Skript ankommt. Fragen Sie hier nur einmal, wenn die Kurzbeschreibung es irgendwie nicht enthält, und speichern Sie die Antwort für Schritt 3.

Führen Sie nicht npx hyperframes capture aus (es gibt keine URL). Erstellen Sie keine asset-descriptions.md oder befüllen Sie capture/assets/ – gesichtslose Bilder werden in den Schritten 4-5 erfunden, nicht aufgenommen. Die eine Ausnahme: Wenn der Benutzer ein echtes Bild geliefert hat, legen Sie es unter public/<Basisname> ab und notieren Sie es für Schritt 3.

Tor: capture/extracted/visible-text.txt und capture/extracted/tokens.json existieren; Sie können das Thema und die Zielgruppe des Erklärers in einem klaren Satz angeben.


Schritt 2: Designsystem

Ziel: Eine ausgelieferte Bildvoreinstellung auswählen; ein Skript wandelt sie in das frame.md + Untertitel-Skin dieses Videos um.

Wenn BRIEF.md einen style_preset benennt – der Benutzer hat ihn in der Intent-Ebene anhand der Vorschauen ausgewählt – verwenden Sie ihn; das Urteil liegt nur bei Ihnen, wenn die Kurzbeschreibung schweigt. Dann treffen Sie die eine Entscheidung – welche Voreinstellung: Lesen Sie ../hyperframes-creative/references/design-spec.md und durchsuchen Sie ../hyperframes-creative/frame-presets/; wählen Sie die Voreinstellung, deren Look am besten zum Thema, Ton und Publikum passt. Führen Sie dann aus:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <Name> --hyperframes .

Das Skript erledigt den Rest deterministisch: Kopiert das FRAME.md der Voreinstellung → frame.md und remixt es auf alle Marken-Tokens in capture/extracted/tokens.json (Markenfarben auf die Farbtasten der Voreinstellung nach Rolle abgebildet; die Anzeige- und Textschriftarten der Voreinstellung durch die der Marke ersetzt), kopiert das Untertitel-Skin der Voreinstellung nach .hyperframes/caption-skin.html und validiert sich selbst (beendet mit 1 bei einer defekten Zuordnung). Fahren Sie fort, sobald es mit 0 beendet ist – keine manuelle Bearbeitung der Spezifikation.

Ein gesichtsloser Erklärer hat normalerweise keine Markenfarben/-schriftarten (tokens.json colors/fonts leer) → das Skript behält die eigene Palette der Voreinstellung, ein vollständiges auslieferbares Design. Nur wenn der Benutzer Markenfarben/-schriftarten genannt hat, fügen Sie sie zu tokens.json hinzu, bevor Sie es ausführen, und passen Sie frame.md danach nur von Hand an, wenn eine Zuordnung es wirklich benötigt.

Tor: build-frame.mjs wurde mit 0 beendet – frame.md existiert von einer benannten Voreinstellung, und (wenn die Voreinstellung eine ausliefert) .hyperframes/caption-skin.html existiert als Quelle des Untertitel-Skins; die gewählte Voreinstellung wurde als Präferenz aufgezeichnet (--key style_preset --workflow <dieser workflow>, Kurzbeschreibungsvertrag § 2).


Schritt 3: Storyboard und Skript

Ziel: Den Text in einen genehmigten, bildweisen Lehrplan verwandeln.

Lesen Sie ../hyperframes-creative/references/story-spine.md (Hook-Sprache, Wert-vor-Beweis, Storyboard-als-Vorschlag), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes-core/references/storyboard-format.md und ../hyperframes-core/references/script-format.md. Verwenden Sie sie, um STORYBOARD.md und, wenn eine Erzählung benötigt wird, SCRIPT.md zu schreiben. Setzen Sie die duration: im Frontmatter aus der length der Kurzbeschreibung – eine grobe Erwartung; der Zusammenbau berichtet, wo der Schnitt im Vergleich dazu landet.

Verwenden Sie story-design.md für die Erklärer-Struktur (Konzept / Anleitung / Listicle / Geschichte), Hook-Strategie, Klarheitstechniken, emotionale Beats, die Typ-Enum-Zuordnung und VO_MODE. Die Abfolge des Videos stammt aus narrativem Design, nicht aus der Absatzreihenfolge des Eingabetextes – neu ordnen, zusammenführen, weglassen, komprimieren. Als weiche Leitlinie konsultieren Sie die Rollen-zu-Blaupausen-Menü in ../hyperframes-animation/blueprints-index.md: Schreiben Sie für jeden Beat das Voiceover in der Form, die seine Kandidaten-Blaupause impliziert, und taggen Sie diese Kandidaten-blueprint: ID, wenn eine passt. Die Lehrwahrheit entscheidet dennoch, welche Beats existieren – erzwingen Sie niemals einen Beat, um in eine Blaupause zu passen, und erfinden Sie niemals einen Beat nur, weil eine bewährte Form verfügbar ist. Gesichtslose Bilder werden nachgelagert erfunden, daher tragen Bilder kein Asset-Inventar: Lassen Sie asset_candidates leer, es sei denn, der Benutzer hat ein echtes public/<Basisname>-Bild geliefert. Verwenden Sie die genauen erforderlichen Felder aus den Storyboard- und Skript-Referenzen.

Führen Sie nach dem Entwurf den Plan-Durchlauf der Überprüfungsschleife aus – ../hyperframes-core/references/review-loop.md § 1: Öffnen Sie das Board (fragen Sie nicht, ob), präsentieren Sie den Plan als Vorschlag und stellen Sie die beiden Fragen – genehmigen oder ändern, und zuerst Skizzen (empfohlen) oder überspringen. Feedback durchläuft Chat oder die Kommentardatei des Boards bis zur Genehmigung. Dies ist ein Kontrollpunkt-Tor (Kurzbeschreibungsvertrag § 1): Im autonomen Modus gibt es kein Board und nichts zu fragen – posten Sie dieselbe Zusammenfassung als Vorankündigung und fahren Sie fort; Skizzen fallen in den Bau, und die eine Vorschaufrage kommt bei Schritt 6.

Tor: STORYBOARD.md existiert, jedes Bild hat die erforderlichen narrativen Felder, SCRIPT.md existiert, wenn eine Erzählung benötigt wird, und der Benutzer hat den bildweisen Plan genehmigt (autonom: die Zusammenfassung wurde als Vorankündigung gepostet).


Schritt 3.1: Audio

Ziel: Erzählung, Wortzeiten, Musik und Audio-Metadaten aus dem genehmigten Skript generieren.

Starten Sie Audio nach der Genehmigung von Schritt 3. Führen Sie es im Hintergrund aus, fahren Sie dann mit Schritt 4 fort. (Der Anmeldestatus wurde bereits in Schritt 0 angezeigt; die Engine fällt automatisch zurück.)

Wählen Sie die Erzählstimme aus der Benutzeranfrage aus, bevor Sie sie aufrufen. Wenn die Anfrage eine Stimme, ein Geschlecht oder einen Ton genannt hat, wählen Sie eine passende Stimmen-ID und übergeben Sie sie mit --voice <ID>. Die Pipeline-Voreinstellung ist ansonsten Marcia (weiblich) auf HeyGen / am_michael auf Kokoro – daher wird eine Anfrage wie "eine männliche Stimme" stillschweigend ignoriert, es sei denn, Sie übergeben das Flag. Stimmen-IDs sind anbieterabhängig; lösen Sie sie gegen den Anbieter auf, den der Anmeldestatus von Schritt 0 ausgewählt hat: HeyGen (angemeldet) über node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (oder GET /v3/voices?engine=starfish); Kokoro (offline) über die Stimm-Tabelle in <MEDIA_DIR>/audio/references/tts.md (Präfixe am_/bm_ männlich, af_/bf_ weiblich). Wenn der Benutzer keine Präferenz geäußert hat, fallen Sie auf die gespeicherte Stimme zurück (Kurzbeschreibungsvertrag § 2), bevor Sie die Pipeline-Voreinstellung verwenden, und sagen Sie, welche Sie verwendet haben; lassen Sie --voice nur weg, wenn keiner eine nennt. Wenn der Benutzer in diesem Lauf explizit eine Stimme ausgewählt hat, zeichnen Sie sie auf (prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <Stimmen-ID> &

Das Audio-Skript kümmert sich um Erzählung, Wortzeiten, BGM-Suche aus der HeyGen-Musikbibliothek und Zeitmetadaten. Die BGM-Stimmung stammt aus dem music:-Feld des Storyboards. Dies verwendet die HeyGen-Audio-API für die Suche, nicht für die Generierung, und dieselbe ~/.heygen-Anmeldeinformation wie TTS. Für Anbieterdetails lesen Sie ../media-use/audio/references/tts.md.

Wenn es keine Erzählung und kein SCRIPT.md gibt, überspringen Sie die Sprachgenerierung. BGM kann trotzdem laufen, wenn das Storyboard eine Musikstimmung hat.

Der kanonische, vollständig stille Marker (gemeinsam für die Workflows, die dieses Audiomodell wiederverwenden): music: none im oberen YAML-Block von STORYBOARD.md und kein SCRIPT.md. Diese Kombination markiert das Projekt als still – keine Erzählung, kein BGM, kein SFX. audio.mjs erkennt es und generiert nichts (es entfernt jegliches veraltetes audio_meta.json; ein abwesendes audio_meta.json wird vom Zusammenbau als still behandelt), daher ist dieser Schritt ein sauberer Übersprung. music: none mit Erzählung behält TTS und schaltet nur BGM aus. Verwenden Sie genau diese Schreibweise – improvisieren Sie keine anderen Marker.

Tor: Audio-Job wurde gestartet, oder das Projekt ist als still markiert (music: none + kein SCRIPT.md).


Schritt 4: Visuelles Framedesign

Ziel: Die visuelle Richtung, das Layout-Intention und die Bewegungsauswahl zu jedem Storyboard-Bild hinzufügen.

Skizzieren Sie das Board zuerst (nur kollaborativ). Sobald der Plan genehmigt ist, führen Sie den Skizzendurchlauf aus – ../hyperframes-core/references/review-loop.md § 2 (warten Sie nicht auf Schritt 3.1; Skizzen verwenden keine Zeiten): Erstellen Sie eine Drahtgestellskizze für jedes Bild, ...

...

Individual skills in this repo

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

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Drama2557/4RealDigital-Video-Studio

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

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`.

Drama2557/4RealDigital-Video-Studio

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).

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

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]

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

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 "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

Verwandte Skills