Skip to content
mcp/skillhub

Agent Skill

Hyperframes skill

hyperframesnexu-io/open-designdesign-templates/hyperframes/SKILL.md

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

103kApache-2.0

always on

155 tokname + description

once used

6,641 tokSKILL.md body

bundled files

403 scripts

repo stars

103kGitHub

Install the Hyperframes skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/nexu-io/open-design --skill hyperframes

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -R /tmp/open-design/design-templates/hyperframes ~/.claude/skills/hyperframes

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description155 tok
When the agent uses itThe SKILL.md instructions6,641 tok
Only if opened40 bundled files (152 KB)varies

Until it is used, hyperframes costs about 8.8× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 150 skills from nexu-io/open-design would load 9,514 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.
  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • HyperFrames
  • OpenDesign integration (load-bearing for this surface)
  • Approach
  • Visual Identity Gate
  • Layout Before Animation
  • The process
  • Example
  • When elements share space across time
  • What counts as intentional overlap
  • Data Attributes
  • All Clips
  • Composition Clips
  • Composition Structure
  • Video and Audio
  • Timeline Contract
  • Rules (Non-Negotiable)
  • Scene Transitions (Non-Negotiable)
  • Animation Guardrails
  • Typography and Assets
  • Editing Existing Compositions
  • Output Checklist
  • Quality Checks
  • Visual Inspect
  • Contrast

More skills from nexu-io/open-design

All skills in this repo
  1. article-magazinenexu-io/open-design

    Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.

    103k30 tok idle · 207 in use
  2. aster-ateliernexu-io/open-design

    Use this template when the user wants an artistic creative-studio website with classical imagery, cobalt skies, elegant serif typography and cinematic scrolling.

    103k31 tok idle · 539 in use
  3. audio-jinglenexu-io/open-design

    Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

    103k78 tok idle · 942 in use
  4. blog-postnexu-io/open-design

    A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

    103k57 tok idle · 570 in use
  5. build-testnexu-io/open-design

    Run the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.

    103k31 tok idle · 607 in use
  6. card-twitternexu-io/open-design

    Twitter quote or data card designed to pair with a post.

    103k15 tok idle · 151 in use
  7. card-xiaohongshunexu-io/open-design

    Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.

    103k24 tok idle · 266 in use
  8. clinical-case-reportnexu-io/open-design

    Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

    103k73 tok idle · 1,806 in use