hyperframes

A technical skill for creating videos from HTML files. HTML is the markup used to define a webpage; here, it also describes the video’s scenes, timing, and media.

In plain words
What is it for?
Use it to make or edit videos, animations, motion graphics, title cards, overlays, and other timed compositions, with separate skills available for motion recipes and visual design.
Why use it?
It provides the technical workflow needed to author, preview, and render HTML-based video compositions instead of treating video as a static webpage.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/sma1lboy/rove/hyperframes
Any agent
npx skills add Sma1lboy/rove --skill hyperframes
Clone the repo
git clone --depth 1 https://github.com/Sma1lboy/rove

Made for: Claude Code, Codex.

Per session 167 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,569 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00167 $0.02569
Opus 5 $0.00084 $0.01285
Sonnet 5 $0.00033 $0.00514
Haiku 4.5 $0.00017 $0.00257

Measured 2d ago against content hash b1d2f1c65633, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

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 2d 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.

.claude/skills/hyperframes/SKILL.md · 122 lines

How it starts

The opening of the file, as written. The whole thing — 122 lines — stays where its author put it; the contents beside it link to each section on GitHub.

HyperFrames — start here

HyperFrames renders video from HTML — a composition is an HTML file whose DOM declares timing with data-* attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.

This skill is the technical how-to-use guide — it is intentionally non-design. For motion / animation recipes, see /hyperframes-motion. For design direction (palettes, typography, frame presets), see /hyperframes-design. Below: a capability map of every HyperFrames topic, a topic guide index for what's in this skill, and an intent router for picking a workflow.

Capability map — the HyperFrames skills

Three skills, one per concern. This one is the technical how-to-use guide. The other two cover design.

You want to… Skill
How to use HyperFrames — composition contract, CLI dev loop, install registry blocks / components (this skill) /hyperframes
Motion / animation — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js) /hyperframes-motion
Design — palettes, typography, frame presets, beat planning, brand / style decisions (no animation recipes) /hyperframes-design

Topic guide — what's inside this skill

The technical how-to-use guide is split into three sub-topics. Each has its own SKILL.md and references/:

Sub-topic Path Read it for
Composition core core/SKILL.md The composition contract — data-* attributes, clips, tracks, sub-compositions, variables, determinism rules
CLI dev loop cli/SKILL.md npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda cloud rendering
Registry add registry/SKILL.md hyperframes add <block-or-component> — install locations, wiring blocks, wiring components, contributing new items

Read the full file on GitHub · 122 lines

Changes

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.

  1. 2d ago First seen · 122 lines · 167 tokens per session scan A b1d2f1c65633

Subscribe to this mod's changes

hyperframes is a skill published in the GitHub repository Sma1lboy/rove (114 stars, last pushed 2d ago), licensed MIT. It adds 167 tokens to every session and 2,569 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

omd-video

视频→逐段结构化笔记 (MiMo-v2.5 原生吃画面+音频, 非 whisper 转写; 可重入管线)。讲解/课程视频里 PPT 框架图/代码/提示词是画面独有、音频拿不到的信息。产 ALL-NOTES.md 交 /omd-council 或 dagresearch 做综合。Trigger:/omd-video、抖音/B站/YouTube 讲解视频、课程系列、把这些视频学一遍/提炼、画面里有代码/图表/PPT。Skip:文字原文综合→/omd-council;网页内容→dagresearch(检索版)。.

AbyssCN/oh-my-dag · 155 tokens

event-systems

Event system patterns — C# events, UnityEvent, SO event channels, static EventBus. When to use each, zero-allocation patterns, memory leak prevention.

XeldarAlz/everything-claude-unity · 37 tokens

scriptable-objects

ScriptableObject architecture patterns — event channels, variable references, runtime sets, factory pattern, data containers. The backbone of data-driven Unity architecture.

XeldarAlz/everything-claude-unity · 34 tokens

object-pooling

Object pooling patterns — Unity ObjectPool , custom ComponentPool, warm-up strategies, return-to-pool lifecycle. Eliminates runtime Instantiate/Destroy overhead.

XeldarAlz/everything-claude-unity · 35 tokens

design-handoff

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

openyak/openyak · 49 tokens

frontend-best-practices

Use this skill when creating or modifying React frontend components. It defines UI/UX, styling, and architecture standards.

ApexIQ/skillsmith · 29 tokens