Communitygithub.com

Drama2557/4RealDigital-Video-Studio

Kreative Regie für HyperFrames-Videos ohne Animationen. Geeignet für Design-Spezifikationen (frame.md/design.md), Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktive Grafiken, Kompositionsmuster und Marken-/Stilentscheidungen. Für atomare Bewegungsmuster und Szenenentwürfe verwenden Sie `hyperframes-animation`.

Was ist 4RealDigital-Video-Studio?

Diese Skill bietet eine umfassende kreative Anleitung für die Erstellung von HyperFrames-Videos, mit einem Fokus auf nicht-animierte Aspekte wie Marke, Stil, Erzählung und Komposition. Sie ist als Ergänzung zur technischen Grundlage von `hyperframes-core` konzipiert und ermöglicht es Entwicklern, Designentscheidungen konsistent und wirkungsvoll zu treffen. Die Skill unterstützt Arbeitsabläufe wie das Lesen von Design-Spezifikationen, die Auswahl von Frame-Voreinstellungen und die Nutzung von Referenzmaterialien für Paletten, Typografie und Audioreaktivität. Sie enthält Skripte für Kontrastberichte, Audioextraktion und Toolunterstützung. Die Skill ist plattformunabhängig und arbeitet hauptsächlich als Markdown-basiertes System, das in verschiedenen Coding-Assistenten verwendet werden kann. Sie betont die Bedeutung von zwei zentralen Referenzdateien – `house-style.md` und `video-composition.md` – um generische Webseiten-layouts zu vermeiden und stattdessen echte Video-Kompositionen zu schaffen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/hyperframes-creative
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

HyperFrames Creative

Marke, Tempo, Stil, Erzählung und Kompositionsrichtung. Verwenden Sie dies, nachdem der technische Vertrag von hyperframes-core abgeschlossen ist.

Für Bewegungsmuster, Szenenentwürfe, Übergänge und CSS-Marker-Effekte verwenden Sie hyperframes-animation – diese Skill ist bewusst nicht-animiert.

Lesen Sie diese beiden ZUERST für jede nicht-triviale Komposition – sie überschreiben Web-Instinkte:

  • references/house-style.md – "interpretiere den Prompt, generiere echten Inhalt", die Standard-Faule-Liste und das Rezept für Hintergrund-/Vordergrundschichten. Dies macht aus einer wörtlichen Neugestaltung ein Konzept.
  • references/video-composition.md – Video-Medium-Skalierung, Tiefe und Vordergrunddetails. Es erklärt, wie man leere Webseiten-Layouts vermeidet, ohne eine universelle Elementanzahl aufzuzwingen.

Diese zu überspringen ist der häufigste Grund für generische, webseitenartige Ausgaben. Sie sind keine optionalen Zeilen in der untenstehenden Routing-Tabelle – für alles, was über eine einzeilige Bearbeitung hinausgeht, öffnen Sie beide, bevor Sie Farben wählen oder HTML schreiben.

Arbeitsablauf

  1. Wenn ein Projekt eine Design-Spezifikation hat, lesen Sie sie zuerst und behandeln Sie ihre Frontmatter-Tokens als Markenwahrheit (Farben, Schriftarten, Abstände, Ton, Einschränkungen). Welche Datei zu lesen ist (Reihenfolge frame.md → design.md → DESIGN.md) und wie sie zu parsen ist (Frontmatter = normativ, Prosa = Kontext) ist einmal in references/design-spec.md definiert – lösen Sie auf und laden Sie gemäß diesem Dokument.
  2. Wenn keine Design-Spezifikation existiert und der Benutzer nach einer visuellen Richtung fragt, wählen Sie einen Pfad:
    • Fertige Frame-Voreinstellung (optional) → frame-presets/ (übernehmen Sie eine FRAME.md als frame.md; siehe references/design-spec.md)
    • Benannter Stil oder Stimmung → references/visual-styles.md
    • Schnelle Standardeinstellungen → references/house-style.md
    • Interaktive Auswahl → references/design-picker.md
  3. Für Arbeiten mit mehreren Szenen planen Sie Beats und Rhythmus, bevor Sie HTML schreiben → references/beat-direction.md. Für Szenenübergänge springen Sie zu hyperframes-animation/transitions/.
  4. Für bewegungsintensive Arbeiten lesen Sie references/motion-principles.md (übergeordnete Leitplanken), dann gehen Sie zu hyperframes-animation für atomare Regeln.

Routing

ThemaLesen
Übernehmen Sie eine fertige Frame-Voreinstellung als frame.md (optional)frame-presets/ · references/design-spec.md
Standardpaletten, Bewegung, Typografie, faule Standardeinstellungen, um zu hinterfragenreferences/house-style.md
Benannte Stilvoreinstellungen, Stimmungs-zu-Stil-Routingreferences/visual-styles.md
Palettenspezifische Farbtokenspalettes/*.md
Kompositionsmuster – PiP, Text hinter Subjekt, Titelcard, Slideshowreferences/composition-patterns.md
Statistiken / Infografik-Präsentationreferences/data-in-motion.md
Strukturierte Erweiterung für offene Promptsreferences/prompt-expansion.md
Video-Medium-Dichte, Skalierung, Farbe, Rahmenkompositionreferences/video-composition.md
Pro-Beat-Richtung, Rhythmusplanung, Übergangszeitplanungreferences/beat-direction.md
Überprüfung der Spezifikation nach der Erstellung (Farben, Typ, Ecken, Abstand, Tiefe)references/design-adherence.md
Übergeordnete Bewegungsleitplanken und GSAP-Qualitätsregelnreferences/motion-principles.md
Schriftauswahl, Paarungen, gerenderte Video-Typ-Leitplankenreferences/typography.md
Story-Doktrin – Haken-Sprache, Wert-vor-Beweis, Storyboard-als-Vorschlagreferences/story-spine.md
Skript-Tempo, Ton, Anfänge, Zahlenaussprachereferences/narration.md
Vorberechnete Audio-Bänder, auf Bewegung abgebildetreferences/audio-reactive.md

Skripte

  • scripts/contrast-report.mjs – Kontrastwarnungen aus gerenderten Frames überprüfen.
  • scripts/extract-audio-data.py – Audio-Bänder für audio-reaktive Kompositionen vorab extrahieren.
  • scripts/package-loader.mjs – Unterstützungsskript für gebündelte kreative Werkzeuge.

contrast-report.mjs löst Helper-Pakete zuerst aus dem aktuellen Projekt auf, kann dann die gebündelte HyperFrames-Paketversion bootstrappen. Setzen Sie HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn Sie die Skill außerhalb der gebündelten CLI/Skill-Installation ausführen und diese Bootstrap-Version explizit festlegen müssen.

Führen Sie vom Repository-Stamm mit expliziten Pfaden aus, zum Beispiel:

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animationsanalyse (animation-map.mjs) befindet sich in hyperframes-animation/scripts/.

Grenzen

  • Überschreiben Sie keine technischen Regeln von hyperframes-core.
  • Verlangen Sie kein Designsystem für eine minimale technische Komposition.
  • Fügen Sie keine zusätzlichen Szenen, Erzählungen, Musik, Untertitel oder Übergänge hinzu, es sei denn, die Anfrage verlangt danach oder Sie schlagen die Erweiterung zuerst vor.
  • Halten Sie Rezeptreferenzen aufgabenspezifisch; lesen Sie nicht jede Referenz für einfache Bearbeitungen.

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

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.

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

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

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community