Communitygithub.com

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.

What is 4RealDigital-Video-Studio?

4RealDigital-Video-Studio is a Codex agent skill that 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.

Works with~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/general-video

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

General video

Before relying on this workflow, run:

npx hyperframes skills update general-video

A successful no-op means the skill is current. Surface an update failure instead of continuing from memory.

1. Apply cross-cutting source adapters

  • Media: For any audio, image, icon, logo, voice, grade, LUT, treatment/effect, caption, or media-operation need, load /media-use and follow ../media-use/references/resolve.md (resolve, adopt, reuse) and ../media-use/references/setup-providers.md (providers, auth). Vague footage feedback and named styles use ../media-use/references/media-treatments.md before editing; do not improvise supported media effects with CSS/SVG/opacity. Before the first authenticated provider action, run npx hyperframes auth status and relay its output verbatim. If signed out, apply the gate in ../hyperframes-core/references/brief-contract.md: collaborative waits for sign-in or an explicit offline choice; autonomous states the status and continues through an available offline provider. Surface a blocker when no offline provider can satisfy a required capability. Local adoption alone does not require an auth gate.
  • Figma: If any input is a figma.com URL, run /figma first. Build from its exported assets, tokens, components, or storyboard frames. Do not use raw Figma connector calls because they skip SVG sanitization, media provenance, and brand-token binding.

These adapters do not change the workflow selected by /hyperframes.

2. Start from project state

Apply the first matching row; do not evaluate lower state rows:

StateAction
Specific editMake the edit, preserve existing project decisions, then rerun affected checks. Do not reopen discovery.
BRIEF.md existsRead it. If workflow names another workflow and flow is not companion, hand off. Ask no brief questions.
No brief, but hyperframes.json or STORYBOARD.md existsResume from files and recorded preferences. Backfill BRIEF.md only from known facts.
Fresh creationRun /hyperframes and its intent layer. Return here only for workflow: general-video or flow: companion.

For a new project, choose a kebab-case directory name from the brief and scaffold before writing the brief:

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

Then write BRIEF.md at the project root using ../hyperframes-core/references/brief-format.md. In an existing project, the root is the directory containing hyperframes.json. Record only the confirmed preference-backed fields named by the brief format, using node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>; never record inferred defaults. Here <MEDIA_DIR> is the installed /media-use skill directory and <PROJECT_ROOT> is the directory containing hyperframes.json. If the intent layer adopted a recipe, apply it now with node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> and do not ask again.

3. Interpret the run shape

Use only the canonical terms from ../hyperframes-core/references/brief-contract.md:

FieldMeaningEffect
flowWho drivesautomation: choose and execute the route. companion: co-create in conversation.
storyboardWhether the board is a review surfaceyes: run plan and sketch review. no: build without the board.
derived modeHow checkpoint gates behaveFollow the brief contract. Never ask the user to name a mode.

Do not invent synonyms for these states. An ongoing “just build it” signal is handled by the intent layer and arrives as flow: automation, storyboard: no.

  • For flow: automation, choose the route and state it in one line in the first progress update.
  • For a specific edit, make the edit without inventing a new route.

Companion flow

When flow: companion:

  • Read BRIEF.md and reconcile accepted ## Assets and ## Customizations with project artifacts. Complete accepted work that is still pending; leave completed work alone; do not offer an accepted capability again as if it were new.
  • Arrive as the director, not the contractor. A user who chose companion chose involvement and quality; the honest response is the best version you can design, not the smallest one you can defend. The first plan is the ceiling treatment: the story arc (borrow the nearest genre lens — menu § Genre lenses), the design spec, each scene's motion treatment cited by name (§ 5's plan discipline), the transitions, the audio identity — music and sound marks, or deliberate silence — the user's material placed, and a designed open and close. Say what each layer adds in one line; flag the expensive ones (render time, sign-in, billing) as you name them. The user trims a treatment down; they should never have to assemble one approval by approval.
  • The ceiling belongs to the concept, not the toolbox. Every layer must serve the brief's message — a treatment that would dress any video the same way is decoration. Craft rises to the ceiling; content never grows past what was asked (§ 6).
  • Between checkpoints, ../hyperframes/references/capability-menu.md works two ways. As the trigger list: offer a relevant capability when the user mentions its input or the build reaches its need. As each pass's upgrade channel: a plan, sketch, or build checkpoint may carry one or two traced offers pointed at material the user is looking at ("scene 3's stat wants the count-up treatment"). Read it before offering; never dump the full catalog.
  • After the user accepts a capability, produce its artifact and record the decision in the matching BRIEF.md body section immediately. Rewrite a frontmatter field and record the confirmed preference only when the user explicitly changes it.
  • Keep the same storyboard, validation, final-preview, and render-approval gates. Companion changes who steers, not what quality requires.

