slideshow

Build interactive HyperFrames slideshows from scene definitions and JSON islands.

Updated Mar 3, 2026

Search Tags:#interactive #presentation #deck #slideshows #HyperFrames

Ready to run

npx skills add https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch --skill slideshow-x-rankflow-media-group

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slideshow
Source: https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch/tree/main/.agents/skills/slideshow
Command: npx skills add https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch --skill slideshow-x-rankflow-media-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation of interactive HyperFrames slideshows, allowing users to build presentations, pitch decks, and interactive decks with discrete slides, branching sequences, and hotspot navigation.

Core Features & Use Cases

Slide Composition: Author HyperFrames slideshows with scenes, clips, and GSAP timelines.
Slide Sequences: Define slide order and navigation with slide sequences and branch slides.
Hotspot Navigation: Add interactive hotspots for branching and linking between slides.
Use Case: Ideal for users looking to convert existing web pages into interactive HyperFrames slideshows that preserve design and behavior while adding navigation and presenter mode.

Quick Start

Author a HyperFrames slideshow using the provided SKILL.md file, specifying scenes, slide sequences, and hotspot configurations. Use the JSON island to declare slide metadata and interactions.

Frequently Asked Questions about slideshow

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

FAQPage Schema

How do I create interactive slideshows with branching navigation?▼

Build interactive presentations by authoring HyperFrames scenes, clips, and GSAP timelines. You define slide sequences and branch slides through a JSON island that declares slide metadata and interactions, enabling discrete slides and branching sequences.

What is a HyperFrames slideshow and how does it handle navigation?▼

A HyperFrames slideshow is an interactive deck format using scenes, clips, and timelines for composition. It handles navigation through hotspot configurations and JSON islands that specify slide order and branching, rendered with HTML and JavaScript.

Can I convert existing web pages into interactive presentation decks?▼

Yes, you can convert existing web pages into interactive presentation decks. This process preserves original design and behavior while adding discrete slide navigation, hotspot configurations, and presenter mode.

Does the slideshow skill require HyperFrames core composition features to function?▼

Yes, building interactive slideshows requires HyperFrames core composition features, including scenes, clips, timelines, and data attributes to ensure determinism and navigation for the interactive presentation.

How do I add interactive hotspots for linking between slides?▼

You add interactive hotspots by configuring them within your scene definitions and JSON islands. These hotspots enable branching and linking, allowing non-linear navigation between discrete slides in the presentation deck.

What is the best way to define slide order and branching sequences in an interactive deck?▼

The best way to define slide order and branching sequences is by using a JSON island to declare slide metadata and interactions. This method specifies the exact slide sequence and branch slides for the interactive deck.