102.7K+Download
Skip to the usage guide
slideshowby HeyGen

Slideshow Skill.

A Claude Code and Codex skill for interactive HyperFrames decks with fragments, branching and presenter mode—not PowerPoint or linear video export.

  • Presentations
  • HTML slides
Download OpenDesignView 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 stored locally, with presenter/audience navigation synchronized 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

  1. 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.

  2. 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.

  3. 03
    Add the JSON Island

    Add exactly one script block with type application/hyperframes-slideshow+json to the composition HTML.

  4. 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.

  5. 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.

  6. 06
    Validate the Deck and Handoff

    Run lint and runtime checks, treating contract errors as blockers even if a process exits successfully. Test navigation, branches, presenter/audience behavior and media at the actual local URL before handing it over.

02 Find your fit

When to Use the slideshow Skill

Choose this skill for a runnable browser deck, including page-to-slideshow conversions. Its captured contract does not deliver a PPTX or a linear MP4.

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
  • Export and host limitsThe reviewed source supports the live present deck and per-slide snapshots, not a main-line MP4. It also describes interim standalone workarounds; check the installed player and test the actual handoff URL rather than assuming every hosting path works.

What to Provide

  • Confirmed deck brief and evidenceProvide the audience, slide narrative, approved claims and numbers, media and speaker notes. For a page conversion, include the source page and which interactions must survive.
  • HyperFrames tools and companion skillsKeep the HyperFrames core composition instructions available. The source asks for user confirmation before its skill-update command; installing this entry alone does not supply the runtime or bypass that choice.
  • 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.

  1. One Idea Plus One Visual per Slide

    If you are tempted to add a second bullet cluster or a second chart, split the slide.

  2. 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.

  3. Bottom-up Market Sizing Only

    Never write $50B TAM without showing the math. Build from unit economics up: accounts × ACV, or transactions × take-rate.

  4. 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.

  5. 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.

  6. 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.

  7. 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 Runnable Deck Brief

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

Starter prompt
Create a HyperFrames slideshow from the attached approved pitch outline and evidence table. Use complete-sentence headlines, one idea per slide and speaker notes. Reveal the supplied problem points as fragments, and add a branch from the market claim to our actual calculation. Do not invent statistics or results. Deliver a working presenter URL, test branch return and audience navigation, and explain the captured video-export limitation.

Editorial example based on the reviewed source; not an executed task or an upstream quotation.

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
  • Verify the root entrypoint or supplied server URL works, presenter notes remain private to the presenter, branches return correctly, and slide-exit media stops.

OpenDesign provides a local workspace for coding agents. Check the installed version for skill availability and setup; this source review does not verify bundled skills or include external tools and services.

Download OpenDesignRead 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

  1. Slideshow authoring contractA HyperFrames slideshow is a normal composition plus a JSON island declaring slides and connections
  2. Output — a navigable deck, not a linear MP4Serve with hyperframes present; do not render to MP4 as it truncates to first composition
  3. Intent confirmationConfirm before authoring unless user explicitly asked for a slideshow; routed intent is pre-confirmed
  4. The two piecesScenes declared with data-composition-id and timing; JSON island with slides and slideSequences arrays
  5. SchemaSlideshowManifest, SlideRef, SlideHotspot, and SlideSequence field definitions and requirements
  6. Slide writing rulesHeadlines as complete sentences, one idea per slide, bottom-up sizing, 30pt minimum, catalog search first
  7. Porting source pagesPreserve original design, motion, interactions, media; translate page movement to slide transitions; wire media events
  8. Fragments: reveal hold-points within a slideAbsolute timeline times within slide range; controller seeks to each fragment on Next; no playback between
  9. Branching: hotspots and slide sequencesBranch slides excluded from main line; hotspot click pushes nav stack; back returns to parent
  10. Worked example: 3-slide deck with fragments and a branchComplete HTML skeleton with scenes, JSON island, GSAP timeline, and a branch sequence
  11. Wrapping componentWrap in hyperframes-slideshow; provides nav, keyboard, touch, hotspots; Present opens audience tab; global mute
  12. 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 OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill slideshow