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.
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.
Install HyperFrames Studio Timeline Conventions
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install edenfunf/reelmimic hyperframes-studio --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/hyperframes-studio .claude/skills/hyperframes-studio && rm -rf skills-srcUse ~/.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/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .claude/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studioType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install edenfunf/reelmimic hyperframes-studio --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/hyperframes-studio .agents/skills/hyperframes-studio && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .agents/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install edenfunf/reelmimic hyperframes-studio --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/hyperframes-studio .cursor/skills/hyperframes-studio && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .cursor/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/edenfunf/reelmimic.git --path .claude/skills/hyperframes-studio--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install edenfunf/reelmimic hyperframes-studio --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/hyperframes-studio .gemini/skills/hyperframes-studio && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .gemini/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install edenfunf/reelmimic hyperframes-studioInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/hyperframes-studio .github/skills/hyperframes-studio && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .github/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add edenfunf/reelmimic --skill hyperframes-studio -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install edenfunf/reelmimic hyperframes-studio --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/hyperframes-studio .opencode/skills/hyperframes-studio && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes-studio" agent skill from https://github.com/edenfunf/reelmimic/tree/main/.claude/skills/hyperframes-studio into .opencode/skills/hyperframes-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes-studio", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
hyperframes-studio- GitHub stars
- 1.6k
- Used in
- 1 other repo
- Token cost
- ~916 tokens
- SKILL.md length
- 432 words
- Files
- 1
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- MIT
At a glance
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.
- Works in 4 steps: Every scene is a sub-composition → One caption track → One element kind per track → …
- Building a HyperFrames project that people will open and edit in Studio
- SKILL.md covers 1. Every scene is a…, 2. One caption track, 3. One element kind per track and 4. Safe zones, plus 1 more section
- 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 this skill sets rules for what to build. Every scene with nested structure, such as a title with a subtitle or a chart, becomes its own sub-composition file loaded with data-composition-src, and the root composition holds only timed hosts, media and audio. Captions live on one track, a single sub-composition host marked data-track-kind captions that carries every caption group in order.
Elements are grouped one kind per track with data-track-kind values for video, graphics, captions and audio. Video and audio kinds come from their tags, and the track index is for display only, so layering is done in CSS. Safe-zone guides, using Premiere's default safe boxes for wide and vertical framings, are drawn by the preview pane and must not be added to the HTML. Individual edit recipes are out of scope and live in creator-editing-recipes.md under hyperframes-core.
When your agent uses it
- Building a HyperFrames project that people will open and edit in Studio
- Restructuring a project whose timeline shows a wall of unlabeled rows
- Placing captions and key content inside the safe zones
Example prompts
- “Restructure this HyperFrames project so every scene is a sub-composition.”
- “Put all captions on a single captions track in the Studio timeline.”
- “Check that my project follows the one-kind-per-track rule.”
Requirements
- A HyperFrames project that is opened in Studio
- The hyperframes-core skill for editing recipes and sub-composition wiring
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 33699ae. 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
No URLs in SKILL.md.
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 Timeline Conventions loads about 916 tokens when it runs. Until then it costs about 110 tokens; SKILL.md has 432 words of instructions outside code blocks.
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 edenfunf/reelmimic at commit 33699ae, republished under its MIT licence (© edenfunf). 432 words, ~916 tokens.
Download SKILL.mdSave it as
.claude/skills/hyperframes-studio/SKILL.md (or your agent's skills folder).- name
- hyperframes-studio
- description
- Use when building or editing a HyperFrames project that people open in Studio: 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`.
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.
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
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) markeddata-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-captionsand thecaption_*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.
| Kind | data-track-kind |
|---|---|
| Base video / A-roll | video (from the tag) |
| Scenes, overlays, graphics | graphics |
| Captions | captions |
| 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 (144 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.
| Box | Share of the frame | Inset on every edge |
|---|---|---|
| Action-safe | 90% | 5% |
| Title-safe | 80% | 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.
Checking your work
Run hyperframes 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.
© edenfunf, MIT. 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 .claude/skills/hyperframes-studio of edenfunf/reelmimic.
Open the folder on GitHubat commit 33699ae
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in edenfunf/reelmimic, which our catalogue first saw on October 7, 2026.
Compare with similar skills
HyperFrames Studio Timeline 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HyperFrames Studio Timeline Conventions this skilledenfunf/reelmimic | 1.6k | 1 repos | ~916 | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 58k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Faceless Explainer Videoheygen-com/hyperframes | 58k | 3 repos | ~7.5k | Automated safety check: Notes | Apache-2.0 | |
| Figma to HyperFramesheygen-com/hyperframes | 58k | 3 repos | ~4.5k | Automated safety check: Notes | Apache-2.0 | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 58k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Music to Videoheygen-com/hyperframes | 58k | 4 repos | ~4.7k | Automated safety check: Notes | Apache-2.0 |
Similar skills
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.
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.
HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
Music to Video
heygen-com/hyperframes
Turns a music track into a beat-synced HyperFrames video such as a lyric video, slideshow or kinetic promo, with any supplied images or clips cut onto the beat grid.
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…
More from edenfunf/reelmimic
All 8 skills in this repoReference Video Style Cloner
edenfunf/reelmimic
Takes a reference video and a short brief, analyzes its cutting and visual style, then plans and builds a new MP4 in a matching style.
Anime Cel Video Maker
edenfunf/reelmimic
Builds Japanese TV-anime style MP4 videos in code, with cel-shaded characters, painted backgrounds and staging effects, rendered in headless Chrome and encoded with ffmpeg.
Blender Product Film
edenfunf/reelmimic
Renders premium 3D product films in headless Blender from JSON shot specs, building the product from a photo or procedurally, then finishing titles, music and cuts.
Crayon Storybook Animation
edenfunf/reelmimic
Builds children's picture-book MP4 animations drawn in crayon, colored pencil and pastel, rendered frame by frame with p5.js and encoded with ffmpeg.
Paper Cut-out Animation
edenfunf/reelmimic
Builds paper cut-out, stop-motion style MP4 videos in code, with jointed paper puppets, torn or scissor-cut edges and soft shadows, rendered frame by frame in headless Chrome.
Pixel Art Video Engine
edenfunf/reelmimic
Makes animated pixel-art videos in an indie-game style: a 480×270 canvas upscaled four times, limited palettes with dithering, procedural characters and dialogue captions, encoded as MP4.
Related
Works with
Categories
Questions about HyperFrames Studio Timeline Conventions
What does HyperFrames Studio Timeline Conventions do?
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. Studio draws one timeline row per top-level element, so this skill sets rules for what to build. Every scene with nested structure, such as a title with a subtitle or a chart, becomes its own sub-composition file loaded with data-composition-src, and the root composition holds only timed hosts, media and audio.
When should I use HyperFrames Studio Timeline Conventions?
HyperFrames Studio Timeline Conventions fits situations like: building a HyperFrames project that people will open and edit in Studio; restructuring a project whose timeline shows a wall of unlabeled rows; placing captions and key content inside the safe zones.
How do I install HyperFrames Studio Timeline Conventions in Claude Code?
Run `npx skills add edenfunf/reelmimic --skill hyperframes-studio -a claude-code`. Or copy the skill folder (.claude/skills/hyperframes-studio in edenfunf/reelmimic) into .claude/skills/hyperframes-studio in your project. Claude Code loads it when a task matches its description.
How do I install HyperFrames Studio Timeline Conventions in Codex?
Run `npx skills add edenfunf/reelmimic --skill hyperframes-studio -a codex`. Or copy the skill folder (.claude/skills/hyperframes-studio in edenfunf/reelmimic) into .agents/skills/hyperframes-studio in your project. Codex loads it when a task matches its description.
Can I use HyperFrames Studio Timeline 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 edenfunf/reelmimic --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 Timeline Conventions need to run?
SKILL.md names no scripts, command-line tools or credentials: HyperFrames Studio Timeline Conventions is instructions for the agent only. Our summary lists: A HyperFrames project that is opened in Studio; The hyperframes-core skill for editing recipes and sub-composition wiring.
Does HyperFrames Studio Timeline Conventions access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is HyperFrames Studio Timeline 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 Timeline Conventions use?
HyperFrames Studio Timeline Conventions is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HyperFrames Studio Timeline Conventions use?
About 916 tokens (SKILL.md is roughly 3.7k 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 Timeline Conventions?
Skills that share tags, products or a category with HyperFrames Studio Timeline Conventions: HyperFrames Animation (heygen-com/hyperframes, 58k stars), Faceless Explainer Video (heygen-com/hyperframes, 58k stars), Figma to HyperFrames (heygen-com/hyperframes, 58k stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 58k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HyperFrames Studio Timeline Conventions?
edenfunf (a GitHub user) maintains it in edenfunf/reelmimic, which has 1,610 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 6, 2026.
Source: edenfunf/reelmimic on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.