slideshow

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

13|17|Updated Jan 30, 2025
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill slideshow-codewithsally
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slideshow
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/slideshow
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill slideshow-codewithsally

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a HyperFrames composition into a navigable presentation deck requires a specific JSON island schema, slide writing rules, fragment hold-points, and presenter-mode wiring that are easy to get wrong, and rendering a deck to MP4 silently truncates the output. ## Core Features & Use Cases - Deck authoring contract: Declares slides via a application/hyperframes-slideshow+json island with scene IDs, speaker notes, fragment reveal times, and hotspot-driven branch sequences. - Presenter mode and handoff: Built-in Present button, audience tab sync via BroadcastChannel, editable localStorage-backed speaker notes, and Google Meet/Zoom screen-share guidance. - Source page conversion: Ports existing pages into decks while preserving visual design, media behavior, scroll-driven camera transitions, and interaction fidelity. - Use Case: Convert a startup pitch page into a 10-slide deck with fragment reveals on the problem slide, a hotspot branching into market-sizing math, and presenter notes for a live investor demo. ## Quick Start Ask the assistant to turn your content or existing page into a HyperFrames slideshow deck with slides, speaker notes, and fragment reveals, then confirm when prompted.

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 script block of type application/hyperframes-slideshow+json listing slides, notes, fragments, and branch sequences. Serve the result with hyperframes present.

How do slide fragments and hotspots work in a deck?

Fragments are absolute timeline times within a slide's range where the controller holds reveal states as the presenter presses Next. Hotspots are clickable regions that push a branch sequence onto the navigation stack, with back returning to the parent slide.

Can I render a HyperFrames slideshow to MP4?

No. A deck has multiple top-level scene compositions with no master root, so hyperframes render resolves only the first composition and emits a silently truncated MP4. Supported outputs are the live present deck and per-slide snapshot stills.

How do I convert an existing web page into a slideshow?

Preserve the source's visual design, media behavior, and interactions, then re-host scroll-driven motion as camera transitions between slide focal points. Copied video and audio elements need data-start, data-duration, and data-has-audio attributes before lint.

Why is my slideshow navigation or audio not working standalone?

Standalone decks need a seekable window.__timelines.root timeline, the island duplicated into the wrapper element, and tabindex="0" on hyperframes-slideshow for keyboard events. Wrapper-owned audio must live in the parent frame due to autoplay activation rules.