fix(claude-design-skill): close three gaps Claude Design self-identified

During Test-v10, Claude Design spent significant time debugging three
issues the skill didn't address clearly. Each sentence below would
have prevented the problem.

1. **Sub-composition preview loading.** The skill previously said
   `data-composition-src` loads sub-comps but didn't state when the
   runtime processes it. Claude Design hedged with a plain
   `<iframe src="sub.html?standalone=1">` thinking auto-nesting might
   be render-only — which produces an empty iframe because the
   `<template>` wrapper is inert under normal HTML rendering.
   Verified via `packages/core/src/runtime/compositionLoader.ts` that
   the runtime handles `data-composition-src` at both preview and
   render time. Added: "The HyperFrames runtime auto-nests
   sub-compositions in both preview AND render. Don't hedge with a
   plain <iframe>."

2. **Scene visibility ownership for shader-transition compositions.**
   The skill said `html2canvas` captures scene textures and the
   canvas composites them during transitions — but never said who
   owns `.scene` opacity *between* transitions. Claude Design set
   opacity:0 on all scenes and ended up with a dead state
   (everything hidden). Added: "HyperShader drives the transition
   overlay, NOT scene presence. You own scene show/hide via tl.set()
   with autoAlpha."

3. **Dev-time scrubbing deadlock.** The skill warns about scrub
   latency for shader transitions during user playback but not about
   rapid `tl.progress()` calls during dev-time inspection queuing
   html2canvas captures. Claude Design hit repeated
   save_screenshot timeouts from this. Added: "Dev-time scrubbing
   trap: pause first, then tl.time(t) once."

Net: +18 lines targeting three specific failure modes observed in
the field.

Made-with: Cursor

Author: ukimsanov

skills/claude-design-hyperframes/SKILL.md

@@ -167,6 +167,8 @@ tl.from(".subtitle", { y: 40, opacity: 0, duration: 0.5, ease: "power2.out" }, 0
 
 Load external sub-comp HTMLs with `data-composition-src`. Sub-comp files use a `<template>` wrapper — standalone `index.html` does NOT (a `<template>` hides its contents from the browser; applied to the root it breaks rendering).
 
+**The HyperFrames runtime auto-nests sub-compositions in both preview AND render.** Don't hedge with a plain `<iframe src="compositions/sub.html">` — a `<template>`-wrapped file renders empty in a plain iframe because the template contents are inert by HTML spec. The `data-composition-src` attribute on a div is the supported mechanism; the runtime handles loading, timeline attachment, and texture composite. Examples of real compositions using this: `registry/examples/kinetic-type`, `registry/examples/nyt-graph`, `registry/examples/decision-tree`.
+
 ```html
 <!-- in index.html -->
 <div
@@ -344,6 +346,20 @@ Load the package from CDN and wire it to your timeline. The IIFE build exposes t
 </script>
 ```
 
+**Scene visibility is yours to own.** HyperShader drives the transition overlay (the WebGL canvas during transition intervals) — it does NOT manage which scene is currently visible between transitions. Start every scene at `opacity: 0` in CSS (except scene-1, which is visible from t=0), then mount/unmount each scene on the timeline:
+
+```js
+// inside tl construction, after init()
+tl.set("#scene-1", { autoAlpha: 1 }, 0); // scene 1 visible from start
+tl.set("#scene-1", { autoAlpha: 0 }, 5.0); // at transition start, fade out
+tl.set("#scene-2", { autoAlpha: 1 }, 5.0); // scene 2 visible
+tl.set("#scene-2", { autoAlpha: 0 }, 12.0);
+tl.set("#scene-3", { autoAlpha: 1 }, 12.0);
+// …etc
+```
+
+Without these sets, all scenes stay at CSS opacity:0 and the composition shows nothing between transitions.
+
 Shader-compatible CSS rules (apply only to shader-transition compositions — `html2canvas` captures each scene to a WebGL texture, and its rendering pipeline doesn't match CSS exactly):
 
 - **No `transparent` in gradients.** Canvas interpolates `transparent` as `rgba(0,0,0,0)` (black at zero alpha), creating dark fringes. Use the target color at zero alpha: `rgba(200,117,51,0)` not `transparent`.
@@ -359,6 +375,8 @@ Don't mix CSS and shader transitions in the same composition — pick one. Shade
 
 **Prefer CSS transitions** when the composition will be previewed interactively with lots of scrubbing. Shader transitions are optimized for linear playback — the package captures scene textures via `html2canvas` at transition time and holds them between transitions. When a user scrubs to an arbitrary time, the canvas still holds a stale texture until a new capture completes, producing a visible blank gap. For final renders (`npx hyperframes render`) this doesn't matter — the render engine runs linearly.
 
+**Dev-time scrubbing trap:** don't call `tl.progress(n)` in rapid succession (e.g. from a loop or dev tools) on a shader-transition composition. Each progress change can queue a fresh `html2canvas` capture; rapid scrubbing deadlocks the capture pipeline. If you need to inspect a specific time, `tl.pause()` first and call `tl.time(t)` once — or use the player's `currentTime` setter, which throttles.
+
 For CSS transitions: scenes are absolute-positioned `.scene` containers with opacity driven directly by GSAP tweens. Every scrub position renders cleanly because the DOM is the surface, no capture latency.
 
 ## Typography