Skip to content
cccskills
FreePublished on GitHub

hyperframes-studio

Plan and organize videos in HyperFrames Studio with readable scene, caption, and audio tracks. The skill guides collaboration, storyboards, and safe placement of text and key content, while distinguishing discussion from requests to edit.

OriginalShow the original description

Use when working with a person on a HyperFrames project in Studio: first, whether their message asks for a change at all (questions, loose ideas and "don't change anything" get an answer and a plan, not an edit); for a new film, the plan, storyboard and build order that the HyperFrames launch films follow; and how the timeline should be laid out so it reads well (one caption track, one element kind per track, every scene a sub-composition) and where captions and key content may sit (safe zones). Don't use for how to perform an individual edit (split, trim, retime, volume, copy, swap): that is `creator-editing-recipes.md` in `/hyperframes-core`.

See how to install

Good for

  • Planning a new product launch video
  • Organizing scene, caption, and audio tracks
  • Checking safe placement of captions and key content
  • Turning video feedback into specific edits

Files included (1)

  • SKILL.md11.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

HyperFrames Studio conventions

Studio draws one timeline row per top-level element. A project that follows the rules below opens as a short, readable timeline; one that does not opens as a wall of unlabeled rows the user cannot edit. These are conventions for what to build. For how to change a clip, follow /hyperframes-core references/creator-editing-recipes.md and never invent a different form of the same edit.

0. Talk before you build

Read the message before you open a file. Decide what it asks for:

The personYou
names a change, however politely ("make the title bigger", "can you cut the third scene?")Make it.
gives a felt note on the built film ("the intro feels jolty", "it doesn't go long enough")Find the cause, change the measurable thing, say what the note meant and what moved, and record it in STORYBOARD.md.
asks a question and names no change ("why does the title jump?")Answer it. Change nothing.
says don't change anything, hold, "just thinking", "let's talk"Change no file, not even a fix you noticed. Offer it in words.
brings an idea for this film with no concrete change ("I want the ending to feel bigger")Propose the change and add it to the plan (below). Change no composition file.
asks for a new filmPlan it (§ 5).
approves a plan ("build it", "go")Build what was approved.

A message that asks a question and names a change gets the answer and the change. Only when you cannot tell whether it asks for anything is it a conversation: a wrong answer costs one message; a wrong build costs a long run and a round of notes.

A conversation reply:

  • Answer first, in plain words, in a few sentences.
  • Ask only questions whose answer changes the film, each with a recommended answer and its trade-off ("30 seconds fits a feed; 60 leaves room for the demo").
  • When there is an idea to shape: for a new film, directions per /hyperframes references/pitch-round.md; for an idea about this film, two or three options for the part named. Recommend one.
  • End with the next step and the word that starts it ("Say build and I'll start").

Keep the plan in the project, not only in the chat: the next message may start a new session that cannot see this one. Add it to STORYBOARD.md the way /hyperframes-creative references/storyboard-recipe.md § 1 records notes on frames; never overwrite locked frames. If the person asked you to change nothing at all, write nothing: put the plan in the reply and offer to save it.

1. Every scene is a sub-composition

The root composition holds only timed hosts, media and audio. Any scene with nested structure (a div containing children, a title with a subtitle, a chart) is its own file loaded with data-composition-src, wiring in /hyperframes-core references/sub-compositions.md.

Nested markup left inside the root does not become a row of its own. It hides inside one opaque row that cannot be trimmed or moved part by part.

Author as if a structure lint rejects any violation.

2. One caption track

  • All captions live on one track: a single sub-composition host (one data-track-index) marked data-track-kind="captions" that carries every caption group in order.
  • Never one row per caption group, and never captions mixed onto a track with another kind.
  • Word-timing rules are unchanged: see /embedded-captions and the caption_* lint rules.

3. One element kind per track

Group by kind so each row is one thing the user can select, mute or drag as a set.

Kinddata-track-kind
Base video / A-rollvideo (from the tag)
Scenes, overlays, graphicsgraphics
Captionscaptions
Audio (voiceover, music, sound effects)audio (from the tag)

