Home / All Skills / Content & Media Creation / hyperframes-studio
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · heygen-com/hyperframes

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`.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0（仓库根 LICENSE 为 Apache License Version 2.0；池内值亦为 Apache-2.0）Commit d2f0bc7f34
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The causal starting point of the entire document is Studio's rendering model: the timeline draws one row for each top-level element. Therefore, 'how hierarchies are sliced' directly determines whether users can edit inside Studio, rather than being an aesthetic preference.

skills/hyperframes-studio/SKILL.md
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.
What this does: Argues that 'structural conventions' are 'usability constraints', presenting failure states first (a row of uneditable, nameless rows) before introducing four rules.

Rule 1: The root composition only holds top-level hosts, media, and audio; any scene with a nested structure must be split into a standalone file and mounted via data-composition-src—nested markup left in the root will not become separate rows.

skills/hyperframes-studio/SKILL.md
The root composition holds only timed hosts, media and audio.
What this does: Provides a decidable criterion ('split whenever there are child elements') and points out the consequence—unsliced nests become hidden inside an opaque white row that cannot be segmented or trimmed.

Rule 2: All captions occupy only a single track—a single sub-composition host with data-track-kind="captions" carries all caption groups sequentially; caption groups are never allowed to have one row each, nor mixed with other track kinds.

skills/hyperframes-studio/SKILL.md
- All captions live on one track: a single sub-composition host (one `data-track-index`)
What this does: Defines a 'track' as 'a group that users can select, mute, or drag as a whole', aggregating by kind rather than grouping by content; word-level timing rules still belong to /embedded-captions and caption_* lint rules.

Rule 3: Each track contains only one element type, annotated via data-track-kind (video/graphics/captions/audio), and data-track-index is only a display sequence that does not dictate stacking order—stacking order is determined by CSS.

skills/hyperframes-studio/SKILL.md
Give each kind its own `data-track-index`; the number is display only; it never changes what renders on top.
What this does: Eliminates a common misconception (assuming track-index represents z-order), explicitly decoupling 'track order vs. stacking layer order' that is often confused in handwritten HTML.

Rule 4: Safe zones are rendered only in the preview panel and must never be written into compositions; portrait and landscape formats share the same safe frame standards (Adobe Premiere defaults: Action Safe 90%, Title Safe 80%), with captions and key content strictly positioned within the Title Safe frame.

skills/hyperframes-studio/SKILL.md
Safe margins: everything visible stays inside the action-safe box (90%), and captions and key content stay inside the title-safe box (80%).
What this does: Establishes the discipline that 'guidelines belong to tools, not deliverables', preventing editor-only boxes from leaking into exported HTML; two-column and split layouts are also required to fit within their respective Title Safe areas.

Wrap up with dual-evidence verification: First run hyperframes lint to resolve all findings, then visually verify the timeline structure inside Studio (one base row + one row per scene host + one caption row + audio rows).

skills/hyperframes-studio/SKILL.md
Run `hyperframes lint` and fix every finding.
What this does: Delegates 'structural correctness' to static checks while leaving 'readability' to the human eye—both must pass.

Clear boundaries: This skill strictly covers 'what shape should be constructed'; specific clip modifications (split/trim/retime/volume/copy/swap) must defer to creator-editing-recipes.md in /hyperframes-core, with no improvised redundant patterns permitted.

skills/hyperframes-studio/SKILL.md
For how to change a clip, follow `/hyperframes-core` `references/creator-editing-recipes.md` and never invent a different form of the same edit.
What this does: Explicitly rejects redefining external rules (single source of truth principle) and clarifies trigger conditions (who should use this skill) upfront in the description.

2Core Capabilities

01Root composition splitting contract: The root composition only retains timing hosts, media, and audio; any scene containing child elements is split into a standalone file mounted via data-composition-src
02Single caption track contract: All caption groups are hosted on a single track with data-track-kind="captions", never split across multiple rows or mixed with other element types
03Track type list and annotation methods: video (inferred from tags) / graphics / captions / audio (inferred from tags); sub-composition hosts must explicitly specify data-track-kind
04Safe zone specifications: Action Safe 90% (5% inset on each side), Title Safe 80% (10% inset on each side), shared across both orientations; two-column/split layouts must independently respect Title Safe margins
05Guideline containment: Safe frames and rulers exist solely in the preview panel and must not appear in output HTML
06Closing dual-evidence verification: Clean hyperframes lint pass + visual Studio confirmation that the timeline consists of 'base row / one row per scene host / one caption row / audio rows'

3External Dependencies

KindDependency / Endpoint
clihyperframes lint（唯一被本 skill 点名的外部命令，作为结构正确性的静态门禁）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external impact
Audit Notes: Evaluation target = the skill directory itself: Contains only 1 markdown file, zero scripts, zero network calls, zero credential/environment variable reads, and zero write instructions; global token scan (http(s) URL / fetch / process.env / child_process / writeFile / API_KEY|TOKEN|SECRET) yielded 0 matches. It only performs two tasks: provides four timeline structure conventions alongside safe zone percentages, and requests running hyperframes lint followed by visual verification—execution occurs on the host CLI side, which according to the paradigm 'host behavior does not alter risk tier' is recorded in reason without increasing severity. The sole verifiable external reference (safe zone constants in packages/studio/src/utils/previewSafeMargins.ts) is an internal repository reading, empirically matching ACTION_SAFE_PERCENT=90 and TITLE_SAFE_PERCENT=80 as documented in the table.

5Second-Pass Verification

  • [ok] 安全区百分比与宿主源码常量是否一致（文档唯一可被代码验证的声明） — SKILL.md 给出 Action-safe 90%（每边 5%）、Title-safe 80%（每边 10%），并指明来源 packages/studio/src/utils/previewSafeMargins.ts。打开该文件实测：`export const ACTION_SAFE_PERCENT = 90;` 与 `export const TITLE_SAFE_PERCENT = 80;`，注释亦写明「Adobe Premiere default: action-safe and title-safe margins are 10% and 20% total (5% and 10% per edge)」——文档与代码一致。
  • [ok] 是否遗漏网络调用 / 脚本 / 凭证（绿档判定的关键反例检查） — 全域扫描 URL、fetch、process.env、child_process、writeFile、credential 关键词均为 0 命中；目录内只有 1 个 md 文件，无 scripts/、references/、资产。因此不存在隐藏执行面。
  • [ok] 「轨类型 / 字幕单轨」等约定是否与仓库 lint 规则对得上（避免文档与实现脱节） — 文档自述「Author as if a structure lint rejects any violation」，并把词级时间规则交给 /embedded-captions 与 caption_* lint 规则；同仓 /embedded-captions 与 /hyperframes-core 的 lint 域存在对应规则，故约定不是孤例自说。本 skill 自身不实现 lint，属声明面。
  • [ok] 是否存在夸大（把宿主能力说成自己的） — 文档通篇用祈使式约定（该建出什么形状）与指向（去看某文件），没有声称自己执行检查或渲染；收尾要求跑的是 hyperframes lint（宿主命令）。与同批 hyperframes-keyframes 同型：纯约定文档，能力来自宿主。

6Verdict & Scenarios

  • Frames structural conventions as strict usability constraints (non-compliance results in uneditable, unnamed rows in Studio) rather than subjective styling preferences
  • Each rule is deterministic with explicit counterexamples (split if it has children, captions do not form individual rows, track-index is not z-index), making it easy for newcomers to follow
  • The only code-verifiable claim (safe frame percentages) matches the host source constants exactly, providing high document credibility
  • Clean boundaries: Exclusively defines 'what shape to construct', delegating individual clip edits to creator-editing-recipes.md in /hyperframes-core and forbidding duplicate custom patterns
  • Enforces dual-evidence closing (clean lint pass + Studio visual row check), preventing reliance solely on static checks or manual inspection
    • Best for: Suitable as a structural specification when developing HyperFrames projects meant to be opened and edited in Studio: keeping the root composition lean, structuring scenes as sub-compositions, consolidating captions into a single track, categorizing tracks by kind, keeping key content within safe zones, and wrapping up by running lint alongside visual verification of the timeline layout. Also suitable as a shared team convention reused across other workflow skills (serving as one of the structural discipline foundations for the HyperFrames suite).
    Not for: Not suitable for: 1. Scenarios requiring specific editing instructions (split, trim, retime, volume, copy, swap → use /hyperframes-core); 2. Pure rendering projects not intended for Studio (convention benefits do not apply); 3. Scenarios focused solely on specific animation implementation (refer to hyperframes-animation / hyperframes-keyframes); 4. Users expecting automatic repair of structural errors—this skill provides conventions and checkpoints, but does not perform automated modifications.
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload hyperframes-studio.tar.gz
    sha256: e1afb0832db4ac26…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.