HyperFrames Core for Claude Code: HTML Composition Timing
Learn the current HyperFrames HTML composition contract, with a two-scene timing example and a migration path from the retired HyperFrames Core skill.
中文Setup for Claude Code (current HyperFrames replacement)
Claude Code, Node.js 22 or newer for the local HyperFrames CLI, and a disposable project. The separate hyperframes-core skill was retired upstream. This example uses its maintained /hyperframes workflow.
- Run `claude plugin marketplace add heygen-com/hyperframes` and `claude plugin install hyperframes@hyperframes` in a terminal. Start a fresh Claude Code session in a scratch project.
- Ask the agent to load /hyperframes and read `skills/hyperframes/references/format.md` from the installed bundle or the upstream v0.9.53 tree. Use `npx hyperframes@0.9.53` for the pinned CLI when running the example's checks.
- For historical reading, the original GitHub source below preserves the standalone hyperframes-core document from before the retirement.
Example task
In a local 4-second project, mount two distinct 1920×1080 scenes. Set the first host's timing to start 0 and duration 2, and the second host's timing to start 2 and duration 2. Give each host, its scene root, and its paused timeline the same composition ID. Put a different number in each scene and inspect 1.9 and 2.1 seconds.Expected result
The first snapshot shows scene 1 and the second shows scene 2. The metadata contains two distinct composition IDs, and their intended display intervals do not intersect.
Upstream documentation
Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed
Frequently asked question
How do I use the former HyperFrames Core composition rules?
Open the main HyperFrames skill, then read its format reference for timed clips, timeline registration, sub-composition IDs, and editable variables.