Agent skill · creative production · onewave-ai
hyperframes-explainer-builder
Turn a website URL, product docs, or a founder's rambling description into a tight 60-90 second explainer video built in HyperFrames -- problem/solution narrative, animated product walkthrough scenes, captions, and voiceover, ready for the homepage hero, sales emails, and onboarding.
Why this skill is useful
Adds a structured process for creating explainer videos with specific narrative techniques and composition rules that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
HyperFrames Explainer Builder Every product needs the 75-second answer to "what is this and why do I care," and most teams either skip it or pay an agency five figures for it. This skill directs a real, renderable explainer from whatever source material exists. It owns the narrative and assembly; composition mechanics, captions, transitions, and TTS live in the hyperframes skill (hyperframes-cli for init/lint/preview/render, hyperframes-media for voiceover, website-to-hyperframes when the source is a site to visually mine). Step 1 -- Extract the story From the URL (fetch and read it), docs, or interview: who it is for, the painful before-state, what the product does (in outcomes, not features), the 2-3 capabilities that prove it, and the action to take. If the source material buries the value proposition in jargon, the script fixes that -- write what the customer would say, not what the About page says. Step 2 -- Write the script The explainer arc, ~150-190 words for 60-90 seconds of comfortable VO: 1. Cold open (0-5s) -- the problem, stated the way the viewer complains about it. No logo intro; nobody waits through a logo. 2. The turn (5-15s) -- product named once, positioned as the answer in one sentence. 3. How it works (15-55s) -- three beats maximum, each one capability shown as an outcome ("invoices chase themselves") with its walkthrough scene. 4. Proof (55-70s) -- one number or one quote, not a wall. 5. CTA (70-85s) -- the single action, spoken and on-screen. Every sentence read aloud before it ships; explainer VO exposes written-word clunk instantly. Step 3 -- Build the composition Scene per beat: animated type and simple diagram motion for problem/turn; for "how it works," product-UI scenes -- rebuilt clean in HTML (crisp, brand-consistent, always legible) or screenshots panned with intent, whichever the source supports better. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/hyperframes-explainer-builder