dsh-hyperframes 0.3.2 → 0.4.0

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html

@@ -16,86 +16,6 @@
         font-family: Helvetica, Arial, sans-serif;
         color: #ffffff;
       }
-      .scene {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-      }
-
-      /* Scene 1 — Title */
-      .scene-1 {
-        flex-direction: column;
-      }
-      .scene-1 .title {
-        font-size: 160px;
-        font-weight: 900;
-        letter-spacing: 0.05em;
-        transform: scale(0);
-      }
-      .scene-1 .subtitle {
-        font-size: 36px;
-        font-weight: 400;
-        color: #9ca3af;
-        margin-top: 24px;
-        opacity: 0;
-      }
-
-      /* Scene 2 — Stats */
-      .scene-2 {
-        gap: 48px;
-      }
-      .stat-card {
-        width: 280px;
-        height: 220px;
-        background: #1a1a1a;
-        border-radius: 16px;
-        border: 2px solid var(--card-color);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        opacity: 0;
-        transform: scale(0);
-      }
-      .stat-card .number {
-        font-size: 72px;
-        font-weight: 800;
-        color: var(--card-color);
-        line-height: 1;
-      }
-      .stat-card .label {
-        font-size: 24px;
-        font-weight: 500;
-        color: #9ca3af;
-        margin-top: 16px;
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-      }
-
-      /* Scene 3 — Outro */
-      .scene-3 .outro-wrap {
-        position: relative;
-        display: inline-block;
-        opacity: 0;
-      }
-      .scene-3 .outro-text {
-        font-size: 80px;
-        font-weight: 600;
-      }
-      .scene-3 .outro-underline {
-        position: absolute;
-        left: 0;
-        bottom: -8px;
-        width: 100%;
-        height: 6px;
-        background: #fbbf24;
-        border-radius: 3px;
-        transform: scaleX(0);
-        transform-origin: left center;
-      }
     </style>
   </head>
   <body>
@@ -111,158 +31,39 @@
       data-subtitle="by HeyGen"
       data-outro="thanks for watching"
     >
-      <!-- Scene 1: Title -->
       <div
         id="scene-1"
-        class="scene scene-1 clip"
+        class="clip"
+        data-composition-id="scene-1"
+        data-composition-src="compositions/scene-1.html"
         data-start="0"
         data-duration="3"
         data-track-index="0"
-      >
-        <div class="title">STARGAZED</div>
-        <div class="subtitle">by HeyGen</div>
-      </div>
+      ></div>
 
-      <!-- Scene 2: Stats — three StatCards as repeated markup with per-instance data attrs -->
       <div
         id="scene-2"
-        class="scene scene-2 clip"
+        class="clip"
+        data-composition-id="scene-2"
+        data-composition-src="compositions/scene-2.html"
         data-start="3"
         data-duration="4"
         data-track-index="0"
-      >
-        <div
-          class="stat-card"
-          data-stat-index="0"
-          data-stat-value="1247"
-          style="--card-color: #fbbf24"
-        >
-          <div class="number">0</div>
-          <div class="label">Stars</div>
-        </div>
-        <div
-          class="stat-card"
-          data-stat-index="1"
-          data-stat-value="312"
-          style="--card-color: #60a5fa"
-        >
-          <div class="number">0</div>
-          <div class="label">Forks</div>
-        </div>
-        <div
-          class="stat-card"
-          data-stat-index="2"
-          data-stat-value="48"
-          style="--card-color: #f87171"
-        >
-          <div class="number">0</div>
-          <div class="label">Issues</div>
-        </div>
-      </div>
+      ></div>
 
-      <!-- Scene 3: Outro -->
       <div
         id="scene-3"
-        class="scene scene-3 clip"
+        class="clip"
+        data-composition-id="scene-3"
+        data-composition-src="compositions/scene-3.html"
         data-start="7"
         data-duration="3"
         data-track-index="0"
-      >
-        <div class="outro-wrap">
-          <div class="outro-text">thanks for watching</div>
-          <div class="outro-underline"></div>
-        </div>
-      </div>
+      ></div>
 
       <script>
