slideshowby HeyGen

Slideshow Skill.

A Claude Code and Codex skill for PPT and slide decks: interactive HyperFrames slideshows with fragments, branching, and presenter mode.

Presentations
HTML slides

Download OpenDesign View usage guide

heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md

--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages

Front matter and section headings read from the upstream file on 2026-09-14 · 33,631 characters in full

01 What it does

What the slideshow Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Authors HyperFrames slideshows — presentations, pitch decks, or interactive decks with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes. Also converts existing pages into decks. Output is a navigable deck served with hyperframes present, not a rendered MP4. Uses a JSON island script block to declare slides and connections. Supports fragments (reveal hold-points within a slide), branching via hotspots to off-line sequences, and presenter mode with editable notes synced over BroadcastChannel.

Requires confirmation before authoring unless explicitly requested. Enforces strict slide-writing rules: headlines as complete-sentence claims, one idea per slide, bottom-up market sizing, 30pt minimum font. Searches the live catalog before hand-building any named visual. When porting source pages, preserves original design, motion, interactions, and media behavior while translating page movement into slide-to-slide transitions.

What it produces

A HyperFrames composition with scenes, clips, GSAP timelines, and a JSON island manifest
A navigable deck served with hyperframes present, including presenter mode with speaker notes

See the example prompt ↗

How It Works

01
Confirm Intent
If the user explicitly asks for a slideshow, proceed; otherwise pause and explain what a HyperFrames slideshow means (runnable deck, navigation, presenter mode) before asking for confirmation.
02
Declare Scenes with Timing Attributes
Every slide is backed by a scene. Declare each with data-composition-id, data-start, data-duration, and data-label.
03
Add the JSON Island
Add exactly one script block with type application/hyperframes-slideshow+json to the composition HTML.
04
Write Slides Following Hard Rules
Headlines must be complete-sentence claims. One idea plus one visual per slide. Lead with the punchline. Bottom-up market sizing only. Font minimum 30pt equivalent.
05
Search Catalog Before Building Visuals
For every look, effect, chart, or transition a slide needs, run npx hyperframes catalog --query in plain English and read the top results before authoring.

02 Find your fit

When to Use the slideshow Skill

Use the slideshow skill in Claude Code or Codex when the job is PPT and slide decks of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Presentations, pitch decks, or interactive decks with discrete slides
Decks with fragment reveals, branching, hotspot navigation, and presenter mode
Converting an existing page into a deck

Know the Boundaries

Requests where slideshow intent is unclear — must confirm before authoring
Text smaller than 40px that the audience must read

What to Provide

Figma source URL (optional)If the deck's content or storyboard comes from a figma.com URL, run /figma first for asset export, brand tokens, and storyboard reconstruction before building.

03 Inside the skill

Rules the slideshow Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

One Idea Plus One Visual per Slide
If you are tempted to add a second bullet cluster or a second chart, split the slide.
Font Minimum 30pt Equivalent
At 1920×1080, a headline is 72–96px; body copy is 48px. Never go below 40px for any text the audience must read.
Bottom-up Market Sizing Only
Never write $50B TAM without showing the math. Build from unit economics up: accounts × ACV, or transactions × take-rate.
Search Catalog Before hand-building
For every named visual a slide needs, run npx hyperframes catalog --query and read the top results before authoring. A real block beats a simplified approximation.
Do Not Render Slideshows to MP4
A deck is authored as several top-level scene compositions with no master-root composition, so render resolves only the first composition and emits a silently truncated MP4.
Fragment Times Are Absolute composition-timeline Positions
Fragment times use the same coordinate space as data-start, not offsets relative to the scene's start. They must fall within the slide's start, end range inclusive.
Preserve Source Page Fidelity When Porting
Preserve the original page's visual design, motion language, interactive behavior, media behavior, and presentation affordances as closely as practical.

04 Put it to work

Install slideshow in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add slideshow to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

Generic skills CLI form for skills/slideshow/SKILL.md; the repository may document its own path.

Give the Skill a First PPT and Slide Decks Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Fix the file and rerun until lint reports 0 error(s) and validation reports no runtime errors
Verify every slide.sceneId resolves to an existing scene by data-composition-id
Verify every hotspot.target references a defined slideSequence id
Verify fragment times fall within each slide's start, end range

In OpenDesign import slideshow from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Skill file: skills/slideshow/SKILL.md Content checksum recorded at verification; commit 558c11b
License: Apache-2.0 From LICENSE.
Repository stars: 49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for slideshow.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Slideshow authoring contractA HyperFrames slideshow is a normal composition plus a JSON island declaring slides and connections
Output — a navigable deck, not a linear MP4Serve with hyperframes present; do not render to MP4 as it truncates to first composition
Intent confirmationConfirm before authoring unless user explicitly asked for a slideshow; routed intent is pre-confirmed
The two piecesScenes declared with data-composition-id and timing; JSON island with slides and slideSequences arrays
SchemaSlideshowManifest, SlideRef, SlideHotspot, and SlideSequence field definitions and requirements
Slide writing rulesHeadlines as complete sentences, one idea per slide, bottom-up sizing, 30pt minimum, catalog search first
Porting source pagesPreserve original design, motion, interactions, media; translate page movement to slide transitions; wire media events
Fragments: reveal hold-points within a slideAbsolute timeline times within slide range; controller seeks to each fragment on Next; no playback between
Branching: hotspots and slide sequencesBranch slides excluded from main line; hotspot click pushes nav stack; back returns to parent
Worked example: 3-slide deck with fragments and a branchComplete HTML skeleton with scenes, JSON island, GSAP timeline, and a branch sequence
Wrapping componentWrap in hyperframes-slideshow; provides nav, keyboard, touch, hotspots; Present opens audience tab; global mute
Running a slideshow standalone (interim)Standalone demos require workarounds until engine-hosted preview ships; see references/standalone-harness.md

The Skill's Own Description

“Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.”

Front-matter description from SKILL.md. The full file is about 33,631 characters. Read the full file on GitHub.

06 Before you install

Questions About the slideshow Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What are fragments and how do they work?

A fragment is an absolute composition-timeline time in seconds within a slide's start, end range where the controller holds a reveal state.

The player enters a fragmented slide at fragments[0], then seeks to each subsequent fragment on Next. After the last fragment, Next advances to the next slide. Navigation is seek-driven, not play-driven.

Slideshow

Run slideshow on a Real PPT and Slide Decks Task.

Download OpenDesign, import slideshow from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills