Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add renmengwen/MuseDock --skill hyperframes-skills-officialgit clone --depth 1 https://github.com/renmengwen/MuseDockWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/renmengwen/musedock/hyperframes-skills-official)<a href="https://agentmods.dev/skills/renmengwen/musedock/hyperframes-skills-official"><img src="https://agentmods.dev/badge/skills/renmengwen/musedock/hyperframes-skills-official/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/renmengwen/musedock/hyperframes-skills-official"><img src="https://agentmods.dev/badge/skills/renmengwen/musedock/hyperframes-skills-official.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00173 | $0.07390 |
| Opus 5 | $0.00086 | $0.03695 |
| Sonnet 5 | $0.00035 | $0.01478 |
| Haiku 4.5 | $0.00017 | $0.00739 |
Grade A, and why
hyperframes scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
89% identical to hyperframes — 37 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 492 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HyperFrames
HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
Approach
Discovery (exploratory requests only)
For open-ended requests ("make me a product launch video", "create something for our brand") where the user hasn't committed to a direction, understand intent before picking colors:
- Audience — who watches this? Developers? Executives? General consumers?
- Platform — where does it play? Social (15s), website hero, product demo, internal?
- Priority — what matters most? Motion quality? Content accuracy? Brand fidelity? Speed?
- Variations — does the user want options, or a single best shot?
For specific requests ("add a title card", "fix the timing on scene 3"), skip discovery.
For exploratory requests, consider offering 2-3 variations that differ meaningfully — not just color swaps, but different pacing, energy levels, or structural approaches. One safe/expected, one ambitious. Don't mandate this — it's a tool available when appropriate.
Step 1: Design system
If a design spec exists in the project, read it first. Look in precedence order: frame.md → design.md → DESIGN.md (design.md and DESIGN.md are different files on Linux — check both casings; frame.md is always lowercase, no FRAME.md variant). frame.md is the preferred spec for video/hyperframes projects and wins if more than one exists; it uses the same format as design.md. It's the source of truth for brand colors, fonts, and constraints. Use its exact values — don't invent colors or substitute fonts. Any format works (YAML frontmatter, prose, tables — just extract the values).
If it names fonts you can't find locally (no fonts/ directory with .woff2 files, not a built-in font), warn the user before writing HTML: "the spec specifies [font name] but no font files found. Please add .woff2 files to fonts/ or I'll fall back to [closest built-in alternative]."
What ships with it
47 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- data-in-motion.md 1.3 KB
- house-style.md 5.0 KB
- palettes/bold-energetic.md 417 B
- palettes/clean-corporate.md 410 B
- palettes/dark-premium.md 389 B
- palettes/jewel-rich.md 394 B
- palettes/monochrome.md 454 B
- palettes/nature-earth.md 399 B
- palettes/neon-electric.md 380 B
- palettes/pastel-soft.md 392 B
- palettes/warm-editorial.md 411 B
- patterns.md 5.4 KB
- references/audio-reactive.md 3.0 KB
- references/beat-direction.md 13 KB
- references/captions.md 7.7 KB
- references/css-patterns.md 8.1 KB
- references/design-picker.md 12 KB
- references/dynamic-techniques.md 7.7 KB
- references/html-in-canvas-patterns.md 17 KB
- references/motion-principles.md 11 KB
- references/narration.md 3.4 KB
- references/prompt-expansion.md 5.6 KB
- references/techniques.md 20 KB
- references/text-effects.md 4.0 KB
- references/transcript-guide.md 5.7 KB
- references/transitions.md 13 KB
- references/transitions/catalog.md 6.1 KB
- references/transitions/css-3d.md 421 B
- references/transitions/css-blur.md 1.7 KB
- references/transitions/css-cover.md 1.4 KB
- references/transitions/css-destruction.md 4.4 KB
- references/transitions/css-dissolve.md 2.4 KB
- references/transitions/css-distortion.md 1.8 KB
- references/transitions/css-grid.md 370 B
- references/transitions/css-light.md 2.3 KB
- references/transitions/css-mechanical.md 1.6 KB
- references/transitions/css-other.md 838 B
- references/transitions/css-push.md 1.2 KB
- references/transitions/css-radial.md 1.0 KB
- references/transitions/css-scale.md 715 B
- references/typography.md 9.1 KB
- references/video-composition.md 3.6 KB
- scripts/animation-map.mjs 19 KB runs code
- scripts/contrast-report.mjs 12 KB runs code
- scripts/package-loader.mjs 8.1 KB runs code
- templates/design-picker.html 43 KB
- visual-styles.md 11 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 492 lines · 173 tokens per session scan A 62f6ec3fbcb9
hyperframes is a skill published in the GitHub repository renmengwen/MuseDock (109 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 173 tokens to every session and 7,390 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. It is 89% identical to hyperframes, differing in 37 lines, and is treated as a copy.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
general-video
Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
diagnostic-stem-delivery
Audio production with diagnostic analysis, timecode parsing from documents, and verified export workflow.
chengfeng-check-updates
An environment manager for a video-editing system. It checks whether its skills and runtime—the software needed to run them—are installed and compatible.