Skill Tracer
Skills › HyperFrames › slideshow

slideshow

skill · 64 lines · Apache-2.0 · skills/slideshow/SKILL.md

The facts

Its description

Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by `hyperframes present` - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video.

The description the agent reads to decide when to use it.

From its settingsline 3

When it starts

A person wants a live presentation or deck (slides, reveals, branching, speaker notes) built with HyperFrames, or wants an existing web page converted into one, rather than a rendered video.

Things a person might say (the model's guesses)

  • “Make me a slide deck I can present live with speaker notes”
  • “Turn this web page into a presentation with clickable branches”
  • “Build a HyperFrames slideshow for my pitch, not an MP4”

A model's summary of when it is used.

A model's reading

Files it mentions

references/standalone-harness.md

Files the text names, such as ones to read or write. Found by matching words, so treat them as pointers.

Found by matching wordsline 64

What it leads to

Other skills this one hands off to, calls, requires or offers instead, as a model read them.

A model's reading

What leads to it

Other skills that hand off to this one, call it, require it or offer it instead, as a model read them.

A model's reading

Licence

Apache-2.0, from LICENSE

The terms its author shares it under, which let it be shown here.

From the repositorylicence text
Other files in this skill (1) Close

The text

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1---
2name: slideshow
3description: Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by `hyperframes present` - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video.
4---
5
6**Plugin installs:** Inside a HyperFrames plugin, follow [plugin execution rules](../hyperframes/references/plugin-installation.md).
7
8**Usage beacon:** run `npx hyperframes events --skill=slideshow` once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.
9
10# HyperFrames slideshow
12A slideshow is a normal composition (the `/hyperframes` contract applies) plus one JSON island that says which scenes are slides and how they connect. The deliverable is a running deck, not an MP4.

Plugin installs: Inside a HyperFrames plugin, follow plugin execution rules.

Usage beacon: run npx hyperframes events --skill=slideshow once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.

HyperFrames slideshow

A slideshow is a normal composition (the /hyperframes contract applies) plus one JSON island that says which scenes are slides and how they connect. The deliverable is a running deck, not an MP4.

Raw lines 1 to 13
Names a skill hyperframes :12
14## What changes from a video project
16- **Each slide is a top-level scene** in the composition file: `data-composition-id`, `data-start`, `data-duration`, `data-label`, `data-width`, `data-height`. There is no master root composition wrapping them.
17- **One island per composition**, near the top of `<body>`, written in the HTML (never generated by script; `present` reads the file statically):
19```html
20<script type="application/hyperframes-slideshow+json">
21 {
22 "slides": [
23 { "sceneId": "hook", "notes": "Pause on the number." },
24 {
25 "sceneId": "problem",
26 "fragments": [11.0, 15.0],
27 "hotspots": [
28 {
29 "id": "h1",
30 "label": "Where does $40B come from?",
31 "target": "market-detail",
32 "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
33 }
34 ]
35 }
36 ],
37 "slideSequences": [
38 { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
39 ]
40 }
41</script>
42```
44- `sceneId` equals a scene's `data-composition-id` (or give `startTime`/`endTime`). `notes` are presenter-only. `ttsScript`, `ttsAudioUrl` and `ttsDurationMs` are reserved and not wired yet.
45- **Fragments are absolute timeline times** (the same clock as `data-start`, not offsets inside the slide) within the slide's `[start, end]`. Navigation seeks, it never plays: each hold state must look right when the timeline is seeked straight to that time. A slide without fragments enters at a rest frame inside it.
46- **Branch slides** are ordinary scenes listed only in `slideSequences`, never in the main `slides` array. A hotspot's `target` is a sequence `id`; `region` is a percentage box (omit it for a full-slide button). Back returns to the slide that held the hotspot.
47- Text the audience must read is at least 40 px at 1920×1080. Before hand-building any named visual, search `npx hyperframes catalog --query "<the visual, in English>" --json`: it ranks the whole registry with nothing installed.

What changes from a video project

  • Each slide is a top-level scene in the composition file: data-composition-id, data-start, data-duration, data-label, data-width, data-height. There is no master root composition wrapping them.
  • One island per composition, near the top of <body>, written in the HTML (never generated by script; present reads the file statically):
<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      { "sceneId": "hook", "notes": "Pause on the number." },
      {
        "sceneId": "problem",
        "fragments": [11.0, 15.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "Where does $40B come from?",
            "target": "market-detail",
            "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
          }
        ]
      }
    ],
    "slideSequences": [
      { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
    ]
  }