4. Load required knowledge before each stage

These reads are mandatory when their condition matches:

ConditionRead before acting
Any composition HTML or scene layout/hyperframes-core; use references/determinism-rules.md for its layout contract
Any non-trivial creation or visual treatment/hyperframes-creative → references/house-style.md and references/video-composition.md
Any motion, animation, or scene transition/hyperframes-animation; follow its routing to the matching rules, adapters, blueprints, or transition references
storyboard: yes../hyperframes-core/references/storyboard-format.md and ../hyperframes-core/references/review-loop.md
Any media asset or operation, including narration, BGM, SFX, captions, grading, or transforms/media-use; for framework playback and placement also read /hyperframes-core → references/variables-and-media.md
Multi-scene assembly../hyperframes-core/references/production-loop.md
flow: companion, before the first plan/hyperframes-creative → references/story-spine.md and references/house-style.md; the nearest genre lens and the full ../hyperframes/references/capability-menu.md — the ceiling treatment is designed from these, not recalled
A companion capability offer, capture, beat grid, generative video, map, publishing, or cross-workflow capability../hyperframes/references/capability-menu.md
A design spec exists, before final approval/hyperframes-creative → references/design-adherence.md

Do not replace these reads with recollection. Progressive disclosure saves context only when the matching reference is actually loaded.

5. Execute the composition

