How to use the HyperFrames Video Builder agent skill

What the hyperframes skill lets the agent do

A HyperFrames composition is an HTML file. Timing is set with data-* attributes, motion is driven by a GSAP animation timeline, and appearance is controlled with CSS. The framework handles clip visibility, media playback and timeline sync, so the agent can focus on the content and the motion.

Once the skill is installed, the agent can produce title cards, overlays, captions synced to audio, text-to-speech narration, music-reactive visuals, animated text highlights and transitions between scenes, then render the result to a video file.

• Title cards and overlays
• Captions or subtitles synced to audio
• Text-to-speech narration
• Audio-reactive animation such as beat sync, glow and pulse
• Animated highlights: marker sweeps, hand-drawn circles, burst lines, scribble, sketchout
• Scene transitions: crossfades, wipes, reveals, shader transitions

Install the hyperframes skill

You can install the skill in either of two ways. Download the ZIP file from the skill's page in this directory and unzip it. Then place the folder in one of these locations:

• Personal skills folder: ~/.claude/skills/
• Project skills folder: .claude/skills/ inside your project
• Or, in the Claude apps, open Settings, then Capabilities, then Skills, and upload the ZIP there

Check what the skill needs before you start

The skill relies on Node.js and the HyperFrames CLI (hyperframes). Rendering uses headless Chrome through Puppeteer, which launches a browser in the background. Generated HTML loads GSAP from a CDN, so the machine needs network access. Text-to-speech and transcription are provided by the HyperFrames CLI.

If you use the skill inside the Open Design app, the app supplies its own runtime, environment variables and binaries, and renders through its daemon.

• Node.js and the HyperFrames CLI, invoked through the Open Design runtime or npx
• Headless Chrome / Puppeteer for rendering
• GSAP loaded from a CDN in the generated HTML
• Optional TTS and transcription from the HyperFrames CLI

Ask for video work in plain language

The skill triggers on requests that mention video built from HTML, compositions, captions, TTS video, kinetic typography or related terms. Describe the result you want, the length, the mood and any constraints. The example prompt that ships with the skill asks for a 5-second product reveal on a clean cream surface with soft side light, a slow camera push-in, restrained motion and no text overlays.

For more involved work, name the feature: say you want captions synced to a narration file, or a beat-synced glow driven by a music track, or a crossfade between two scenes.

• Make a 5-second product reveal on a plain background with slow motion and no text
• Add synced captions to this narration audio and render an mp4
• Generate a 10-second voiceover from this script and build a title card over it
• Make the logo pulse on the beats of this track
• Add a marker-sweep highlight under the key phrase, then crossfade to the next scene

Quick walkthrough of a short video

For most short requests the agent starts from a ready-made scaffold instead of writing everything from scratch. Inside Open Design, the scaffold path creates a hidden cache folder for the source files, so only the rendered .mp4 appears in the project root. The agent edits the index.html file, changing the duration if needed, the colours, and adding clips and matching GSAP tweens. It then checks the composition and sends the render to the Open Design daemon.

Outside Open Design, the skill covers the same workflow using the HyperFrames CLI commands init, lint, preview, render, transcribe and tts. Those commands are documented in the separate hyperframes-cli skill.

• Pick a palette and typefaces before writing HTML
• Set the root duration and the clip timings with data attributes
• Add GSAP tweens to the timeline
• Lint the composition, then render

Safety notes: scripts and network

This skill runs scripts and uses the network. Rendering launches a headless browser, and generated pages load GSAP from a CDN. Text-to-speech and transcription also run through the CLI. Do not use the skill in environments where running Chrome-based rendering or executing bundled tooling is not permitted.

On macOS, some agent shells wrap commands in a sandbox that can cause Chrome to hang during frame capture. The Open Design workflow therefore sends the render to the daemon, which runs outside that sandbox. If you run renders yourself and they stall, use a path that runs the render outside the sandbox.

• Review the scripts in the skill folder before you install it
• Expect headless Chrome to start during render
• Expect network requests for GSAP and any TTS service the CLI uses