The HyperFrames slideshow skill: build live presentation decks with your coding agent

Source: heygen-com/hyperframes · Maintainer: HeyGen · License: Apache-2.0 · Checked: 23 October 2026

What is the HyperFrames slideshow skill?

The slideshow skill teaches a coding agent to build a presentation you run live in the browser: slides, step-by-step reveals, optional detail slides behind clickable hotspots, and a presenter view with speaker notes. It is for people who want their agent to turn an outline, document or existing web page into a polished, animated deck instead of a video.

It ships in HeyGen's heygen-com/hyperframes repo alongside the other HyperFrames skills. The SKILL.md description reads: "Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by hyperframes present - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video."

The repo is very active (pushed 23 October 2026) with about 70,000 GitHub stars, and the skill's skills.sh page lists about 407,000 installs (snapshot, 23 October 2026).

What is HyperFrames?

The skill only makes sense once you know the framework under it. The README describes HyperFrames as "an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos." Its tagline is "Write HTML. Render video. Built for agents."

A HyperFrames video is an HTML file. Elements carry data attributes for timing and tracks (data-start, data-duration, data-track-index), and animation comes from seekable libraries such as GSAP, CSS animations, Lottie, Three.js, Anime.js or WAAPI. The renderer seeks each frame in headless Chrome and encodes it with FFmpeg, so the same input always gives the same video. There is no build step: an index.html composition plays as-is in a browser.

The README positions it as inspired by Remotion, with one main difference: Remotion uses React components, while HyperFrames uses plain HTML that agents already write well. It is Apache 2.0 licensed "with no per-render fees or commercial-use thresholds," and HeyGen uses it in production.

HyperFrames ships seven published skills. The core set (/hyperframes, /hyperframes-cli, /hyperframes-registry, /media-use) covers making videos. Three more install on demand: /figma, /remotion-to-hyperframes and /slideshow.

What does the slideshow skill do?

The skill says a slideshow "is a normal composition (the /hyperframes contract applies) plus one JSON island that says which scenes are slides and how they connect." The deliverable is "a running deck, not an MP4."

What changes from a video project:

• Each slide is a top-level scene with its own data-composition-id, data-start, data-duration and size. There is no master composition wrapping them.
• One JSON island near the top of the body, in a <script type="application/hyperframes-slideshow+json"> tag, lists the slides, their speaker notes, fragment times and hotspots. It must be written in the HTML, never generated by script, because present reads the file statically.
• Fragments are reveal points given as absolute timeline times. Navigation seeks rather than plays, so every reveal state must look right when the timeline jumps straight to it.
• Branch slides live in a separate slideSequences list. A hotspot jumps to a branch, and Back returns to the slide that held the hotspot.
• Readable text must be at least 40 px at 1920 by 1080. Before hand-building a visual, the agent searches the HyperFrames catalog with npx hyperframes catalog --query.

Porting a page. When you hand it an existing web page, the skill keeps the source's look, motion and media, turns scroll-driven movement into camera moves between slides, keeps screenshots and charts uncropped, and wires every copied video and audio element with timing attributes.

What is in the folder. Two files: SKILL.md and references/standalone-harness.md, a long workaround guide for decks opened from the bare player bundle without present. The harness file calls itself "a temporary workaround" until an engine-hosted present mode ships.

How do you install the HyperFrames slideshow skill?

The slideshow skill builds on the core /hyperframes skill, so install the core set too. The HyperFrames skills guide documents these routes.

Claude Code plugin (the README's route for Claude Code). The plugin bundles the full skill catalog, slideshow included, and updates through Claude Code's plugin manager:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Standalone skills. Run the interactive installer and pick Core Skills, then add slideshow:

npx skills add heygen-com/hyperframes
npx skills add heygen-com/hyperframes --skill slideshow

The skills.sh page shows the same single-skill install as npx skills add https://github.com/heygen-com/hyperframes --skill slideshow. The skills CLI needs Node.js 22.20 or later and takes -g to install for all projects; for Claude Code, skills land in .claude/skills/ or ~/.claude/skills/.

From the HyperFrames CLI. The README notes that skills add reads the skills.sh copy, "which can lag main by hours." To install or refresh from the current main branch:

npx hyperframes skills update
npx hyperframes skills update slideshow

The README says the skills work with Claude Code, Codex, Cursor, Gemini CLI and other agents that support skills. See Codex skills and Cursor skills for where each agent reads skill folders. Start a fresh agent session after installing.

How do you use it?

Give the agent your material and the decision the deck should support. The presentation guide says the agent confirms the audience, main outcome and whether you need reveals, branches or notes, so you don't need to plan every slide. Prompts to try:

• "Using /hyperframes, turn this product strategy outline into a presentation for our leadership review: [paste outline]" (the docs' own example).
• "Make a 10-slide pitch deck from this one-pager. Reveal each metric on its own click and put speaker notes on every slide."
• "Turn our launch landing page at ./site into a slideshow. Keep its fonts, colours and animations."
• "Build a quarterly review deck. Keep the main story to 8 slides and put the regional breakdowns behind hotspots."

Present it. When the deck passes npx hyperframes check --json, serve it:

npx hyperframes present <project-dir>

Open the printed URL and "Click Present, or press P, to open the audience tab." The built-in component handles Prev and Next, the slide counter, mute, fullscreen, swipe, hotspots and editable presenter notes, and stops media when a slide is left. For calls, share the audience tab in Google Meet; in Zoom, drag it into its own window and share that, because a fully covered window freezes.

Requirements. The README lists Node.js 22+ and FFmpeg for the HyperFrames CLI. The CLI itself runs through npx, so it needs no global install.

Tips and limits

• Never render a deck to MP4. Both the SKILL.md and the docs warn that hyperframes render keeps only the first scene and truncates silently. Use hyperframes snapshot for per-slide stills.
• No linear video export yet. The docs say a slideshow "cannot be exported as one linear MP4 yet." If it should play without a presenter, ask for a normal HyperFrames video instead.
• Not a PowerPoint file. The output is an HTML deck. If you need a .pptx to hand to a colleague, use a PowerPoint skill.
• Reserved fields. The ttsScript, ttsAudioUrl and ttsDurationMs fields in the island are "reserved and not wired yet."
• Hidden slides can swallow clicks unless they have opacity: 0, visibility: hidden and pointer-events: none together, which the skill tells the agent to set.
• License. Apache 2.0.

Save it in your Kipt library

Kipt keeps prompts and skills as Markdown in your own private GitHub repo. In Kipt, open Skills and paste the skill's GitHub folder link into the import box; Kipt reads the SKILL.md and its files, and for a repo with many skills like this one it shows a list to pick from. You can also drop the folder or a .zip. Your saved skills install into Claude Code or Codex with one command. Kipt is not affiliated with HeyGen.

npx skills add https://github.com/<you>/<repo>.git --all -g

Similar skills

• pptx skill: Anthropic's skill for creating and editing PowerPoint files.
• design-taste-frontend skill: art direction for web pages, useful when a deck starts life as a landing page.
• Best Claude Code skills: more skills worth installing.