A complete course on the Skill HyperFrames: narrated, animated explanatory videos, rendered locally — no API key. From the concept of a Skill to the final MP4 in 16:9 and 9:16. This material itself was born from a video made with a Skill.
Illustrative diagram of the HyperFrames pipeline
From the Skill concept to your video library running on Reels.
What a Skill is, the SKILL.md file, name + description, progressive disclosure, and where they live. The video content, in writing.
4 modules · beginner →How to create a video in HyperFrames: setup, script, local TTS narration, scene composition, GSAP, lint, inspect, and render in both formats.
5 modules · hands-on →How the video-explicativo skill was built and what it does: file structure, house style, the build-index.mjs generator, and the pitfalls that were addressed.
4 modules · advanced →Where to use the tool: YouTube, Shorts/Reels, product onboarding, lessons, launches. Includes a library of ready-to-paste prompts for Claude Code.
3 practical modules →Claude writes the script in 6–9 scenes, generates the narration in PT-BR with local TTS (Kokoro), and measures the actual durations.
A generator builds each scene in HTML + GSAP, with audio and animation timed by the same array of timestamps. Premium dark, amber accent.
HyperFrames runs headless Chrome + FFmpeg and exports the video in 16:9 (YouTube) and 9:16 (Shorts/Reels). No cloud, no API.
It's just a folder with a SKILL.md, three scripts and three references. Put them in ~/.claude/skills/ (global) or .claude/skills/ (project) and ask Claude Code for a video. This entire course explains each of its files.