slideshow

Author HyperFrames slideshow decks with slides, fragments, branching, and presenter mode.

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/Sergiotsk/Interstellar --skill slideshow-sergiotsk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slideshow
Source: https://github.com/Sergiotsk/Interstellar/tree/main/.agents/skills/slideshow
Command: npx skills add https://github.com/Sergiotsk/Interstellar --skill slideshow-sergiotsk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a presentation idea or an existing web page into a navigable, interactive deck requires coordinating slide scenes, reveal timing, branching navigation, and presenter tooling by hand. This Skill provides the authoring contract for building HyperFrames slideshows that run as live decks rather than linear videos. ## Core Features & Use Cases - Deck authoring with a JSON island: Declare slides, speaker notes, fragment hold-points, hotspots, and branch sequences in a single application/hyperframes-slideshow+json manifest matched to scene compositions. - Fragments and branching: Reveal content step-by-step within a slide and let audiences jump into off-line deep-dive sequences via clickable hotspots with breadcrumb navigation. - Presenter mode and page conversion: Built-in presenter view with editable notes, audience tab sync over BroadcastChannel, and rules for porting an existing page's design, media behavior, and scroll-driven motion into slide transitions. - Use Case: Convert a startup landing page into a pitch deck where each section becomes a slide, key stats reveal as fragments, and a hotspot opens a market-sizing branch, then present it over Google Meet with speaker notes. ## Quick Start Ask the AI to turn the attached page or outline into a HyperFrames slideshow deck with fragments and presenter notes, then serve it with hyperframes present.

Frequently Asked Questions about slideshow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a HyperFrames slideshow deck?▼

Declare each slide as a scene with data-composition-id, data-start, and data-duration, then add one application/hyperframes-slideshow+json island listing slides, notes, fragments, and hotspots. Serve the result with hyperframes present to run the navigable deck.

How do slide fragments work in a HyperFrames deck?▼

Fragments are absolute composition-timeline times within a slide's start and end range where the controller holds a reveal state. Pressing Next seeks deterministically to each fragment time before advancing to the following slide.

Can I convert an existing web page into a slideshow?▼

Yes, the skill includes porting rules that preserve the source page's visual design, interactions, media behavior, and scroll-driven motion. Scroll-based transitions are re-hosted as camera moves between slide focal points rather than literal page scrolling.

Can I render a HyperFrames slideshow to MP4 video?▼

No, running hyperframes render on a deck resolves only the first composition and emits a silently truncated MP4. Supported outputs are the live present deck and per-slide snapshot stills until a linear main-line export ships.

How does presenter mode sync with an audience view?▼

Presenter mode opens an audience tab via window.open with mode=audience, and the two tabs sync slide position and media state over a BroadcastChannel. Audience playback starts muted first because browser autoplay policy blocks transferring user activation across tabs.

Why is my slideshow branch slide appearing in the main deck?▼

Branch scenes must appear only inside a slideSequences entry in the island, never in the top-level slides array. The lint rule flags any scene ID that overlaps between the main line and branch sequences.