Add HyperFrames skills

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB

.agents/skills/product-launch-video/scripts/lib/pad-frame-duration.test.mjs

@@ -0,0 +1,76 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { padFrameInternalDuration } from "./pad-frame-duration.mjs";
+
+// Regression: an outgoing transition pads the index.html WRAPPER's
+// data-duration to cover the transition tail, but the frame's own internal
+// file kept its shorter content-only duration, so the render engine
+// clip-gated the sub-composition's visible content at the shorter value —
+// content vanished abruptly instead of fading through the wrapper's
+// extended fade-out tween. A user diagnosed and verified this fix
+// themselves: pad the frame's own #root/clip data-duration to match.
+test("padFrameInternalDuration pads the matching frame's own data-duration", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-"));
+  const framesDir = join(dir, "compositions", "frames");
+  mkdirSync(framesDir, { recursive: true });
+  const frameSrc = "compositions/frames/scene-1.html";
+  const framePath = join(dir, frameSrc);
+  writeFileSync(
+    framePath,
+    `<template>
+  <div
+    id="root"
+    data-composition-id="scene-1"
+    data-width="1920"
+    data-height="1080"
+    data-duration="4.2"
+  ></div>
+</template>`,
+  );
+
+  try {
+    padFrameInternalDuration(dir, frameSrc, "scene-1", 4.7);
+    const updated = readFileSync(framePath, "utf8");
+    assert.match(updated, /data-duration="4\.7"/);
+    assert.doesNotMatch(updated, /data-duration="4\.2"/);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("padFrameInternalDuration only touches the tag matching the given frame id", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-scope-"));
+  const framesDir = join(dir, "compositions", "frames");
+  mkdirSync(framesDir, { recursive: true });
+  const frameSrc = "compositions/frames/scene-2.html";
+  const framePath = join(dir, frameSrc);
+  const original = `<template>
+  <div id="root" data-composition-id="scene-2" data-duration="3.0">
+    <div data-composition-id="unrelated-child" data-duration="1.0"></div>
+  </div>
+</template>`;
+  writeFileSync(framePath, original);
+
+  try {
+    padFrameInternalDuration(dir, frameSrc, "scene-2", 3.5);
+    const updated = readFileSync(framePath, "utf8");
+    assert.match(updated, /data-composition-id="scene-2" data-duration="3\.5"/);
+    assert.match(updated, /data-composition-id="unrelated-child" data-duration="1\.0"/);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("padFrameInternalDuration is a no-op when the frame file does not exist", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-missing-"));
+  try {
+    assert.doesNotThrow(() =>
+      padFrameInternalDuration(dir, "compositions/frames/missing.html", "missing", 5),
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});