</script>
  • sceneId equals a scene's data-composition-id (or give startTime/endTime). notes are presenter-only. ttsScript, ttsAudioUrl and ttsDurationMs are reserved and not wired yet.
  • Fragments are absolute timeline times (the same clock as data-start, not offsets inside the slide) within the slide's [start, end]. Navigation seeks, it never plays: each hold state must look right when the timeline is seeked straight to that time. A slide without fragments enters at a rest frame inside it.
  • Branch slides are ordinary scenes listed only in slideSequences, never in the main slides array. A hotspot's target is a sequence id; region is a percentage box (omit it for a full-slide button). Back returns to the slide that held the hotspot.
  • Text the audience must read is at least 40 px at 1920×1080. Before hand-building any named visual, search npx hyperframes catalog --query "<the visual, in English>" --json: it ranks the whole registry with nothing installed.
Raw lines 14 to 48
49## Porting an existing page
51- Keep the source's look, motion, interactions and media behaviour; port its widgets, players and visualizers rather than approximating them.
52- Movement the page drove by scroll, wheel or a camera layer becomes a camera move from one focal point to the next on slide navigation, never a page visibly scrolling. Keep each move direct, without reversals the source doesn't make.
53- Screenshots, posts, charts, code and any image with readable text are evidence: keep their aspect (`object-fit: contain`) and check all four edges for crops.
54- Every copied `<video>`/`<audio>` needs `data-start` and `data-duration` (`data-has-audio="true"` when its sound plays), and no `preload="none"`. Custom media chrome reads the native element's events and `currentTime`, never its own timer.
55- Hidden stacked slides need `opacity: 0`, `visibility: hidden` and `pointer-events: none` together, or an invisible layer swallows clicks.

Porting an existing page

  • Keep the source's look, motion, interactions and media behaviour; port its widgets, players and visualizers rather than approximating them.
  • Movement the page drove by scroll, wheel or a camera layer becomes a camera move from one focal point to the next on slide navigation, never a page visibly scrolling. Keep each move direct, without reversals the source doesn't make.
  • Screenshots, posts, charts, code and any image with readable text are evidence: keep their aspect (object-fit: contain) and check all four edges for crops.
  • Every copied <video>/<audio> needs data-start and data-duration (data-has-audio="true" when its sound plays), and no preload="none". Custom media chrome reads the native element's events and currentTime, never its own timer.
  • Hidden stacked slides need opacity: 0, visibility: hidden and pointer-events: none together, or an invisible layer swallows clicks.
Raw lines 49 to 56
57## Present and hand off
59- **Never render a deck to MP4**: `render` keeps only the first scene and truncates silently. For stills, `snapshot --at` each slide.
60- Run `npx hyperframes check --json` until it is clean. The slideshow rule checks that every `sceneId` resolves, every hotspot `target` exists, fragments sit inside their slide, and main-line slides don't overlap.
61- Serve it with `npx hyperframes present <project-dir>` and hand over the URL it prints: "Click Present, or press P, to open the audience tab."
62- The project's root `index.html` should open as a working deck: `<hyperframes-slideshow>` around `<hyperframes-player src="…">`, with the raw composition in a subfolder if needed. The component owns Present (P), Prev/Next, the counter, global mute, fullscreen, swipe, hotspots, presenter notes (editable, kept per deck) and stopping media on slide exit. Don't build your own versions of any of these.
63- Screen sharing: in Google Meet share the audience **tab**, which keeps rendering in the background. In Zoom drag the audience tab into its own window and share that; a fully covered window freezes.
64- A deck opened from the bare player bundle without `present` needs workarounds: `references/standalone-harness.md`.

Present and hand off

  • Never render a deck to MP4: render keeps only the first scene and truncates silently. For stills, snapshot --at each slide.
  • Run npx hyperframes check --json until it is clean. The slideshow rule checks that every sceneId resolves, every hotspot target exists, fragments sit inside their slide, and main-line slides don't overlap.
  • Serve it with npx hyperframes present <project-dir> and hand over the URL it prints: "Click Present, or press P, to open the audience tab."
  • The project's root index.html should open as a working deck: <hyperframes-slideshow> around <hyperframes-player src="…">, with the raw composition in a subfolder if needed. The component owns Present (P), Prev/Next, the counter, global mute, fullscreen, swipe, hotspots, presenter notes (editable, kept per deck) and stopping media on slide exit. Don't build your own versions of any of these.
  • Screen sharing: in Google Meet share the audience tab, which keeps rendering in the background. In Zoom drag the audience tab into its own window and share that; a fully covered window freezes.
  • A deck opened from the bare player bundle without present needs workarounds: references/standalone-harness.md.
Raw lines 57 to 64

From heygen-com/hyperframes at a595755, 2026-11-07. Skills read by Claude Sonnet 5.5 on 2026-11-07. Summary and techniques by Claude Opus 5.5 on 2026-11-07.