Put data-track-kind on sub-composition hosts. Video and audio kinds come from the tag, so <video> and <audio> need no attribute. Give each kind its own data-track-index; the number is display only; it never changes what renders on top. Use CSS for layering.

4. Safe zones

Any ruler or safe-box overlay lives in the preview pane, never inside the composition, so do not add guide elements to the HTML. Both framings (wide and vertical) use the same two safe boxes, Premiere's defaults. The preview toggle draws them with a tick at the midpoint of every edge. Source: ACTION_SAFE_PERCENT and TITLE_SAFE_PERCENT in packages/studio/src/utils/previewSafeMargins.ts.

BoxShare of the frameInset on every edge
Action-safe90%5%
Title-safe80%10%
  • Safe margins: everything visible stays inside the action-safe box (90%), and captions and key content stay inside the title-safe box (80%).
  • Two-up and 50/50 layouts keep each half's content inside the title-safe box.

5. A new film: plan, storyboard, build

The hyperframes-launches films were made in this order. Each step has an owner; follow it and do not restate it here.

StepOwner
1. Brief/hyperframes references/intent-interview.md. Inside an existing project, only a follow-on to the same film stays: a new version or a cutdown, same workflow and aspect. Ask its must-have questions, skip hyperframes init, never overwrite BRIEF.md or STORYBOARD.md, add a new dated section to each, and say so in the reply. A film with a different workflow or aspect starts a new project, and the reply says so.
2. Directions/hyperframes references/pitch-round.md
3. Storyboard/hyperframes-creative references/storyboard-recipe.md
4. BuildThe workflow the brief routes to (/hyperframes § 2) and its own references
5. Notes/hyperframes references/review-loop.md

What the launch films add, for a product launch. Where the workflow's chosen arc says otherwise, the arc wins.

  • Real footage for the launched product. Ask for a screen recording in the brief unless the workflow captures it itself (a site from its URL), and hold its slot with a labelled placeholder until it arrives. Never approximate the launched product's UI. A third-party tool shown as context (a chat app, an editor) is rebuilt faithfully from a capture.
  • One world. The same window or canvas continues across beats. Scrub every cut: whatever persists must not jump.
  • Cursors and scrolled content. A cursor, or content the window itself scrolls out, leaves through the window or frame edge, not by fading mid-frame. Element and text swaps follow the workflow's cut-catalog.md where it has one.
  • Close on the command or the address, with the logo landing in footage that is still moving.
  • State the runtime at every version. Running past the target is the person's call, not yours.

Checking your work

Run hyperframes check (it runs lint) and fix every finding. Then open the project in Studio and check that the timeline shows a base row, one row per scene host, one caption row and the audio rows.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.

  • Create a nature-themed video opening
  • Reveal two headlines in sequence
  • Adjust leaf movement to suit a title
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

captions-overlay

FreeSummary

Plan subtitles as layers over a video, deciding which spoken phrases to omit, show normally, or emphasize behind the subject. The guidance preserves full-frame composition and limits large embedded words to occasional key moments.

  • Planning subtitles for a talking-head video
  • Choosing words to emphasize behind the subject
  • Centering a scene that carries subtitles
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

changelog-video

FreeSummary

Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.

  • Turn weekly release notes into a short video
  • Demonstrate product updates with animated interface examples
  • Prepare a branded update video with narration and captions
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

code-slice-hero

FreeSummary

Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.

  • Reveal a second headline through flipping tiles
  • Create an animated opening for a promotional video
  • Adjust tile depth and shadows to suit a design
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

cuboid-carousel

FreeSummary

Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.

  • Presenting multiple cards in a 3D carousel
  • Pausing on a featured card
  • Replacing card content with JSON
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

cut-the-curve

FreeSummary

Design scene transitions and animated text using matched movement direction and speed across cuts. The catalog provides concrete settings for zooms, blur, word-by-word transitions, staggered entrances, and repositioning groups of elements.

  • Connect scenes with matching motion
  • Transition between headlines word by word
  • Bring title elements in with staggered timing
heygen-com/hyperframes67.4KUpdated Oct 19, 2026

See all skills by heygen-com

Report a problem with this skill