Files
hyperframes/skills/hyperframes-studio/SKILL.md
Miguel Ángel 2db126d4c8 docs(skills): one owner doc for everyday edits and a hyperframes-studio skill (#4125)
* docs(skills): one owner doc for everyday edits and a hyperframes-studio skill

Agents got contradictory advice on volume fades and were blocked from splits
and copies by the Ask-agent guardrails.

- creator-editing-recipes.md is the single owner: adds align-to-event,
  copy-a-group and swap-media recipes and the one volume rule (use the lane)
- variables-and-media, data-attributes (skill and CLI copy), the gsap adapter
  and tracks-and-clips now defer to it
- Ask-agent guardrails allow the neighbour edits a split, retime, copy or swap
  requires and point at the owner doc
- new hyperframes-studio skill: sub-compositions for every scene, one caption
  track, one element kind per track, safe zones
- drift test lints every html example in the owner doc with the real linter
  and fails on any doc teaching a volume tween

* refactor(skills): drop unused tween allowlist from recipes drift test

* docs(skills): name the track kind attribute in the studio skill

* docs(skills): stop claiming lint rules that do not exist yet and fix track numbering

Review fixes:

- studio skill: drop the severity claim and the preview-overlay claim,
  group tracks by data-track-kind instead of numeric ranges that clashed
  with the recipes
- recipes: audio data-start is root time only in the root composition;
  scene-local inside a sub-composition file
- guardrails: timeline edits are exempt from the element-only and timing
  lines; the pointer names the skill reference, not a repo path
- montage doc defers to the volume lane; skill count is 21 everywhere
- drift test also scans the montage doc

* fix(skills): the ducking generator emits a volume lane and captions defer to the studio safe zones

- audio-duck.mjs prints a data-automation lane (clip-local times from the
  target data-start) instead of a timeline volume tween; --json adds the lane
- operations.md shows the generated lane; the drift test scans it
- embedded-captions safe-zone lines point at the studio skill, which owns
  the values

* chore(skills): regenerate the skills manifest after rebase

* docs(skills): remotion translation docs point volume ramps at the automation lane

* docs(skills): studio safe zones use the action-safe 90 and title-safe 80 boxes

* docs(skills): caption docs defer to the studio safe boxes

* chore(skills): regenerate the skills manifest after rebase

* fix(skills): studio skill names the safe margins; guardrail test matches the timeline-edit wording
2026-09-18 23:19:40 -04:00

3.6 KiB

name, description
name description
hyperframes-studio 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) 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.

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.