Use this dependency order. Skip a stage only when its input is absent.

  1. Plan. State the viewer arc, structure, rhythm, and duration driver. Use one file for a short single scene; use sub-compositions for three or more hard scene cuts or any reused scene. Read /hyperframes-creative → references/story-spine.md for narrated arcs, references/beat-direction.md for rhythm, and /hyperframes-core → references/composition-patterns.md for structure. For an open-ended multi-scene brief, expand the prompt through /hyperframes-creative → references/prompt-expansion.md. A multi-scene plan cites each scene's shape: a blueprint id from /hyperframes-animation → blueprints-index.md when one fits, or the named rules it composes from rules-index.md when none does — motion names come from those indexes, never invented. Story truth decides which scenes exist; the citation dresses them. A multi-scene plan is also recorded as the dispatch artifact: one ## Frame N block per scene in STORYBOARD.md — status: outline, a declared src:, the blueprint/rules citation, and the beat text — even when storyboard: no. The block is the dispatch unit; the board is only the review surface.

  2. Review the plan when requested. For storyboard: yes, run the shared review loop over those blocks. For storyboard: no, continue without opening the board. When a plan pause happens anyway, fold the sub-agent delegation grant (needed by codex for step 4's dispatch) into that pause rather than stopping again later.

  3. Resolve dependencies. Install registry blocks before parallel work. Stage user assets, adopt existing media, and resolve only what the brief requires. Start audio early when its timings drive duration.

  4. Build scenes. For a short single-scene piece, implement the scene at its most visible moment before adding motion (the confirmed wireframe, when present, is that end state and must not be redrawn), then animate from its cited blueprint or rules — read the full recipe body (/hyperframes-animation → blueprints/<id>.md, rules/<id>.md) before writing motion.

    Dispatch pays for itself only at scale. Authoring packets and warming fresh worker contexts costs real minutes and tokens: a film of up to ~6 short scenes builds FASTER inline, in this context, one scene after another (measured: 5 short scenes ≈ 9 min inline vs ≈ 21 min packetized). Fan out only when the plan exceeds that — more scenes, or individually heavy ones — and then give each worker 2–3 scenes, not one, and spawn all workers in a single wave (a second wave nearly doubles the window). When dispatching:

    node <SKILL_DIR>/scripts/frame-packets.mjs --project "$PROJECT_DIR" --storyboard "$PROJECT_DIR/STORYBOARD.md"

    The builder writes one bounded packet per scene under .hyperframes/frame-packets/ (the scene's exact storyboard block + the blueprint body + every cited rule recipe, inlined) and _role.md (../hyperframes-core/references/frame-worker-core.md + this skill's sub-agents/frame-worker.md, concatenated verbatim — the complete worker role). Dispatch the workers — 2–3 scene packets each, all in one wave (../hyperframes-core/references/subagent-dispatch.md); each worker's prompt carries _role.md and its packets — paste them in full, or hand the file paths for the worker to read first (equivalent either way) — plus a dispatch context with PROJECT_DIR, its frame_ids, and canvas size. WAIT on every scene's compositions/<frame_id>.html + compositions/<frame_id>.motion.json. Workers read only their packets and the design truth file; they never open STORYBOARD.md or the skill documents. With no delegation channel, fall back serially: process one packet at a time in this context, still working from the packet alone.

  5. Merge motion sidecars. Collect the workers' compositions/<frame_id>.motion.json files and carry their durations and exit/entry vectors into assembly; where the doctrine chain (/motion-doctrine) is installed, translate them into the project ledger before stamping seams.

  6. Assemble. Mount scenes, media, transitions, captions, and audio using the production loop. Real voice duration overrides estimates.

  7. Verify. Use npx hyperframes lint for fast feedback after the first HTML pass and structural changes. For the final gate, run npx hyperframes check; it reruns lint internally, so do not run a redundant standalone lint immediately before it. For sub-compositions, inspect midpoint snapshots. For multi-scene work, review the animation map.

  8. Final approval. Open the final Studio preview only after checks pass. Ask whether to render or revise. Render only after approval.

6. Gates that always apply

Keep scope exact

Build what the user asked for. A title card is not a title card plus three scenes, music, and captions. Offer additions before adding them.

Establish design before HTML

Resolve the design source in this order: frame.md → design.md → DESIGN.md. Treat the first file found as brand truth.

When no design spec exists, complete all four items before writing composition HTML:

  1. Ground the visual identity in house-style.md and video-composition.md.
  2. Write one sentence naming the concept angle for every non-trivial creation.
  3. Choose an embeddable font pairing from /hyperframes-creative → references/typography.md; do not assume an unbundled display font exists in cloud rendering.
  4. Define the focal element, edge anchors, supporting detail, and background treatment.

Match density to the requested format and message. Density examples are guidance for produced frames, not permission to invent claims, scenes, or a fixed number of elements.

For a named style or mood, read /hyperframes-creative → references/visual-styles.md. When the user needs to choose visually and no shipped preset fits, read /hyperframes-creative → references/design-picker.md and run the interactive design selection there.

Preserve the composition contract

Timed elements use class="clip"; the root and relevant ancestors are sized; each composition registers one paused, seek-safe timeline on window.__timelines; rendering is deterministic. Do not use render-time network fetches, clocks, or unseeded randomness.

Borrow workflows safely

When the piece resembles a shipped workflow, borrow its genre references as examples. First run npx hyperframes skills update <workflow-name>. Borrow its story shape and taste, not its private scripts, pipeline state, or directory contract. The generic build remains owned by this skill.

7. Done

A run is complete only when:

  • requested scope is implemented;
  • for flow: companion, the treatment is delivered, not just the scope: every scene's cited blueprint or rules realized, the audio identity present (or the silence chosen and said), the open and close designed rather than defaulted;
  • npx hyperframes check passes, including its built-in lint stage;
  • design adherence is reviewed against /hyperframes-creative → references/design-adherence.md when a design spec exists;
  • contrast findings are resolved;
  • sub-composition snapshots are inspected when applicable;
  • an autonomous handoff includes an inspected contact or snapshot sheet; multi-scene sheets use scene midpoints;
  • the handoff names the final preview or rendered artifact as applicable and reports the actual duration for a time-based deliverable;
  • hyperframes-animation/scripts/animation-map.mjs is reviewed for multi-scene work;
  • the user approves the final Studio preview before render;
  • the rendered file is verified when a render was requested.

After final approval, offer once to freeze the run as a recipe, following ../hyperframes-core/references/review-loop.md § 4.

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

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

Related Skills