New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HyperFrames Studio Conventions

by heygen-com in heygen-com/hyperframes

Sets conventions for HyperFrames Studio projects: when to edit or just answer, how to plan a film, how to lay out the timeline and where captions may sit.

Apache-2.0Auto-check passedMedia & Creative

Install HyperFrames Studio Conventions

skills CLI
$ npx skills add heygen-com/hyperframes --skill hyperframes-studio -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes hyperframes-studio --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hyperframes-studio .claude/skills/hyperframes-studio && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hyperframes-studio
GitHub stars
58k
Token cost
~3k tokens
SKILL.md length
1,112 words
Files
1
Skills in repo
32
Repo updated
First seen
Licence
Apache-2.0

At a glance

Sets conventions for HyperFrames Studio projects: when to edit or just answer, how to plan a film, how to lay out the timeline and where captions may sit.

  • Works in 6 steps: Talk before you build → Every scene is a sub-composition → One caption track → …
  • Planning and storyboarding a new HyperFrames film before building it
  • SKILL.md covers 0. Talk before you build, 1. Every scene is a…, 2. One caption track and 3. One element kind per track, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Studio draws one timeline row per top-level element, so a project that ignores the layout rules opens as a wall of unlabeled rows nobody can edit. These conventions prevent that: one caption track, one kind of element per track, and every scene built as a sub-composition. They also define safe zones for captions and key content.

Before touching a file, the agent decides what the message asks for. A named change is made. A felt note on a built film, such as an intro feeling jolty, sends it looking for the cause, changing something measurable and recording what the note meant. A plain question gets an answer with no edit, and a request to change nothing means no file changes at all, with fixes offered in words. For a new film it follows the plan, storyboard and build order of the HyperFrames launch films. How to perform an individual edit such as a split or trim lives in `creator-editing-recipes.md` in `/hyperframes-core`.

When your agent uses it

  • Planning and storyboarding a new HyperFrames film before building it
  • Laying out a Studio timeline so it stays short and editable
  • Deciding whether a message needs a change or only an answer
  • Placing captions and key content inside safe zones

Example prompts

  • “Plan a short product film in HyperFrames Studio and storyboard it before building.”
  • “The intro feels jolty. Find out why and fix it.”
  • “Why does the title jump at the start of scene two? Just explain, don't change anything.”
  • “Restructure the timeline so captions sit on one track and each scene is a sub-composition.”

Requirements

  • A HyperFrames project opened in Studio

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Talk before you build
  2. Every scene is a sub-composition
  3. One caption track
  4. One element kind per track
  5. Safe zones
  6. A new film: plan, storyboard, build

What it can do on your machine

Read from SKILL.md and the folder at commit f6b3821. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HyperFrames Studio Conventions loads about 3k tokens when it runs. Until then it costs about 168 tokens; SKILL.md has 1,112 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~168
When it runs · the whole SKILL.md, loaded when a task matches
~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from heygen-com/hyperframes at commit f6b3821, republished under its Apache-2.0 licence (© heygen-com). 1,112 words, ~3,018 tokens.

