slideshow

Author HyperFrames slideshow compositions with slides, fragments, hotspots, and branching sequences.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill slideshow-noetfield-systems
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slideshow
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/slideshow
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill slideshow-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a navigable presentation or pitch deck inside a HyperFrames composition requires a precise contract: scenes declared with data attributes, a JSON island defining slide order, fragment hold-points, and hotspot-driven branches. This Skill encodes that contract so decks parse correctly in the player and pass lint validation. ## Core Features & Use Cases - Slideshow island schema: Defines the SlideshowManifest, SlideRef, SlideHotspot, and SlideSequence JSON structures that turn a continuous GSAP timeline into a discrete, navigable deck. - Fragments and branching: Specifies fragment reveal hold-points within slides and hotspot-triggered branch sequences with a navigation stack, breadcrumbs, and scoped slide counters. - Slide writing rules and validation: Enforces headline-as-claim, one-idea-per-slide, bottom-up market sizing, and minimum font sizes, plus npx hyperframes lint checks for scene resolution, hotspot targets, and fragment ranges. - Use Case: A founder needs an investor pitch deck with a main storyline, per-bullet reveals, and a clickable market-sizing deep dive. This Skill produces the scene HTML, the JSON island, and the GSAP timelines, then validates the result. ## Quick Start Use the slideshow skill to build a HyperFrames pitch deck with three slides, fragment reveals on the problem slide, and a hotspot branching to a market-sizing detail slide.

Frequently Asked Questions about slideshow

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

FAQPage Schema
How do I build a slideshow or pitch deck as a HyperFrames composition?

Declare each slide as a scene with data-composition-id, data-start, and data-duration, then add one script block of type application/hyperframes-slideshow+json listing slides in order. Wrap the player in a hyperframes-slideshow element for navigation chrome and keyboard control.

How do fragment reveals work in a HyperFrames slideshow?

Fragments are absolute composition-timeline times within a slide's start-to-end range where the controller pauses before the next reveal. Each Next press plays to the next fragment time, so GSAP entrance animations between hold-points play as sequential reveals.

How do I add branching slides with hotspots in a deck?

Define a SlideSequence in the island's slideSequences array and add a hotspot on a main-line slide whose target matches that sequence id. Branch scenes stay out of the main slides array, and back navigation pops the stack to the parent slide.

Why does my HyperFrames slideshow fail lint validation?

Lint fails when a slide sceneId does not match any data-composition-id, a hotspot target references an undefined slideSequence, fragment times fall outside the slide range, or main-line slides overlap in time. Fix all violations before previewing.

Can I run a HyperFrames slideshow standalone without the engine?

Yes, but it requires interim workarounds documented in references/standalone-harness.md: duplicating the island into the wrapper, a self-driven root timeline for scene visibility, parent-frame audio, and imperative entrance animations. The engine-hosted path is the durable solution.