Sign in
Explore
Skills · SkillImages & VideoWeb & UIMotion graphicsReviewedRuns shell commands

slideshow

Builds a HyperFrames slideshow to present live, with fragment reveals, branching hotspots and presenter notes, or turns an existing page into one.

View on GitHub
Kind
Skill
Works with
Claude Code, Gemini / Antigravity, Any agent
Source
HyperFrames (HeyGen) @ 7c5c1ce849a6
Path
skills/slideshow/SKILL.md
Jobs
Implementation, UI/UX work
Topics
Motion graphics

Credit

Made by
heygen-com
Original
github.com/heygen-com/hyperframes/blob/7c5c1ce849a6b479f957b6…
License
Apache-2.0

Listed by Skill Manifest; not made by us.

InstallInstall it with npx.
npx skills add heygen-com/hyperframes
Install factsScanned 2 Nov 2026
Adds
  • .claude/skills/slideshow/ (the skill folder)
  • 2 file(s) the skill refers to
Runs scripts
Yes
  • Marked in the catalog record
Uses the network
None found
Needs secrets
None found
Source revision
7c5c1ce849a6
Licence
Apache-2.0
Last activity
2 Nov 2026
Review
Reviewed

Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.

  • Only the main file is read; other files in the folder are not scanned
**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# HyperFrames slideshow

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** in the composition file: `data-composition-id`, `data-start`, `data-duration`, `data-label`, `data-width`, `data-height`. There is no master root composition wrapping them.
- **One island per composition**, near the top of `<body>`, written in the HTML (never generated by script; `present` reads the file statically):

```html
<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      { "sceneId": "hook", "notes": "Pause on the number." },
      {
        "sceneId": "problem",
        "fragments": [11.0, 15.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "Where does $40B come from?",
            "target": "market-detail",
…