Download SKILL.mdSave it as .claude/skills/hyperframes-studio/SKILL.md (or your agent's skills folder).
name
hyperframes-studio
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`.

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 per /hyperframes-creative references/storyboard-recipe.md § 4.
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 § 4 records a round; 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.

Show full SKILL.md (436 more words)Show less

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.

© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/hyperframes-studio of heygen-com/hyperframes.

Open the folder on GitHubat commit f6b3821

Compare with similar skills

HyperFrames Studio Conventions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HyperFrames Studio Conventions compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HyperFrames Studio Conventions this skillheygen-com/hyperframes58k—~3kAutomated safety check: PassApache-2.0
Short Form Editnateherkai/hyperframes-student-kit1.2k—~5.3kAutomated safety check: PassCustom licence
HyperFrames Studio Timeline Conventionsedenfunf/reelmimic1.6k1 repos~916Automated safety check: PassMIT
Plotbeat Data VideosUnclecheng-li/AI_Animation1.4k—~2.6kAutomated safety check: PassMIT
Yuv Viral Videohoodini/ai-agents-skills282—~7.5kAutomated safety check: NotesNone
3D Camera Captions for HyperFramesheygen-com/hyperframes-community-skills175—~2.3kAutomated safety check: PassApache-2.0

Similar skills

  • Short Form Edit

    nateherkai/hyperframes-student-kit

    Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…

    1.2k GitHub stars~5.3k tokensUpdated 9 days ago
    Media & CreativeAuto-check passed

  • HyperFrames Studio Timeline Conventions

    edenfunf/reelmimic

    Conventions for laying out a HyperFrames project so it opens as a readable Studio timeline: one caption track, one element kind per track, scenes as sub-compositions, and safe zones.

    1.6k GitHub starsUsed in 1 repo~916 tokens
    Media & CreativeAuto-check passed

  • Plotbeat Data Videos

    Unclecheng-li/AI_Animation

    Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.

    1.4k GitHub stars~2.6k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Yuv Viral Video

    hoodini/ai-agents-skills

    Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…

    282 GitHub stars~7.5k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes

  • 3D Camera Captions for HyperFrames

    heygen-com/hyperframes-community-skills

    Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.

    175 GitHub stars~2.3k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

  • Short Form Video

    nateherkai/hyperframes-student-kit

    Maintain the existing May Shorts teaching compositions using their legacy face-mode, scene-overlay, and karaoke-caption patterns.

    1.2k GitHub stars~5k tokensUpdated 9 days ago
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes

All 32 skills in this repo

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    58k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed

  • HyperFrames Media Use

    heygen-com/hyperframes

    Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.

    58k GitHub starsUsed in 2 repos~2.1k tokens
    Auto-check passed

  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    58k GitHub starsUsed in 3 repos~8.6k tokens
    Auto-check passed

  • Weekly Changelog Video

    heygen-com/hyperframes

    Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.

    58k GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • Faceless Explainer Video

    heygen-com/hyperframes

    Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.

    58k GitHub starsUsed in 3 repos~7.5k tokens
    Auto-check: notes

  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    58k GitHub starsUsed in 3 repos~4.5k tokens
    Auto-check: notes

Works with

Categories

Questions about HyperFrames Studio Conventions

What does HyperFrames Studio Conventions do?

Sets conventions for HyperFrames Studio projects: when to edit or just answer, how to plan a film, how to lay out the timeline and where captions may sit. Studio draws one timeline row per top-level element, so a project that ignores the layout rules opens as a wall of unlabeled rows nobody can edit. These conventions prevent that: one caption track, one kind of element per track, and every scene built as a sub-composition.

When should I use HyperFrames Studio Conventions?

HyperFrames Studio Conventions fits situations like: planning and storyboarding a new HyperFrames film before building it; laying out a Studio timeline so it stays short and editable; deciding whether a message needs a change or only an answer; placing captions and key content inside safe zones.

How do I install HyperFrames Studio Conventions in Claude Code?

Run `npx skills add heygen-com/hyperframes --skill hyperframes-studio -a claude-code`. Or copy the skill folder (skills/hyperframes-studio in heygen-com/hyperframes) into .claude/skills/hyperframes-studio in your project. Claude Code loads it when a task matches its description.

How do I install HyperFrames Studio Conventions in Codex?

Run `npx skills add heygen-com/hyperframes --skill hyperframes-studio -a codex`. Or copy the skill folder (skills/hyperframes-studio in heygen-com/hyperframes) into .agents/skills/hyperframes-studio in your project. Codex loads it when a task matches its description.

Can I use HyperFrames Studio Conventions in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes --skill hyperframes-studio -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hyperframes-studio, .gemini/skills/hyperframes-studio, .github/skills/hyperframes-studio and .opencode/skills/hyperframes-studio in your project.

What does HyperFrames Studio Conventions need to run?

SKILL.md names no scripts, command-line tools or credentials: HyperFrames Studio Conventions is instructions for the agent only. Our summary lists: A HyperFrames project opened in Studio.

Does HyperFrames Studio Conventions access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is HyperFrames Studio Conventions safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HyperFrames Studio Conventions use?

HyperFrames Studio Conventions is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HyperFrames Studio Conventions use?

About 3k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HyperFrames Studio Conventions?

Skills that share tags, products or a category with HyperFrames Studio Conventions: Short Form Edit (nateherkai/hyperframes-student-kit, 1.2k stars), HyperFrames Studio Timeline Conventions (edenfunf/reelmimic, 1.6k stars), Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.4k stars) and Yuv Viral Video (hoodini/ai-agents-skills, 282 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HyperFrames Studio Conventions?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 58,020 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 7, 2026.

Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.