Questions? hello@viberation.devGet supportBlogDocsChangelog

Colour mode

XGitHub
Get started

HyperFrames Slideshow

Skills#design

Build presentations and pitch decks as interactive slides.

From HeyGen's HyperFrames. Your agent authors a presentation or pitch deck with discrete slides, step-by-step reveals and clickable navigation. Needs the HyperFrames CLI.

Install this skill

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

Runs the open-source skills CLI in your own terminal. It asks which agents to add the skill to. Read what it tells your agent to do before you install it.

Download skill (.zip)

Install for your agent

  • Claude Code

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask Claude Code to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for Claude Code.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .claude/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .claude/skills/ for this project, or ~/.claude/skills/ for all your projects.

    Picked up in the current session, no restart needed.

    Claude Code skills docs
  • Claude.aiNot supported

    This skill is marked as not working in Claude.ai, usually because it needs a terminal or files that Claude.ai does not have.

    Claude.ai skills docs
  • ChatGPTNot supported

    This skill is marked as not working in ChatGPT, usually because it needs a terminal or files that ChatGPT does not have.

    ChatGPT skills docs
  • Codex

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask Codex to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for Codex.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.agents/skills/ for all your projects.

    Restart Codex if the skill does not show up.

    Codex skills docs
  • Cursor

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask Cursor to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for Cursor.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .cursor/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .cursor/skills/ for this project, or ~/.cursor/skills/ for all your projects.

    Run it by typing / and the skill name in chat.

    Cursor skills docs
  • GitHub Copilot

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask GitHub Copilot to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for GitHub Copilot.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .github/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .github/skills/ for this project, or ~/.copilot/skills/ for all your projects.

    Works in Copilot CLI, the cloud agent and agent mode in VS Code and JetBrains.

    GitHub Copilot skills docs
  • Antigravity

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask Antigravity to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for Antigravity.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.gemini/config/skills/ for all your projects.

    Antigravity skills docs
  • Gemini CLI

    Run this in your project

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

    Add -g to install it for every project instead.

    Or ask Gemini CLI to do it

    Install the "slideshow" skill from https://github.com/heygen-com/hyperframes for Gemini CLI.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .gemini/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .gemini/skills/ for this project, or ~/.gemini/skills/ for all your projects.

    Run /skills to check it was found.

    Gemini CLI skills docs
Installs
184.4K via skills.sh
GitHub
49.7K stars ↗
Last updated
14 Sept 2026
Licence
Apache-2.0

Security checks

Run by independent scanners and published on skills.sh. Their results, not a Viberation review.

  • Gen Agent Trust Hub Pass

    The skill provides a framework for authoring interactive slideshows using the HyperFrames system. It includes instructions for scene management, inter-tab synchronization, and local storage of presenter notes. External resources are fetched from well-known and trusted providers.

    10 Sept 2026

  • Socket Pass

    No alerts

    10 Sept 2026

  • Snyk Pass

    Risk: LOW · No issues

    10 Sept 2026
What's inside (2 files)
  • references/standalone-harness.md44.3K chars
  • SKILL.md33.6K chars

SKILL.md, first part. Shown as plain text.

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

> **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update slideshow`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.

> **figma source**: If the deck's content or storyboard comes from a figma.com URL, run `/figma` first — asset export, brand tokens, and storyboard reconstruction if the source is a strip of scene frames — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.

# Slideshow authoring contract

A HyperFrames slideshow is a normal HyperFrames composition — scenes, clips, GSAP timelines — with one extra ingredient: a **JSON island** that declares which scenes are slides and how they connect. The player's `SlideshowController` reads the island and turns the continuous GSAP timeline into a discrete, navigable deck.

**Read `/hyperframes-core` first** for the base composition contract (clips, tracks, `data-*` attributes, determinism rules). This skill covers only what is new: the island schema, slide writing rules, fragments, branching, validation, and the wrapping component.

## Output — a navigable deck, not a linear MP4

A slideshow's output is the **running deck**: serve it with `hyperframes present <project-dir>` (or Studio present mode) — the player's `SlideshowController` reads the island and drives navigation, fragments, branching, and presenter mode. See **Presenting and handoff** below.

**Do not `hyperframes render` a slideshow into a single MP4.** A deck is authored as several top-level scene compositions (one `data-composition-id` per slide) with **no master-root composition** wrapping them, so `render` resolves only the **first** composition and emits a **silently truncated** MP4 (e.g. 6s of a 40-second deck). A linear main-line export (main slides only, branch sequences excluded) is **deferred** — until it ships, the supported outputs are the live `present` deck and per-slide `snapshot` stills. If a user needs a linear MP4 today, surface this limitation rather than pointing `render` at the deck.

## Intent confirmation

If the user explicitly asks for a slideshow, slide show, or HyperFrames slideshow, proceed with this skill. When the request arrived through `/hyperframes`, the intent layer's triage owns this confirmation — routed here means already confirmed, so don't re-ask; the layer's run-shape questions don't apply (the deliverable is a deck, not a rendered video). A `BRIEF.md`, when present, carries the confirmed intent — read it.

If the skill triggered from an adjacent request such as "presentation", "pitch deck", "deck", "interactive deck", or "convert this page", pause before authoring and frame the choice before asking for confirmation. Briefly explain that a HyperFrames slideshow means a runnable deck with discrete slides, built-in navigation and presenter mode, editable speaker notes, shared media handling, and validation before handoff. For source-page conversions, also mention that the goal is to preserve the original page's visual design, interactions, motion, and media behavior while translating page movement into slide-to-slide transitions.

Then ask a short confirmation question:

> Do you want this as a HyperFrames slideshow?

Use a yes/no choice UI when the environment provides one; otherwise ask the question in plain text.

D

Key info

Pricing
Open source
Category
Skills

More in Skills