A complete course on the Skill HyperFrames: narrated explainer videos, animated and rendered locally — no API key. From the Skill concept to the final MP4 in 16:9 and 9:16. This material itself grew out of 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 · basic →How to create a video in HyperFrames: setup, script, local TTS narration, scene composition, GSAP, lint, inspect, and render in both formats.
5 modules · practical →How the video-explicativo skill was built and what it does: file structure, house style, the build-index.mjs generator, and the pitfalls addressed.
4 modules · advanced →Where to use the tool: YouTube, Shorts/Reels, product onboarding, lessons, launches. With a library of prompts ready to paste into Claude Code.
3 modules · hands-on →Claude writes the script in 6–9 scenes, generates the narration in PT-BR using 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 times. 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. Place in ~/.claude/skills/ (global) or .claude/skills/ (project) and ask Claude Code for a video. This entire course explains each of its files.