vskill: Skill for Claude Code

.claude/skills/hyperframes/SKILL.md

hyperframes is a skill for Claude Code from anton-abyzov/vskill. It costs 173 tokens per session (7,148 once invoked), scanned A, a copy of hyperframes, MIT.

A toolkit for creating videos as timed HTML compositions. It supports animated scenes, title cards, overlays, captions, voice narration, audio-driven effects, and transitions.

In plain words
What is it for?
Use it to build social videos, product demos, website video sections, narrated clips, captioned videos, and other HTML-rendered motion content.
Why use it?
It provides one place to define both the appearance and timing of an HTML-based video. This helps when text, sound, animation, and scene changes must stay aligned.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

This is anton-abyzov/vskill's own configuration. It tells Claude Code how to work on vskill itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything vskill configures →

Needs its repository: it runs a file that does not travel with it, so clone the repository first. The line is node skills/hyperframes/scripts/animation-map.mjs <composition-dir> \.

Reuse

Borrowing it

Nothing to install: this file belongs to anton-abyzov/vskill. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/anton-abyzov/vskill/main/.claude/skills/hyperframes/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/anton-abyzov/vskill

Made for: Claude Code.

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

README.md
[![agentmods](https://agentmods.dev/badge/skills/anton-abyzov/vskill/hyperframes/github.svg)](https://agentmods.dev/skills/anton-abyzov/vskill/hyperframes)
Your own site
<a href="https://agentmods.dev/skills/anton-abyzov/vskill/hyperframes"><img src="https://agentmods.dev/badge/skills/anton-abyzov/vskill/hyperframes/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.

agentmods 80×15 button for hyperframes

Your own site · 80×15
<a href="https://agentmods.dev/skills/anton-abyzov/vskill/hyperframes"><img src="https://agentmods.dev/badge/skills/anton-abyzov/vskill/hyperframes.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 173 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 7,148 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 98% copy Near-identical to another mod 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.1 $0.00173 $0.07148
Opus 5.5 $0.00069 $0.02859
Sonnet 5.5 $0.00035 $0.01430
Haiku 4.5 $0.00017 $0.00715

Measured 1mo ago against content hash d7f2d47e6a9e, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo 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.

Origin

This is a copy

98% identical to hyperframes — 1 line 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.

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

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 design.md or DESIGN.md exists in the project, read it first (check both casings — they're different files on Linux). 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: "design.md specifies [font name] but no font files found. Please add .woff2 files to fonts/ or I'll fall back to [closest built-in alternative]."

If no design.md exists, offer the user a choice:

  1. User named a style or mood? → Read visual-styles.md for the 8 named presets. Pick the closest match.
  2. Want to browse options visually? → Run the design picker: read references/design-picker.md for the full workflow. This serves a visual picker page. The user configures mood, palette, typography, and motion in the browser, then copies the generated design.md and pastes it back into the conversation.
  3. Want to skip and go fast? → Ask: mood, light or dark, any brand colors/fonts? Then pick a palette from house-style.md.

Read the full file on GitHub · 492 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. 1mo ago First seen · 492 lines · 173 tokens per session scan A d7f2d47e6a9e

Subscribe to this mod's changes

hyperframes is a skill published in the GitHub repository anton-abyzov/vskill (48 stars, last pushed yesterday), licensed MIT. It adds 173 tokens to every session and 7,148 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 98% identical to hyperframes, differing in 1 line, and is treated as a copy.