hyperframes-video

hyperframes-video is a skill for Claude Code, Codex from memi-design/design-skills. It costs 25 tokens per session (306 once invoked), scanned A, original, MIT.

A workflow for creating deterministic motion videos as HTML scenes, with frame configuration, previews, linting, and rendering. It suits product cards, marketing loops, website captures, and simple composited explainers.

In plain words
What is it for?
Use it to create an HTML scene and Hyperframes configuration, preview and lint the frames, and render an MP4 while keeping external assets, outputs, and rendering settings organized.
Why use it?
It provides a repeatable path from an HTML scene to a video and helps catch layout changes before rendering. Fixed dimensions, frame rate, and duration make previews and final output more consistent.

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/memi-design/design-skills/hyperframes-video
Any agent
npx skills add memi-design/design-skills --skill hyperframes-video
Clone the repo
git clone --depth 1 https://github.com/memi-design/design-skills

Made for: Claude Code, Codex.

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

agentmods badge for hyperframes-video

README.md
[![agentmods](https://agentmods.dev/badge/skills/memi-design/design-skills/hyperframes-video.svg)](https://agentmods.dev/skills/memi-design/design-skills/hyperframes-video)
Your own site
<a href="https://agentmods.dev/skills/memi-design/design-skills/hyperframes-video"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/hyperframes-video.svg" alt="Measured on agentmods" height="20"></a>
Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 306 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.00025 $0.00306
Opus 5 $0.00013 $0.00153
Sonnet 5 $0.00005 $0.00061
Haiku 4.5 $0.00003 $0.00031

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

Security

Grade A, and why

hyperframes-video 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 5d 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.

skills/hyperframes-video/SKILL.md · 36 lines

What it actually says

Hyperframes Video

Use this Note when the video can be expressed as a deterministic HTML scene. Hyperframes is the lighter path for product cards, marketing loops, website captures, and simple composited explainers.

Current Workflow

  1. Generate index.html and hyperframes.json in .memoire/videos/<id>.
  2. Preview with npx hyperframes preview . from the project folder, or pass the folder explicitly from Studio.
  3. Lint with npx hyperframes lint . before rendering when the command is available.
  4. Render with npx hyperframes render . --output dist/<id>.mp4.

Scaffold Rules

  • Keep all external assets local to the project folder or explicit URLs.
  • Prefer CSS keyframes and deterministic layout over runtime mutation.
  • Store render outputs in dist/ and keep hyperframes.json as the command contract Studio can inspect.
  • Use @hyperframes/core or @hyperframes/producer for programmatic validation and rendering once the sidecar grows beyond command preparation.

Quality Bar

  • Use fixed dimensions, fps, and duration in config.
  • Avoid layout shifts between preview and render.
  • Keep colors/tokens aligned with the source product rather than inventing a separate video theme.
Files

What ships with it

1 file 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.

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. 5d ago First seen · 36 lines · 25 tokens per session scan A 91a88eb3766f

Subscribe to this mod's changes

hyperframes-video is a skill published in the GitHub repository memi-design/design-skills (7 stars, last pushed 1mo ago), licensed MIT. It adds 25 tokens to every session and 306 once invoked, about $0.0001 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-31.

Related

Other skills, from other repositories

codex-thread-orchestration

Use when running Arcgentic V2 in Codex and the current thread must orchestrate fixed Planner, Developer, Test, and Auditor role threads.

Arch1eSUN/Arcgentic · 37 tokens

claude-code-session-broker

Use when running Arcgentic V2 in Claude Code and fixed Planner, Developer, and Auditor role sessions must be coordinated through a broker.

Arch1eSUN/Arcgentic · 35 tokens

arcgentic

Use when the user says Arcgentic, asks to use Arcgentic, or wants an idea taken through a complete plan → development → self-audit → external audit workflow in Codex.

Arch1eSUN/Arcgentic · 43 tokens

audit-round

External-audit role for arcgentic rounds. Loaded when arcgentic state.yaml is in awaitingaudit or auditinprogress, OR when the user explicitly requests an external audit of a finished round, OR when reviewing a handoff doc + commit chain against the round's declared scope. Produces a PASS / NEEDSFIX / AUDITINCOMPLETE…

Arch1eSUN/Arcgentic · 117 tokens

pre-round-scan

Mandatory prelude for every role at the start of a round. Inventories available skills, MCP servers, plugins, sub-agents, and external references. Outputs which tools will be used in this round and which were considered but rejected, with reasons. Use as the very first action of every role skill in an…

Arch1eSUN/Arcgentic · 73 tokens

verify-gates

Runs the mechanical quality gates that the arcgentic state machine requires for state transitions. Invoked indirectly by transition.sh OR directly by orchestrator agent before declaring a state transition. Use when about to call transition.sh OR when manually verifying that a round artifact meets the gate criteria.…

Arch1eSUN/Arcgentic · 75 tokens