hyperframes

Extract structured metadata from SKILL.md frontmatter and output YAML.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/hanzoai/video --skill hyperframes-hanzoai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/hanzoai/video/tree/main/.agents/skills/hyperframes
Command: npx skills add https://github.com/hanzoai/video --skill hyperframes-hanzoai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames provides a deterministic, agent-guided HTML-based video production workflow by defining scenes as HTML/CSS/GSAP timelines, enabling reproducible renders and automation for complex video productions.

Core Features & Use Cases

  • Deterministic, timeline-driven video compositions expressed in HTML with data-driven timing and transitions.
  • Support for sub-compositions, references, and asset management, enabling scalable, modular video production pipelines.
  • Use cases include marketing openers, captions/subtitles workflows, narration and TTS, and data-driven visual histories that are reproducible across environments.

Quick Start

Author a first composition by placing an index.html with scene containers and a SKILL.md manifest in a single skill directory, then run the agent to load and render the piece.

Frequently Asked Questions about hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate HTML video production with reproducible renders?

Automate HTML video production by defining scenes as HTML/CSS/GSAP timelines with data-driven timing. HyperFrames provides a deterministic, agent-guided workflow that enables reproducible renders for complex video compositions across environments.

What is the best way to structure modular video production pipelines for marketing openers?

Structure modular video production pipelines by authoring an index.html with scene containers and a SKILL.md manifest in a single directory. This approach supports sub-compositions, references, and asset management for scalable marketing openers.

How does an agent extract YAML metadata from SKILL.md frontmatter for skill discovery?

Agent-based metadata extraction locates SKILL.md frontmatter to catalog Skill units, identifying mandatory name and description fields alongside optional resources. It outputs a structured YAML payload containing tagline, complexity, category, keywords, and dependency information.

Do I need sharp or @hyperframes/producer to manage assets in timeline-driven video compositions?

You need sharp and @hyperframes/producer dependencies to process timeline-driven video compositions. These dependencies support deterministic HTML-based rendering, enabling asset management and reproducible visual histories across different rendering environments.

Can I use data-driven timing and transitions for captions and TTS narration workflows?

You can use data-driven timing and transitions for captions and TTS narration workflows by expressing compositions in HTML. This deterministic timeline approach supports sub-compositions and references, ensuring reproducible renders for narration and subtitle pipelines.

Why does my HTML video composition fail when missing mandatory frontmatter in SKILL.md?

HTML video composition discovery fails when SKILL.md lacks mandatory frontmatter fields because the agent requires name and description metadata to catalog valid Skills. Optional resources under scripts, references, or assets directories are also parsed during extraction.