hyperframes-studio
Skill18 starsChanged 47 days agoMITView on GitHub
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`.
11 other projects use a version of this, 7 of them edited.
Adopted by
Most recently taken up by
- anithomas/claude-skillsedited, first seen Nov 15, 2026
- antoineblc99/reel-kitword for word, first seen Nov 15, 2026
- edenfunf/reelmimicword for word, first seen Nov 4, 2026
- vikneshwaran16032005-alt/claude-skillsedited, first seen Nov 1, 2026
- taljeon/plzdoedited, first seen Nov 1, 2026
- Rajveerx11/skillsedited, first seen Oct 25, 2026
Other versions11 projects use a version of this.
Word for word · 2
- edenfunf/reelmimic★ 1.8k100% same
- antoineblc99/reel-kit★ 1100% same
Edited · 7
- tuan3w/herdr-mobile★ 2939% same
- taljeon/plzdo★ 939% same
- vikneshwaran16032005-alt/claude-skills★ 339% same
- Rajveerx11/skills★ 179% same
- anithomas/claude-skills★ 039% same
- kschiavo-beep/claude-skills★ 039% same
- shreeve1/Claude-Cowork★ 039% same
Wrote their own version · 2
- eyaprak/skills★ 33same name
- STARDUSTLC666/dsh-hyperframes★ 30same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository37 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- anime-celSkill
- blender-product-filmSkill
- captions-overlaySkill
- crayon-storybookSkill
- cut-the-curveSkill
- embedded-captionsSkill
- faceless-explainerSkill
- ffmpegSkill
- figmaSkill
- frontend-designSkill
- general-videoSkill
- hyperframes-animationSkill
- hyperframes-audioSkill
- hyperframes-cliSkill
- hyperframes-coreSkill
- hyperframes-creativeSkill
- hyperframes-keyframesSkill
- hyperframes-registrySkill
- hyperframesSkill
- media-useSkill
- motion-doctrineSkill
- motion-graphicsSkill
- music-to-videoSkill
- oversized-cursorSkill
- painted-animationSkill
- paper-cutoutSkill
- pixel-artSkill
- product-launch-videoSkill
- pr-to-videoSkill
- remotion-to-hyperframesSkill
- seam-craftSkill
- slideshowSkill
- talking-head-recutSkill
- video-cloneSkill
- whiteboardSkill
The file
We split this skill into the rules it gives an agent
4 rules. 1 is common, 0 are distinctive, and 3 are very specific to this project.
1
Common
Most of the 7 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 34
All captions live on one track: a single sub-composition host (one data-track-index) marked data-track-kind="captions" that carries every …
- Common: line 36
Never one row per caption group, and never captions mixed onto a track with another kind.
- Very specific: line 51
Put data-track-kind on sub-composition hosts.
- Very specific: line 74
Run hyperframes lint and fix every finding.
“Common” is measured: kept by at least 6 in 10 of the 7 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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.
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.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.