-        // ────────────────────────────────────────────────────────────────────
-        // Translation of Stargazed.tsx
-        //
-        // Remotion structure:
-        //   <Composition schema={zod} defaultProps={...} fps=30 dur=300>
-        //     <Sequence 0..90>   <TitleScene title subtitle />
-        //     <Sequence 90..210> <StatsScene stats />
-        //     <Sequence 210..300><OutroScene text />
-        //
-        // HF structure:
-        //   - root #stage carries data-* with the same props (title, subtitle, outro)
-        //   - 3 scene divs with data-start/data-duration in seconds (frames/fps)
-        //   - Custom React subcomponents inline as repeated HTML; their per-instance
-        //     props become data-* attributes on the markup
-        //   - Animation lives in a single paused GSAP timeline keyed by composition seconds
-        //
-        // Frame → time:
-        //   Sequence(0,90)    → 0s..3s        (title)
-        //   Sequence(90,210)  → 3s..7s        (stats; 4s window)
-        //   Sequence(210,300) → 7s..10s       (outro)
-        //   Stagger(i*12)     → i*0.4s        (12 frames at 30fps)
-        // ────────────────────────────────────────────────────────────────────
-
-        const tl = gsap.timeline({ paused: true });
-
-        // ─── Scene 1: Title ─────────────────────────────────────────────────
-        const scene1 = document.querySelector("#scene-1");
-        const title = scene1.querySelector(".title");
-        const subtitle = scene1.querySelector(".subtitle");
-
-        tl.set(scene1, { opacity: 1 }, 0);
-        // spring({damping:12, stiffness:100, mass:1}) → back.out(1.4) ~0.7s
-        tl.to(title, { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
-        // interpolate(frame, [20,40], [0,1]) at fps=30 → 0.667s..1.333s linear
-        tl.fromTo(subtitle, { opacity: 0 }, { opacity: 1, duration: 0.667, ease: "none" }, 0.667);
-        tl.set(scene1, { opacity: 0 }, 3);
-
-        // ─── Scene 2: Stats ─────────────────────────────────────────────────
-        const scene2 = document.querySelector("#scene-2");
-        const cards = scene2.querySelectorAll(".stat-card");
-
-        tl.set(scene2, { opacity: 1 }, 3);
-
-        cards.forEach((card, i) => {
-          const stagger = i * 0.4; // i * 12 frames at 30 fps
-          const start = 3 + stagger;
-          const value = Number(card.dataset.statValue);
-          const numberEl = card.querySelector(".number");
-
-          // StatCard entrance:
-          //   spring({damping:14, stiffness:90, mass:1}) → back.out(1.2) ~0.7s
-          //   interpolate(local, [0,12], [0,1]) → 0s..0.4s linear opacity
-          tl.to(card, { scale: 1, duration: 0.7, ease: "back.out(1.2)" }, start);
-          tl.to(card, { opacity: 1, duration: 0.4, ease: "none" }, start);
-
-          // AnimatedNumber: count from 0 → value with easeOutCubic over 45 frames (1.5s).
-          // GSAP equivalent: a tween on a counter object with onUpdate rewriting textContent.
-          // power3.out is GSAP's name for cubic easeOut.
-          const counter = { v: 0 };
-          tl.to(
-            counter,
-            {
-              v: value,
-              duration: 1.5,
-              ease: "power3.out",
-              onUpdate: () => {
-                numberEl.textContent = Math.round(counter.v).toLocaleString();
-              },
-            },
-            start,
-          );
-        });
-
-        tl.set(scene2, { opacity: 0 }, 7);
-
-        // ─── Scene 3: Outro ─────────────────────────────────────────────────
-        const scene3 = document.querySelector("#scene-3");
-        const outroWrap = scene3.querySelector(".outro-wrap");
-        const underline = scene3.querySelector(".outro-underline");
-
-        tl.set(scene3, { opacity: 1 }, 7);
-        // interpolate(frame, [0,12], [0,1]) → 0s..0.4s linear opacity
-        tl.to(outroWrap, { opacity: 1, duration: 0.4, ease: "none" }, 7);
-        // interpolate(frame, [10,40], [0,1]) for underline → starts at 7+0.333s, dur 1s
-        tl.to(underline, { scaleX: 1, duration: 1.0, ease: "none" }, 7.333);
-
         window.__timelines = window.__timelines || {};
-        window.__timelines["tier-3-data-driven"] = tl;
+        window.__timelines["tier-3-data-driven"] = gsap.timeline({ paused: true });
       </script>
     </div>
   </body>

package/skills/remotion-to-hyperframes/references/api-map.md

@@ -27,12 +27,12 @@ details (timing, transitions, etc.).
 
 See [sequencing.md](sequencing.md) for nesting and stagger details.
 
-| Remotion                                   | HyperFrames                                                                                               |
-| ------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `<Sequence from={F} durationInFrames={D}>` | `<div data-start="<F/fps>" data-duration="<D/fps>" data-track-index="N">`                                 |
-| `<Series>` + `<Series.Sequence>`           | siblings with sequential `data-start` values                                                              |
-| `<Loop durationInFrames={D}>`              | not a primitive — emit a bounded GSAP repeat from the available duration                                  |
-| `<Freeze frame={F}>`                       | drop the wrapper; HF doesn't have running animation outside the seek-driven timeline so freeze is a no-op |
+| Remotion                                   | HyperFrames                                                                                                                                                                                                                 |
+| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Sequence from={F} durationInFrames={D}>` | a host `<div data-composition-src="compositions/<name>.html" data-start="<F/fps>" data-duration="<D/fps>" data-track-index="N">` in the root, its content in that sub-composition file (see [sequencing.md](sequencing.md)) |
+| `<Series>` + `<Series.Sequence>`           | sibling scene hosts with sequential `data-start` values                                                                                                                                                                     |
+| `<Loop durationInFrames={D}>`              | not a primitive — emit a bounded GSAP repeat from the available duration                                                                                                                                                    |
+| `<Freeze frame={F}>`                       | drop the wrapper; HF doesn't have running animation outside the seek-driven timeline so freeze is a no-op                                                                                                                   |
 
 ## Timing
 
@@ -53,16 +53,16 @@ See [timing.md](timing.md) — this is the highest-leverage section.
 
 See [media.md](media.md) for trim, volume ramps, and decoder notes.
 
-| Remotion                               | HyperFrames                                                                 |
-| -------------------------------------- | --------------------------------------------------------------------------- |
-| `<Audio src volume>`                   | `<audio data-start data-duration data-track-index data-volume src>`         |
-| `<Audio playbackRate startFrom endAt>` | `data-playback-rate`, `data-trim-start`, `data-trim-end`                    |
-| `<Video src>`                          | `<video muted playsinline data-start data-duration data-track-index src>`   |
-| `<OffthreadVideo>`                     | `<video>` — HF doesn't need the off-thread variant (uses headless Chrome)   |
-| `<Img src>`                            | `<img>`                                                                     |
-| `<IFrame src>`                         | `<iframe>` — HF auto-falls back to screenshot mode for nested iframes       |
-| `staticFile("x.png")`                  | `"assets/x.png"` — copy the file into `hf-src/assets/` next to `index.html` |
-| `delayRender()` / `continueRender()`   | drop — HF waits on asset readiness via the Frame Adapter pattern            |
+| Remotion                               | HyperFrames                                                                                                                                      |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `<Audio src volume>`                   | `<audio data-start data-duration data-track-index data-volume src>`                                                                              |
+| `<Audio playbackRate startFrom endAt>` | `data-playback-rate`, `data-trim-start`, `data-trim-end`                                                                                         |
+| `<Video src>`                          | `<video muted playsinline data-start data-duration data-track-index src>`                                                                        |
+| `<OffthreadVideo>`                     | `<video>` — HF doesn't need the off-thread variant (uses headless Chrome)                                                                        |
+| `<Img src>`                            | `<img>`                                                                                                                                          |
+| `<IFrame src>`                         | `<iframe>` — HF auto-falls back to screenshot mode for nested iframes                                                                            |
+| `staticFile("x.png")`                  | `"assets/x.png"` in the root, `"../assets/x.png"` inside a `compositions/` scene file — copy the file into `hf-src/assets/` next to `index.html` |
+| `delayRender()` / `continueRender()`   | drop — HF waits on asset readiness via the Frame Adapter pattern                                                                                 |
 
 ## Transitions
 

package/skills/remotion-to-hyperframes/references/limitations.md

@@ -31,9 +31,10 @@ Remotion accepts a function for `volume`:
 <Audio src={...} volume={(f) => interpolate(f, [0, 30], [0, 1])} />
 ```
 
-HF supports static `data-volume` only. Translation: bake the ramp into
-the audio file at translation time using `ffmpeg afade`, OR drop the
-ramp with a note. The dropped-ramp path produces audibly different
+HF ramps volume with a `data-automation` volume lane on the `<audio>`
+(form in `hyperframes-core/references/creator-editing-recipes.md`).
+Translation: write the lane from the `interpolate` points, OR bake the ramp
+into the audio file with `ffmpeg afade`. The dropped-ramp path produces audibly different
 output but visually-identical video, so SSIM passes — just flag it.
 
 ### `<Loop>` with stateful children
@@ -120,10 +121,9 @@ a `TRANSLATION_NOTES.md` next to the output:
 
 The following Remotion patterns were translated with caveats:
 
-- `<Audio volume={(f) => ...}>` (line 15): volume ramp dropped — added
-  static `data-volume="0.5"`. To preserve the ramp, run
-  `ffmpeg -i music.wav -af "afade=t=in:st=0:d=1" music.faded.wav` and
-  swap the source file.
+- `<Audio volume={(f) => ...}>` (line 15): volume ramp written as a
+  `data-automation` volume lane (see `creator-editing-recipes.md`); the
+  ffmpeg `afade` bake-in is the alternative.
 - `<HeavyChart>` (line 30): translated as inline HTML. The original
   React.lazy boundary was dropped — bundle size unchanged because HF
   serves a single HTML file.

package/skills/remotion-to-hyperframes/references/lottie.md

@@ -104,13 +104,11 @@ for the full supported feature list.
 
 ## Loop behavior
 
-Remotion's `loop={true}` plays the animation continuously. Translate to
-the player option only after checking the generated frames. The HF
-adapter seeks absolute composition time; it does not add modulo looping
-or playback-rate scaling on top of the player. For exact repeating
-cycles or non-default playback rates, bake the timing into the Lottie
-asset or author an explicit timeline around the Lottie layer and verify
-the rendered output.
+Remotion's `loop={true}` plays the animation continuously. Translate it
+to `loop: true` on the player: the HF adapter wraps composition time into
+the animation's own length, so the cycle repeats for the whole scene. It
+does not add playback-rate scaling; bake a non-default rate into the
+Lottie asset and verify the rendered output.
 
 ## Performance note
 

package/skills/remotion-to-hyperframes/references/media.md

@@ -44,9 +44,9 @@ didn't specify trim.
 <Audio src={staticFile("music.wav")} volume={(f) => interpolate(f, [0, 30], [0, 1])} />
 ```
 
-HF supports static `data-volume` only for now. Volume ramps need to be
-applied to the audio file at translation time (with ffmpeg `afade`) or the
-ramp is dropped with a translation note.
+Volume ramps become a `data-automation` volume lane on the `<audio>`
+(form in `hyperframes-core/references/creator-editing-recipes.md`); `data-volume`
+is the static baseline.
 
 ### Trim / playbackRate
 

package/skills/remotion-to-hyperframes/references/parameters.md

@@ -37,6 +37,11 @@ The `data-title` attribute carries the value through. Code that originally
 read `props.title` reads `document.getElementById("stage").dataset.title`
 in HF.
 
+Inside a scene sub-composition file that lookup does not reach the root
+`#stage`. Pass a prop to a scene with `data-variable-values` on its host and
+read it there with `window.__hyperframes.getVariables()` (declare defaults with
+`data-composition-variables` on the scene's composition element).
+
 ## Async calculateMetadata (NOT translatable)
 
 ```tsx

package/skills/remotion-to-hyperframes/references/sequencing.md

@@ -1,7 +1,7 @@
 # Sequencing translation: Sequence, Series, Composition root
 
-How Remotion's nested `Sequence` tree maps to HF's flat `data-start` /
-`data-duration` markup with a single paused GSAP timeline.
+How Remotion's nested `Sequence` tree maps to one sub-composition host per
+scene in the root, each with its own paused GSAP timeline in local time.
 
 ## The core idea
 
@@ -11,8 +11,9 @@ component to the window `[F, F+D]`. HF doesn't have a per-element
 "current frame" — there's a single composition seek time and the
 runtime hides/shows elements based on their `data-start` / `data-duration`.
 
-Result: the nested tree flattens into a list of siblings on the same
-parent, each with their own time window.
+Result: the nested tree flattens into a list of scene hosts on the same
+parent, each with its own time window; each scene's content lives in its
+own sub-composition file.
 
 ## `<Composition>` → root `#stage`
 
@@ -57,7 +58,7 @@ playback; missing it triggers a lint warning).
 `AbsoluteFill` is just a styled div in Remotion. Translate to a div with
 `position:absolute; inset:0` and copy through any other style props.
 
-## `<Sequence>` → time-windowed div
+## `<Sequence>` → sub-composition host
 
 ```tsx
 <Sequence from={0} durationInFrames={90}>
@@ -65,15 +66,42 @@ playback; missing it triggers a lint warning).
 </Sequence>
 ```
 
+The root `#stage` only holds a host per scene; the scene's markup, styles
+and timeline live in their own sub-composition file, so the Studio timeline
+gets one readable row per scene and the lint has no nested structure to flag.
+
 ```html
-<div data-start="0" data-duration="3" data-track-index="0">
-  <!-- TitleCard children inlined -->
-</div>
+<!-- index.html -->
+<div
+  id="scene-1"
+  class="clip"
+  data-composition-id="scene-1"
+  data-composition-src="compositions/scene-1.html"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+```html
+<!-- compositions/scene-1.html: TitleCard children inlined, timeline keyed "scene-1", local time starts at 0 -->
+<template id="scene-1-template">
+  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="3">
+    <!-- TitleCard children -->
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["scene-1"] = tl;
+    </script>
+  </div>
+</template>
 ```
 
 Convert frames to seconds: `from/fps`, `durationInFrames/fps`. Pick a
 `data-track-index` per parallel rendering layer (background = 0,
 overlays = 1, audio = 2, etc.). Sequential scenes can share an index.
+Inside the sub-composition, time is local: a tween that started at `F/fps`
+in the root starts at `0` here. Asset paths are relative to the
+sub-composition file (`../assets/x.png`).
 
 ## Nested `<Sequence>` flattens
 
@@ -89,13 +117,17 @@ Remotion adds offsets when sequences nest:
 
 The inner sequence's effective window is `[60+30, 60+30+60] = [90, 150]`.
 
-Translate by computing the sum and emitting one HF div with the resolved
-window:
+Translate by computing the sum and emitting one host with the resolved
+window; the scene's children go in its sub-composition file:
 
 ```html
-<div data-start="3" data-duration="2" data-track-index="0">
-  <!-- ImageScene children -->
-</div>
+<div
+  data-composition-id="image-scene"
+  data-composition-src="compositions/image-scene.html"
+  data-start="3"
+  data-duration="2"
+  data-track-index="0"
+></div>
 ```
 
 ## `<Series>` → siblings with sequential offsets
@@ -115,19 +147,40 @@ window:
 ```
 
 Each `Sequence.Sequence` lives in the next time slot. Emit siblings
-with `data-start` accumulating:
+with `data-start` accumulating (each host mounts its scene file):
 
 ```html
-<div data-start="0" data-duration="2" data-track-index="0">A</div>
-<div data-start="2" data-duration="4" data-track-index="0">B</div>
-<div data-start="6" data-duration="3" data-track-index="0">C</div>
+<div
+  data-composition-id="a"
+  data-composition-src="compositions/a.html"
+  data-start="0"
+  data-duration="2"
+  data-track-index="0"
+></div>
+<div
+  data-composition-id="b"
+  data-composition-src="compositions/b.html"
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+<div
+  data-composition-id="c"
+  data-composition-src="compositions/c.html"
+  data-start="6"
+  data-duration="3"
+  data-track-index="0"
+></div>
 ```
 
 ## Crossfading scene boundaries
 
 Remotion `<Sequence>` shows/hides at hard boundaries by default. HF does
 the same — but if your composition needs a smooth fade between scenes,
-you have to drive opacity explicitly with GSAP at the boundary:
+you have to drive opacity explicitly with GSAP at the boundary. A scene can
+hard-cut itself with `gsap.set` at its local end (the corpus fixtures do). A
+fade between two scenes goes on the scene hosts from the root timeline, since
+a scene's own timeline only sees its own file:
 
 ```js
 const tl = gsap.timeline({ paused: true });

package/skills/slideshow/SKILL.md

@@ -9,6 +9,8 @@ description: >
   Unclear → /hyperframes.
 ---
 
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
+
 > **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update slideshow`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
 
 > **figma source**: If the deck's content or storyboard comes from a figma.com URL, run `/figma` first — asset export, brand tokens, and storyboard reconstruction if the source is a strip of scene frames — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.
@@ -37,7 +39,7 @@ Then ask a short confirmation question:
 
 Use a yes/no choice UI when the environment provides one; otherwise ask the question in plain text.
 
-Do not implement the slideshow until the user says yes. If they say no, stop using this skill — read `/hyperframes` and let the intent layer re-route. This confirmation is a **routing decision**, not a preference gate — per `../hyperframes-core/references/brief-contract.md` § 1 it survives autonomous mode ("surprise me" does not skip it): building the wrong deliverable type is a quality failure, not a creative call.
+Do not implement the slideshow until the user says yes. If they say no, stop using this skill — read `/hyperframes` and let the intent layer re-route. This confirmation is a **routing decision**, not a preference gate — per `../hyperframes/references/brief-contract.md` § 1 it survives autonomous mode ("surprise me" does not skip it): building the wrong deliverable type is a quality failure, not a creative call.
 
 ---
 
@@ -164,6 +166,7 @@ These are hard constraints, not suggestions. A slide that violates them will be
 - **Lead with the punchline.** The strongest point goes first — on the slide and in the deck order. Investors read left-to-right, top-to-bottom, and they stop.
 - **Bottom-up market sizing only.** Never write "$50B TAM" without showing the math. Build from unit economics up: accounts × ACV, or transactions × take-rate.
 - **Font minimum 30pt equivalent.** At 1920×1080, a headline is 72–96px; body copy is 48px. Never go below 40px for any text the audience must read.
+- **Search the live catalog before hand-building any named visual.** For every look, effect, chart, treatment or transition a slide needs — "CRT scanlines", "glitch", "bar chart race", "shimmer sweep", "terminal window" — run `npx hyperframes catalog --query "<the visual, in plain English>" --json` and read the top results before you author the slide's clips. The search needs **nothing installed**: no project, no prior `add`, no account. It ranks the whole hosted registry (~400 blocks and components) from any directory. `npx hyperframes add <name>` drops the block's source into the deck, where you customize it in place. This applies with extra force when porting a source page: a real block beats the simplified approximation the porting rules below forbid.
 
 ## Porting source pages
 

package/skills/slideshow/references/standalone-harness.md

@@ -14,9 +14,6 @@ Do not treat these as the blessed authoring model. When the engine-hosted path s
 
 **Living reference implementations:**
 
-- `registry/examples/airbnb-deck/index.html` + `demo.html` — full pattern set (Three.js, fragments, SFX, branch slide)
-- `registry/examples/startup-pitch/index.html` — minimal version (no 3D), good starting point
-
 ---
 
 ## 2. The parent wrapper (`index.html` for deliverables, `demo.html` in examples)

package/skills/talking-head-recut/SKILL.md

@@ -3,6 +3,8 @@ name: talking-head-recut
 description: Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.
 ---
 
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
+
 > **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update talking-head-recut`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
 
 # Talking Head Recut
@@ -298,7 +300,7 @@ Rules that apply to every channel:
 - If the user has already pre-approved defaults ("just use defaults",
   "no need to ask", "auto-pick everything"), asked you not to ask, or the
   run carries an ongoing autonomous signal ("surprise me" / "decide for me" —
-  `../hyperframes-core/references/brief-contract.md` § 1) — **skip
+  `../hyperframes/references/brief-contract.md` § 1) — **skip
   the question entirely** and use: `recommendedRatio`, `layout="stack"`
   (safest cross-ratio default), `style` chosen from transcript tone in
   the most neutral group (editorial/data), `autoCount`. Tell the user
@@ -755,6 +757,13 @@ table column that matches the storyboard's `layout` field.
 
 #### Available `data-anim` Kinds
 
+This list is closed, and deliberately so: a card is an HTML fragment whose motion this
+skill compiles into the shared overlay timeline in Step 9 (see the GSAP mapping table
+there). That is why this workflow does not search the HyperFrames component registry the
+way the composition workflows do — `npx hyperframes catalog` returns standalone
+compositions that carry their own timeline, and a card has no place to mount one. Reach a
+look the kinds below cannot express with plain CSS inside the card's scoped `<style>`.
+
 | kind            | use for             | key params                                                                                      |
 | --------------- | ------------------- | ----------------------------------------------------------------------------------------------- |
 | `fade-in`       | enter               | `at`, `duration`, `ease?`                                                                       |

package/skills/hyperframes-core/references/review-loop.md

@@ -1,41 +0,0 @@
-# The review loop — plan, sketch, build
-
-How a `storyboard: yes` run earns fidelity one pass at a time: the plan is reviewed as text on a live board, the layouts as wireframe sketches, and the finished piece as the assembled video. Collaborative mode waits at each checkpoint. Autonomous mode posts the same checkpoint summaries and continues, keeping exactly one question before render.
-
-This is the shared process for any workflow that plans on a storyboard. The contracts it leans on live next door: interaction mode, gate types, and the comments channel in `brief-contract.md`; the `STORYBOARD.md` format, the `outline → built → animated` statuses, and the comments sidecar in `storyboard-format.md`. A workflow's SKILL.md says **when** its steps hit each pass and supplies its **sketch stand-ins** (what the plain blocks represent); how the loop runs is defined here, once. The stage mechanics between the passes — audio, frames, assembly, transitions, captions, verify — live in `production-loop.md`; this file owns only the user-facing pauses.
-
-## § 1 — The plan, on a live board
-
-Open the **storyboard board** before presenting the plan: run `npx hyperframes preview --background` from the project directory, confirm it is serving, and open `http://localhost:<port>/?view=storyboard#project/<project-name>`. This is an early planning surface, not the final composition preview; it may open before composition checks. The plan appears as frame cards and refreshes as work lands.
-
-Present the plan as a proposal (shape: `hyperframes-creative/references/story-spine.md` § 3): open by echoing **"This video tells [audience] that [message]"**, then the frame table — one row per frame: frame · beat (type, duration) · on screen · why (its `narrativeRole`, traced to the message). Hand the board URL with it, noting feedback lands in both places — comment on the board or reply here, one revision loop — and that a board submit still needs one reply here (anything) to get picked up.
-
-In the same message ask two things: **(a)** approve or request changes, and **(b)** **sketches first** (recommended — a quick wireframe look check right after this approval) or skip sketches and build in one go. Iterate until approved — feedback arrives in chat or as the comments file (`brief-contract.md` § 1, the comments channel): revise exactly the frames it names, clear the file, re-present.
-
-This is a **checkpoint gate** (`brief-contract.md` § 1). A run that starts autonomous normally has `storyboard: no` and does not enter this loop. If mode switches to autonomous after a board exists, keep updating the board, post the same summary as a heads-up, and continue without waiting; the one kept question comes at § 4.
-
-## § 2 — The sketch pass (collaborative, unless skipped)
-
-The moment the plan is approved, wireframe every frame yourself — no sub-agents, no waiting on other steps (sketches don't use timings), straight from the approved frame table.
-
-A sketch is a **wireframe with the real words, not a styled frame**: the frame's layout at its key moment — the actual headline / stat / label text placed where it will live, plain blocks for panels, charts, diagrams, and media (the workflow says what its blocks stand in for), `frame.md`'s background and ink plus one accent on the focal, nothing else. No decoration, no full brand treatment, **no motion** — all of that arrives with the build pass.
-
-Keep each sketch a real composition file at `compositions/frames/NN-*.html` (template wrapper, `data-composition-id`, `#root` styling, one paused **empty** timeline registered at `window.__timelines["<frame_id>"]`) so the Studio poster renders — and the poster is the only picture this pass needs: **run no CLI here** — no `snapshot`, no `lint` / `check`, no rendering. A sketch is a few dozen lines of HTML; the whole board lands in minutes.
-
-Mark each frame `built` as its sketch lands — the user's open board fills in blue by itself. When every frame is `built`, pause and ask one thing: does the board look right, or which frames change? This is a **checkpoint gate**; the user reviews in Studio (open since § 1 — restart and re-hand the same URL if the server died), and feedback arrives in chat or as the comments file — check the file first when the reply arrives: revise **only the sketches named**, re-present, and loop until the layout is confirmed. Only then does the workflow's visual design get written onto the confirmed layouts.
-
-A confirmed board is also a valid place to **stop**. When the user asked for a storyboard rather than a finished video — a plan to pitch, review, or hand off — the sketched board is the deliverable: confirm it, hand the board URL, and go no further unless asked to build.
-
-In autonomous mode, or when the user chose to skip sketches at § 1, skip this pass — frames go straight from `outline` to `animated` in the build.
-
-## § 3 — Building on confirmed layouts
-
-However the workflow builds — sub-agent workers per frame, or inline scene by scene — a confirmed sketch's **composition is settled**: placement, hierarchy, and copy were approved on the board, so building means dressing that layout (full design treatment, real assets, motion), never redrawing it. Workflows that dispatch workers put "this frame has a **confirmed sketch** on disk" in the worker's context and carry the keep-the-layout rule in their worker prompt; a landed frame must still read as the approved wireframe, fully dressed.
-
-Mark each frame `animated` as it lands. The build gate carries the loop's condition: in collaborative mode, the sketch board was confirmed at § 2.
-
-## § 4 — The final look
-
-After the workflow's checks pass, use the **final composition preview**. In collaborative mode Studio may already be serving from § 1; hand the timeline URL and ask one thing: render now, or what changes? In autonomous mode this is the one question the mode keeps: ask “preview first, or render?” Open the final preview on yes; render on an explicit render answer. Render only on approval.
-
-**After approval, offer the recipe — once.** An approved run is a proven bundle. At delivery, offer to freeze it: `media-use` → `scripts/recipe.mjs freeze --name <name>` (the workflow comes from BRIEF.md; pass `--workflow` only in a project without one) keeps the design spec, the storyboard skeleton (structure kept, content blanked), the brief skeleton, and the confirmed brief values, and the next run of this type starts from it (the intent layer checks for a matching recipe before its first question). When the freeze lands, teach the recall in the confirmation — "Saved as **<name>** (v<N>). Next time say _make another <name>_, or just _like last time_." — the name is something the system reminds the user of, never something they must remember. In autonomous mode don't ask — name the freeze command in the delivery note instead.