chore: import upstream snapshot with attribution

skills/hyperframes-creative/scripts/contrast-report.mjs

@@ -0,0 +1,479 @@
+#!/usr/bin/env node
+// contrast-report.mjs — HyperFrames contrast audit
+//
+// Reads a composition, seeks to N sample timestamps, walks the DOM for text
+// elements, measures the WCAG 2.1 contrast ratio between each element's
+// declared foreground color and the ACTUAL pixels behind it, and emits:
+//
+//   - contrast-report.json  (machine-readable, one entry per text element × sample)
+//   - contrast-overlay.png  (sprite grid; magenta=fail AA, yellow=pass AA only, green=AAA)
+//
+// Usage:
+//   node skills/hyperframes-creative/scripts/contrast-report.mjs <composition-dir> \
+//     [--samples N] [--out <dir>] [--width W] [--height H] [--fps N]
+//
+// Env:
+//   HYPERFRAMES_SKILL_PKG_VERSION — pin the @hyperframes/producer version used
+//     when bootstrapping (global skill installs cannot infer it; falls back to
+//     @latest with a warning otherwise).
+//
+// The composition directory must contain an index.html. Raw authoring HTML
+// works — the producer's file server auto-injects the runtime at serve time.
+// Exits 1 if any text element fails WCAG AA.
+//
+// Background sampling: each sample time is captured TWICE — once via the
+// producer's normal (video-accurate) captureFrameToBuffer for the overlay
+// image, and once via a plain page.screenshot() taken right after hiding
+// every candidate element's own text paint (color/fill → transparent,
+// layout-neutral). The second capture reveals the REAL composited pixels
+// that were directly behind the glyphs, which this script then samples
+// straight from each element's own bbox — no proximity heuristic needed.
+// This is deliberately NOT routed through captureFrameToBuffer: that
+// pipeline has a static-frame dedup cache keyed by frame index/time that
+// knows nothing about our DOM mutation and would happily hand back a
+// cached pre-mutation buffer. A direct page.screenshot() bypasses that
+// entirely and is the same technique validated in
+// packages/cli/src/commands/contrast-audit.browser.js.
+//
+// The previous approach sampled a 4px ring just OUTSIDE the bbox, which
+// breaks down whenever what's immediately outside the text differs from
+// what's actually behind it: a neighboring panel/component just past the
+// text's edge, a backdrop-filter-blurred glass panel sized only a couple
+// pixels larger than the text, or a translucent decoration that only
+// partially overlaps the ring (or sits entirely inside the bbox, never
+// touching the ring at all).
+
+import { mkdir, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { hyperframesPackageSpec, importPackagesOrBootstrap } from "./package-loader.mjs";
+
+// Use the producer's file server — it auto-injects the HyperFrames runtime
+// and render-seek bridge, so raw authoring HTML works without a build step.
+const packages = await importPackagesOrBootstrap(["@hyperframes/producer", "sharp"], {
+  npmPackages: [hyperframesPackageSpec("@hyperframes/producer"), "sharp@0.34.5"],
+});
+const sharp = packages.sharp.default;
+const {
+  createFileServer,
+  createCaptureSession,
+  initializeSession,
+  closeCaptureSession,
+  captureFrameToBuffer,
+  getCompositionDuration,
+} = packages["@hyperframes/producer"];
+
+// ─── CLI ─────────────────────────────────────────────────────────────────────
+
+const args = parseArgs(process.argv.slice(2));
+if (!args.composition) die("missing <composition-dir>");
+
+const SAMPLES = Number(args.samples ?? 10);
+const OUT_DIR = resolve(args.out ?? ".hyperframes/contrast");
+const WIDTH = Number(args.width ?? 1920);
+const HEIGHT = Number(args.height ?? 1080);
+const FPS = Number(args.fps ?? 30);
+const COMP_DIR = resolve(args.composition);
+
+// ─── Main ────────────────────────────────────────────────────────────────────
+
+await mkdir(OUT_DIR, { recursive: true });
+
+const server = await createFileServer({ projectDir: COMP_DIR, port: 0 });
+const session = await createCaptureSession(
+  server.url,
+  OUT_DIR,
+  { width: WIDTH, height: HEIGHT, fps: FPS, format: "png" },
+  null,
+);
+await initializeSession(session);
+
+try {
+  const duration = await getCompositionDuration(session);
+  const times = Array.from(
+    { length: SAMPLES },
+    (_, i) => +(((i + 0.5) / SAMPLES) * duration).toFixed(3),
+  );
+
+  const allEntries = [];
+  const overlayFrames = [];
+
+  for (let i = 0; i < times.length; i++) {
+    const t = times[i];
+    // Visible frame — used only for the human-facing overlay image.
+    const { buffer: pngBuf } = await captureFrameToBuffer(session, i, t);
+
+    // Hides each candidate's own text paint and returns its selector/fg/bbox.
+    const candidates = await prepareTextElements(session);
+    let elements;
+    try {
+      // Deliberately session.page.screenshot(), not captureFrameToBuffer —
+      // see the header comment for why.
+      const hiddenB64 = await session.page.screenshot({ encoding: "base64", type: "png" });
+      elements = await measureAgainstHiddenTextFrame(hiddenB64, candidates);
+    } finally {
+      await restoreTextElements(session);
+    }
+
+    const annotated = await annotateFrame(pngBuf, elements);
+    overlayFrames.push({ t, png: annotated });
+    for (const el of elements) allEntries.push({ time: t, ...el });
+  }
+
+  const report = {
+    composition: COMP_DIR,
+    width: WIDTH,
+    height: HEIGHT,
+    duration,
+    samples: times,
+    entries: allEntries,
+    summary: summarize(allEntries),
+  };
+
+  await writeFile(resolve(OUT_DIR, "contrast-report.json"), JSON.stringify(report, null, 2));
+  await writeOverlaySprite(overlayFrames, resolve(OUT_DIR, "contrast-overlay.png"));
+
+  printSummary(report);
+  process.exitCode = report.summary.failAA > 0 ? 1 : 0;
+} finally {
+  await closeCaptureSession(session).catch(() => {});
+  server.close();
+}
+
+// ─── DOM probe + text-hide (runs in the page) ────────────────────────────────
+
+// Walks the DOM for text-bearing elements, computes each one's foreground
+// paint, and hides that element's own text (color/fill → transparent,
+// !important, layout-neutral) so the caller's next screenshot reveals the
+// real pixels behind the glyphs. Returns the candidate list; call
+// restoreTextElements() afterward (in a finally) to undo the hide.
+async function prepareTextElements(session) {
+  return await session.page.evaluate(() => {
+    /** @type {Array<{selector: string, text: string, fg: [number,number,number,number], fontSize: number, fontWeight: number, bbox: {x:number,y:number,w:number,h:number}}>} */
+    const out = [];
+    const restores = [];
+    // Registered BEFORE the walk starts and pushed to incrementally as each
+    // element is hidden: if something in the walk throws partway through,
+    // everything hidden so far is still reachable for restore instead of
+    // leaking hidden indefinitely.
+    window.__contrastReportRestores = restores;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+    const parseColor = (c) => {
+      const m = c.match(/rgba?\(([^)]+)\)/);
+      if (!m) return [0, 0, 0, 1];
+      const parts = m[1].split(",").map((s) => parseFloat(s.trim()));
+      return [parts[0], parts[1], parts[2], parts[3] ?? 1];
+    };
+    // Like parseColor, but returns null instead of defaulting to black when
+    // the value isn't a solid rgb()/rgba() color — e.g. SVG paint keywords
+    // such as "none"/"context-fill", or a gradient/pattern reference like
+    // 'url("#grad")'. Callers should fall back to another source of truth
+    // rather than trust a fabricated black.
+    const tryParseSolidColor = (c) => {
+      const m = c.match(/rgba?\(([^)]+)\)/);
+      if (!m) return null;
+      const parts = m[1].split(",").map((s) => parseFloat(s.trim()));
+      if (parts.some((v) => Number.isNaN(v))) return null;
+      return [parts[0], parts[1], parts[2], parts[3] ?? 1];
+    };
+    // SVG text (<text>, <tspan>, <textPath>) is painted via the `fill`
+    // property, not `color` — the two are independent CSS properties in
+    // SVG. A page can set `fill` without ever touching `color`, in which
+    // case getComputedStyle(el).color resolves to the inherited/initial
+    // value (often black) and does not reflect what's actually rendered.
+    const isSvgTextElement = (el) => !!el.ownerSVGElement;
+    const selectorOf = (el) => {
+      if (el.id) return `#${el.id}`;
+      const cls = [...el.classList].slice(0, 2).join(".");
+      return cls ? `${el.tagName.toLowerCase()}.${cls}` : el.tagName.toLowerCase();
+    };
+    let el;
+    while ((el = walker.nextNode())) {
+      // must have direct text
+      const direct = [...el.childNodes].some(
+        (n) => n.nodeType === 3 && n.textContent.trim().length,
+      );
+      if (!direct) continue;
+      const cs = getComputedStyle(el);
+      if (cs.visibility === "hidden" || cs.display === "none") continue;
+      if (parseFloat(cs.opacity) <= 0.01) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 8 || rect.height < 8) continue;
+      const isSvgText = isSvgTextElement(el);
+      const fg = isSvgText
+        ? tryParseSolidColor(cs.fill) || parseColor(cs.color)
+        : parseColor(cs.color);
+      if (fg[3] <= 0.01) continue;
+
+      // A `transition` on color/fill would otherwise animate this hide
+      // instead of applying it instantly — the screenshot taken right after
+      // can catch a partially-transparent glyph mid-transition instead of a
+      // fully hidden one, contaminating the background sample. Force
+      // `transition: none` alongside color/fill so the hide is atomic.
+      const origTransition = el.style.getPropertyValue("transition");
+      const origTransitionPriority = el.style.getPropertyPriority("transition");
+      el.style.setProperty("transition", "none", "important");
+      const origColor = el.style.getPropertyValue("color");
+      const origColorPriority = el.style.getPropertyPriority("color");
+      el.style.setProperty("color", "transparent", "important");
+      let origFill = null;
+      let origFillPriority = null;
+      if (isSvgText) {
+        origFill = el.style.getPropertyValue("fill");
+        origFillPriority = el.style.getPropertyPriority("fill");
+        el.style.setProperty("fill", "transparent", "important");
+      }
+      restores.push({
+        el,
+        origTransition,
+        origTransitionPriority,
+        origColor,
+        origColorPriority,
+        origFill,
+        origFillPriority,
+        isSvgText,
+      });
+
+      out.push({
+        selector: selectorOf(el),
+        text: el.textContent.trim().slice(0, 60),
+        fg,
+        fontSize: parseFloat(cs.fontSize),
+        fontWeight: Number(cs.fontWeight) || 400,
+        bbox: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
+      });
+    }
+    return out;
+  });
+}
+
+async function restoreTextElements(session) {
+  await session.page.evaluate(() => {
+    const restores = window.__contrastReportRestores;
+    if (!restores) return;
+    for (const r of restores) {
+      if (r.origColor) r.el.style.setProperty("color", r.origColor, r.origColorPriority);
+      else r.el.style.removeProperty("color");
+      if (r.isSvgText) {
+        if (r.origFill) r.el.style.setProperty("fill", r.origFill, r.origFillPriority);
+        else r.el.style.removeProperty("fill");
+      }
+      if (r.origTransition) {
+        r.el.style.setProperty("transition", r.origTransition, r.origTransitionPriority);
+      } else r.el.style.removeProperty("transition");
+    }
+    window.__contrastReportRestores = null;
+  });
+}
+
+// ─── Pixel sampling + WCAG math ──────────────────────────────────────────────
+
+// Samples the REAL composited background directly inside each candidate's
+// own bbox, from a screenshot taken with every candidate's text hidden —
+// robust to panel edges, backdrop-filter blur, and translucent decoration
+// in ways a proximity-based ring outside the bbox isn't. Mirrors
+// packages/cli/src/commands/contrast-sample.ts's computeSampleRect /
+// sampleGridPoints (kept in sync, not imported — this script bootstraps
+// npm-published packages and can't reach into the cli package's sources).
+async function measureAgainstHiddenTextFrame(hiddenImgBase64, candidates) {
+  const raw = Buffer.from(hiddenImgBase64, "base64");
+  const img = sharp(raw);
+  const { width, height } = await img.metadata();
+  const pixels = await img.ensureAlpha().raw().toBuffer();
+  const channels = 4;
+
+  const measured = [];
+  for (const c of candidates) {
+    const bg = sampleBboxMedian(pixels, width, height, channels, c.bbox);
+    if (!bg) continue;
+    const fg = compositeOver(c.fg, bg); // flatten any alpha against measured bg
+    const ratio = wcagRatio(fg, bg);
+    const large = isLargeText(c.fontSize, c.fontWeight);
+    measured.push({
+      selector: c.selector,
+      text: c.text,
+      fg,
+      fontSize: c.fontSize,
+      fontWeight: c.fontWeight,
+      bbox: c.bbox,
+      bg,
+      ratio: +ratio.toFixed(2),
+      wcagAA: large ? ratio >= 3 : ratio >= 4.5,
+      wcagAALarge: ratio >= 3,
+      wcagAAA: large ? ratio >= 4.5 : ratio >= 7,
+    });
+  }
+  return measured;
+}
+
+async function annotateFrame(pngBuf, elements) {
+  const { width, height } = await sharp(pngBuf).metadata();
+  // Draw boxes + ratio labels as an SVG overlay (sharp composite).
+  const svg = buildOverlaySVG(elements, width, height);
+  return await sharp(pngBuf)
+    .composite([{ input: Buffer.from(svg), top: 0, left: 0 }])
+    .png()
+    .toBuffer();
+}
+
+function sampleBboxMedian(raw, width, height, channels, bbox) {
+  // Sample the element's OWN box (glyphs are hidden in this frame), inset
+  // 1px on each side to dodge anti-aliased edge pixels, clamped to the
+  // frame bounds. A bounded grid, not a full scan, so a wide caption bar
+  // doesn't turn into thousands of samples.
+  const x0 = Math.max(0, Math.round(bbox.x) + 1);
+  const x1 = Math.min(width - 1, Math.round(bbox.x + bbox.w) - 1);
+  const y0 = Math.max(0, Math.round(bbox.y) + 1);
+  const y1 = Math.min(height - 1, Math.round(bbox.y + bbox.h) - 1);
+  if (x1 <= x0 || y1 <= y0) return null;
+
+  const stepX = Math.max(1, Math.floor((x1 - x0) / 12));
+  const stepY = Math.max(1, Math.floor((y1 - y0) / 6));
+  const r = [],
+    g = [],
+    b = [];
+  for (let y = y0; y <= y1; y += stepY) {
+    for (let x = x0; x <= x1; x += stepX) {
+      const i = (y * width + x) * channels;
+      r.push(raw[i]);
+      g.push(raw[i + 1]);
+      b.push(raw[i + 2]);
+    }
+  }
+  if (r.length === 0) return null;
+  return [median(r), median(g), median(b), 1];
+}
+
+function median(arr) {
+  const s = [...arr].sort((a, b) => a - b);
+  return s[Math.floor(s.length / 2)];
+}
+
+function compositeOver([fr, fg, fb, fa], [br, bg, bb]) {
+  return [
+    Math.round(fr * fa + br * (1 - fa)),
+    Math.round(fg * fa + bg * (1 - fa)),
+    Math.round(fb * fa + bb * (1 - fa)),
+    1,
+  ];
+}
+
+function relLum([r, g, b]) {
+  const ch = (v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * ch(r) + 0.7152 * ch(g) + 0.0722 * ch(b);
+}
+
+function wcagRatio(a, b) {
+  const la = relLum(a);
+  const lb = relLum(b);
+  const [L1, L2] = la > lb ? [la, lb] : [lb, la];
+  return (L1 + 0.05) / (L2 + 0.05);
+}
+
+function isLargeText(fontSize, fontWeight) {
+  return fontSize >= 24 || (fontSize >= 19 && fontWeight >= 700);
+}
+
+// ─── Overlay rendering ───────────────────────────────────────────────────────
+
+function buildOverlaySVG(elements, w, h) {
+  const rects = elements
+    .map((el) => {
+      const color = !el.wcagAA ? "#ff00aa" : !el.wcagAAA ? "#ffcc00" : "#00e08a";
+      const { x, y, w: bw, h: bh } = el.bbox;
+      return `
+        <rect x="${x}" y="${y}" width="${bw}" height="${bh}"
+              fill="none" stroke="${color}" stroke-width="3"/>
+        <rect x="${x}" y="${y - 18}" width="${48}" height="16" fill="${color}"/>
+        <text x="${x + 4}" y="${y - 5}" font-family="monospace" font-size="12" fill="#000">
+          ${el.ratio.toFixed(1)}:1
+        </text>`;
+    })
+    .join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">${rects}</svg>`;
+}
+
+async function writeOverlaySprite(frames, outPath) {
+  if (!frames.length) return;
+  const cols = Math.min(frames.length, 5);
+  const rows = Math.ceil(frames.length / cols);
+  const { width, height } = await sharp(frames[0].png).metadata();
+  const scale = 0.25;
+  const cellW = Math.round(width * scale);
+  const cellH = Math.round(height * scale);
+
+  const cells = await Promise.all(
+    frames.map(async (f) => ({
+      input: await sharp(f.png).resize(cellW, cellH).png().toBuffer(),
+      time: f.t,
+    })),
+  );
+
+  const composites = cells.map((c, i) => ({
+    input: c.input,
+    top: Math.floor(i / cols) * cellH,
+    left: (i % cols) * cellW,
+  }));
+
+  await sharp({
+    create: {
+      width: cols * cellW,
+      height: rows * cellH,
+      channels: 3,
+      background: { r: 16, g: 16, b: 20 },
+    },
+  })
+    .composite(composites)
+    .png()
+    .toFile(outPath);
+}
+
+// ─── Summary ────────────────────────────────────────────────────────────────
+
+function summarize(entries) {
+  const total = entries.length;
+  const failAA = entries.filter((e) => !e.wcagAA).length;
+  const passAAonly = entries.filter((e) => e.wcagAA && !e.wcagAAA).length;
+  const passAAA = entries.filter((e) => e.wcagAAA).length;
+  return { total, failAA, passAAonly, passAAA };
+}
+
+function printSummary({ summary, entries }) {
+  const { total, failAA, passAAonly, passAAA } = summary;
+  console.log(`\nContrast report: ${total} text-element samples`);
+  console.log(`  fail WCAG AA:     ${failAA}`);
+  console.log(`  pass AA, not AAA: ${passAAonly}`);
+  console.log(`  pass AAA:         ${passAAA}`);
+  if (failAA) {
+    console.log("\nFailures:");
+    for (const e of entries.filter((x) => !x.wcagAA)) {
+      console.log(`  t=${e.time}s  ${e.selector.padEnd(24)}  ${e.ratio.toFixed(2)}:1  "${e.text}"`);
+    }
+  }
+}
+
+// ─── Utilities ──────────────────────────────────────────────────────────────
+
+function parseArgs(argv) {
+  const out = {};
+  let positional = 0;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith("--")) {
+      const k = a.slice(2);
+      const v = argv[i + 1]?.startsWith("--") ? true : argv[++i];
+      out[k] = v;
+    } else if (positional === 0) {
+      out.composition = a;
+      positional++;
+    }
+  }
+  return out;
+}
+
+function die(msg) {
+  console.error(`contrast-report: ${msg}`);
+  process.exit(2);
+}

skills/hyperframes-creative/scripts/extract-audio-data.py

@@ -0,0 +1,188 @@
+#!/usr/bin/env python3
+"""
+Extract per-frame audio visualization data from an audio or video file.
+
+Outputs JSON with RMS amplitude and frequency band data at the target FPS,
+ready to embed in a HyperFrames composition.
+
+Usage:
+    python extract-audio-data.py input.mp3 -o audio-data.json
+    python extract-audio-data.py input.mp4 --fps 30 --bands 16 -o audio-data.json
+
+Requirements:
+    - Python 3.9+
+    - ffmpeg (for decoding audio)
+    - numpy (pip install numpy)
+"""
+
+import argparse
+import json
+import subprocess
+import sys
+
+import numpy as np
+
+# ---------------------------------------------------------------------------
+# FFT parameters
+#
+# A 4096-sample window gives ~10.8 Hz per bin at 44100Hz — enough to resolve
+# low-frequency bands cleanly. The per-frame audio slice (44100/30 = 1470
+# samples at 30fps) is too small and causes low bands to map to the same bins.
+#
+# Frequency range 30Hz–16kHz covers the useful range for music. Below 30Hz is
+# sub-bass most speakers can't reproduce; above 16kHz is noise/harmonics that
+# don't contribute to perceived rhythm or melody.
+# ---------------------------------------------------------------------------
+
+SAMPLE_RATE = 44100
+FFT_SIZE = 4096
+MIN_FREQ = 30.0
+MAX_FREQ = 16000.0
+
+
+def decode_audio(path: str) -> np.ndarray:
+    """Decode audio to mono float32 samples via ffmpeg."""
+    cmd = [
+        "ffmpeg", "-i", path,
+        "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE),
+        "-f", "s16le", "-acodec", "pcm_s16le",
+        "-loglevel", "error",
+        "pipe:1",
+    ]
+    result = subprocess.run(cmd, capture_output=True)
+    if result.returncode != 0:
+        print(f"ffmpeg error: {result.stderr.decode()}", file=sys.stderr)
+        sys.exit(1)
+    return np.frombuffer(result.stdout, dtype=np.int16).astype(np.float32) / 32768.0
+
+
+def compute_band_edges(n_bands: int) -> np.ndarray:
+    """Logarithmically-spaced frequency band edges from MIN_FREQ to MAX_FREQ."""
+    return np.array([
+        MIN_FREQ * (MAX_FREQ / MIN_FREQ) ** (i / n_bands)
+        for i in range(n_bands + 1)
+    ])
+
+
+def compute_fft_bands(
+    windowed: np.ndarray, freq_per_bin: float, n_bins: int,
+    band_edges: np.ndarray, n_bands: int,
+) -> np.ndarray:
+    """Compute peak magnitude in logarithmically-spaced frequency bands."""
+    magnitudes = np.abs(np.fft.rfft(windowed))
+
+    bands = np.zeros(n_bands)
+    for b in range(n_bands):
+        low_bin = max(0, int(band_edges[b] / freq_per_bin))
+        high_bin = min(n_bins, int(band_edges[b + 1] / freq_per_bin))
+        if high_bin <= low_bin:
+            high_bin = low_bin + 1
+        # Clamp to valid range to avoid empty slices
+        low_bin = min(low_bin, n_bins - 1)
+        high_bin = min(high_bin, n_bins)
+        bands[b] = np.max(magnitudes[low_bin:high_bin])
+
+    return bands
+
+
+def extract(path: str, fps: int, n_bands: int) -> dict:
+    """Extract per-frame audio data."""
+    print(f"Decoding audio from {path}...", file=sys.stderr)
+    samples = decode_audio(path)
+    duration = len(samples) / SAMPLE_RATE
+    frame_step = SAMPLE_RATE // fps
+    total_frames = int(duration * fps)
+
+    print(f"Duration: {duration:.1f}s, {total_frames} frames at {fps}fps", file=sys.stderr)
+    print(f"FFT window: {FFT_SIZE} samples ({SAMPLE_RATE / FFT_SIZE:.1f} Hz/bin)", file=sys.stderr)
+    print(f"Frequency range: {MIN_FREQ:.0f}-{MAX_FREQ:.0f} Hz, {n_bands} bands", file=sys.stderr)
+
+    # Precompute constants
+    hann = np.hanning(FFT_SIZE)
+    band_edges = compute_band_edges(n_bands)
+    freq_per_bin = SAMPLE_RATE / FFT_SIZE
+    n_bins = FFT_SIZE // 2 + 1
+    half_fft = FFT_SIZE // 2
+
+    # Pass 1: extract raw values
+    rms_values = np.zeros(total_frames)
+    band_values = np.zeros((total_frames, n_bands))
+
+    for f in range(total_frames):
+        # RMS from the frame's audio slice
+        rms_start = f * frame_step
+        rms_end = rms_start + frame_step
+        frame_slice = samples[rms_start:min(rms_end, len(samples))]
+        if len(frame_slice) > 0:
+            rms_values[f] = np.sqrt(np.mean(frame_slice ** 2))
+
+        # FFT from a centered 4096-sample window
+        center = rms_start + frame_step // 2
+        win_start = center - half_fft
+        win_end = center + half_fft
+
+        if win_start >= 0 and win_end <= len(samples):
+            window = samples[win_start:win_end] * hann
+        else:
+            # Zero-pad at edges
+            padded = np.zeros(FFT_SIZE)
+            src_start = max(0, win_start)
+            src_end = min(len(samples), win_end)
+            dst_start = src_start - win_start
+            dst_end = dst_start + (src_end - src_start)
+            padded[dst_start:dst_end] = samples[src_start:src_end]
+            window = padded * hann
+
+        band_values[f] = compute_fft_bands(window, freq_per_bin, n_bins, band_edges, n_bands)
+
+    # Pass 2: normalize
+    peak_rms = rms_values.max() if total_frames > 0 else 1.0
+    if peak_rms > 0:
+        rms_values /= peak_rms
+
+    # Per-band normalization so treble is visible alongside louder bass
+    band_peaks = band_values.max(axis=0)
+    band_peaks[band_peaks == 0] = 1.0
+    band_values /= band_peaks
+
+    # Build output
+    frames = []
+    for f in range(total_frames):
+        frames.append({
+            "time": round(f / fps, 4),
+            "rms": round(float(rms_values[f]), 4),
+            "bands": [round(float(b), 4) for b in band_values[f]],
+        })
+
+    return {
+        "duration": round(duration, 4),
+        "fps": fps,
+        "bands": n_bands,
+        "totalFrames": total_frames,
+        "frames": frames,
+    }
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Extract per-frame audio visualization data")
+    parser.add_argument("input", help="Audio or video file")
+    parser.add_argument("-o", "--output", default="audio-data.json", help="Output JSON path")
+    parser.add_argument("--fps", type=int, default=30, help="Frames per second (default: 30)")
+    parser.add_argument("--bands", type=int, default=16, help="Number of frequency bands (default: 16)")
+    args = parser.parse_args()
+
+    if args.fps < 1:
+        parser.error("--fps must be at least 1")
+    if args.bands < 1:
+        parser.error("--bands must be at least 1")
+
+    data = extract(args.input, args.fps, args.bands)
+
+    with open(args.output, "w") as f:
+        json.dump(data, f)
+
+    print(f"Wrote {args.output} ({data['totalFrames']} frames, {data['bands']} bands)", file=sys.stderr)
+
+
+if __name__ == "__main__":
+    main()

skills/hyperframes-creative/scripts/package-loader.mjs

@@ -0,0 +1,288 @@
+// package-loader — bootstrap optional helper packages only when missing, with
+// defense-in-depth so a malicious or typo'd dependency can't run on install:
+//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"
+//   • install runs `npm install --ignore-scripts` — package lifecycle scripts
+//     never execute
+//   • `--no-save` into a throwaway tmp dir — the host project is left untouched
+//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)
+//   • npm is spawned with an argv array (no shell) — never a built command string
+// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error
+// text); they are never handed to a shell or executed.
+import { spawnSync } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { basename, delimiter, dirname, join, parse, resolve } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const VERSION_OVERRIDE_ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+const BOOTSTRAP_ENV = "HYPERFRAMES_SKILL_DEPS_BOOTSTRAPPED";
+const BOOTSTRAP_CONFIRM_ENV = "HYPERFRAMES_SKILL_BOOTSTRAP_DEPS";
+const NODE_MODULES_ENV = "HYPERFRAMES_SKILL_NODE_MODULES";
+
+export async function importPackagesOrBootstrap(packageNames, options = {}) {
+  const entries = new Map();
+  const missing = [];
+
+  for (const packageName of packageNames) {
+    const entry = resolvePackageEntry(packageName);
+    if (entry) entries.set(packageName, entry);
+    else missing.push(packageName);
+  }
+
+  if (missing.length > 0 && !process.env[BOOTSTRAP_ENV]) {
+    const npmPackages = options.npmPackages ?? missing;
+    assertPinnedPackageSpecs(npmPackages);
+    await confirmBootstrap(npmPackages);
+    bootstrapWithNpmInstall(npmPackages);
+  }
+
+  if (missing.length > 0) {
+    throw new Error(
+      [
+        `Could not resolve required package(s): ${missing.join(", ")}`,
+        "Install them in this project, for example:",
+        `  npm install --save-dev ${packageNames.map(shellQuote).join(" ")}`,
+      ].join("\n"),
+    );
+  }
+
+  const modules = {};
+  for (const [packageName, entry] of entries) {
+    modules[packageName] = await import(pathToFileURL(entry).href);
+  }
+  return modules;
+}
+
+export function hyperframesPackageSpec(packageName) {
+  const override = process.env[VERSION_OVERRIDE_ENV]?.trim();
+  if (override) return `${packageName}@${override}`;
+
+  const version = readBundledHyperframesVersion();
+  if (version) return `${packageName}@${version}`;
+
+  // Global skill installs (e.g. ~/.claude/skills) have no hyperframes package.json
+  // in their ancestor chain, so the bundled version is unknowable. Fall back to
+  // @latest instead of throwing: already-installed packages still import, and a
+  // bootstrap install can still proceed (@latest satisfies the pinned-spec guard).
+  process.stderr.write(
+    [
+      `hyperframes: could not determine the bundled version for ${packageName}; using @latest.`,
+      `Set ${VERSION_OVERRIDE_ENV}=<version> to pin it.`,
+      "",
+    ].join("\n"),
+  );
+  return `${packageName}@latest`;
+}
+
+function resolvePackageEntry(packageName) {
+  const bases = [process.cwd(), HERE, ...envNodeModulesDirs(), ...nodeModulesDirsFromPath()];
+
+  const seen = new Set();
+  for (const base of bases) {
+    const normalized = resolve(base);
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+
+    try {
+      return createRequire(join(normalized, "__hyperframes_skill_loader__.cjs")).resolve(
+        packageName,
+      );
+    } catch {
+      const packageDir = findPackageDir(normalized, packageName);
+      const packageEntry = packageDir ? readPackageEntry(packageDir) : null;
+      if (packageEntry) return packageEntry;
+    }
+  }
+
+  return null;
+}
+
+function readBundledHyperframesVersion() {
+  for (const ancestor of ancestors(HERE)) {
+    const directVersion = readPackageVersion(join(ancestor, "package.json"));
+    if (directVersion) return directVersion;
+
+    const monorepoCliVersion = readPackageVersion(
+      join(ancestor, "packages", "cli", "package.json"),
+    );
+    if (monorepoCliVersion) return monorepoCliVersion;
+  }
+  return null;
+}
+
+function readPackageVersion(packageJsonPath) {
+  try {
+    const manifest = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+    if (manifest.name === "hyperframes" || manifest.name === "@hyperframes/cli") {
+      return typeof manifest.version === "string" ? manifest.version : null;
+    }
+  } catch {
+    // Keep searching ancestor package manifests.
+  }
+  return null;
+}
+
+function envNodeModulesDirs() {
+  return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);
+}
+
+function nodeModulesDirsFromPath() {
+  const dirs = [];
+  for (const entry of (process.env.PATH ?? "").split(delimiter)) {
+    if (!entry.endsWith(`${join("node_modules", ".bin")}`)) continue;
+    dirs.push(dirname(entry));
+  }
+  return dirs;
+}
+
+function findPackageDir(base, packageName) {
+  const packageSegments = packageName.split("/");
+  const roots =
+    basename(base) === "node_modules"
+      ? [base]
+      : ancestors(base).map((ancestor) => join(ancestor, "node_modules"));
+
+  for (const root of roots) {
+    const packageDir = join(root, ...packageSegments);
+    if (existsSync(join(packageDir, "package.json"))) return packageDir;
+  }
+  return null;
+}
+
+function readPackageEntry(packageDir) {
+  try {
+    const manifest = JSON.parse(readFileSync(join(packageDir, "package.json"), "utf8"));
+    const entry = exportEntry(manifest.exports) ?? manifest.module ?? manifest.main ?? "index.js";
+    const entryPath = join(packageDir, entry);
+    return existsSync(entryPath) ? entryPath : null;
+  } catch {
+    return null;
+  }
+}
+
+function exportEntry(exports) {
+  const root =
+    typeof exports === "object" && exports !== null ? (exports["."] ?? exports) : exports;
+  if (typeof root === "string") return root;
+  if (typeof root !== "object" || root === null) return null;
+  if (typeof root.import === "string") return root.import;
+  if (typeof root.default === "string") return root.default;
+  if (typeof root.node === "string") return root.node;
+  if (typeof root.node === "object" && root.node !== null) {
+    return root.node.import ?? root.node.default ?? null;
+  }
+  return null;
+}
+
+function assertPinnedPackageSpecs(packageSpecs) {
+  const unpinned = packageSpecs.filter((spec) => !hasVersionSpec(spec));
+  if (unpinned.length === 0) return;
+  throw new Error(
+    [
+      `Refusing to bootstrap unpinned package spec(s): ${unpinned.join(", ")}`,
+      "Pass pinned npm package specs, for example:",
+      `  ${packageSpecs.map((spec) => (hasVersionSpec(spec) ? spec : `${spec}@<version>`)).join(" ")}`,
+    ].join("\n"),
+  );
+}
+
+function hasVersionSpec(packageSpec) {
+  if (packageSpec.startsWith("@")) {
+    const slash = packageSpec.indexOf("/");
+    return slash !== -1 && packageSpec.indexOf("@", slash + 1) !== -1;
+  }
+  return packageSpec.includes("@");
+}
+
+async function confirmBootstrap(packageSpecs) {
+  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;
+
+  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;
+  if (!process.stdin.isTTY) {
+    throw new Error(
+      [
+        "Required helper package(s) are missing.",
+        "To allow a one-time temporary dependency bootstrap for this run, set:",
+        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,
+        "The bootstrap command will be:",
+        `  ${installLine}`,
+      ].join("\n"),
+    );
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stderr });
+  try {
+    const answer = await rl.question(
+      [
+        "HyperFrames helper package(s) are missing.",
+        `Run a temporary install with lifecycle scripts disabled?`,
+        `  ${installLine}`,
+        "Proceed? [y/N] ",
+      ].join("\n"),
+    );
+    if (!/^(y|yes)$/i.test(answer.trim())) {
+      throw new Error("Dependency bootstrap cancelled.");
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+function ancestors(start) {
+  const dirs = [];
+  let current = resolve(start);
+  const root = parse(current).root;
+  while (current && current !== root) {
+    dirs.push(current);
+    current = dirname(current);
+  }
+  dirs.push(root);
+  return dirs;
+}
+
+function bootstrapWithNpmInstall(packageNames) {
+  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));
+  const installResult = spawnSync(
+    process.platform === "win32" ? "npm.cmd" : "npm",
+    [
+      "install",
+      "--silent",
+      "--no-audit",
+      "--no-fund",
+      "--ignore-scripts",
+      "--no-save",
+      "--prefix",
+      installRoot,
+      ...packageNames,
+    ],
+    { stdio: "inherit" },
+  );
+
+  if (installResult.error) throw installResult.error;
+  if (installResult.status !== 0) {
+    rmSync(installRoot, { recursive: true, force: true });
+    process.exit(installResult.status ?? 1);
+  }
+
+  const args = [...process.argv.slice(1)];
+  const result = spawnSync(process.execPath, args, {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      [BOOTSTRAP_ENV]: "1",
+      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),
+    },
+  });
+
+  rmSync(installRoot, { recursive: true, force: true });
+  if (result.error) throw result.error;
+  process.exit(result.status ?? 1);
+}
+
+function shellQuote(value) {
+  if (/^[A-Za-z0-9_./:@=-]+$/.test(value)) return value;
+  return `'${value.replace(/'/g, "'\\''")}'`;
+}

skills/hyperframes-creative/scripts/package-loader.test.mjs

@@ -0,0 +1,62 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+
+// (a) env override wins — no ancestor lookup, exact version echoed back.
+test("hyperframesPackageSpec: env override wins", async () => {
+  const prev = process.env[ENV];
+  process.env[ENV] = "9.9.9";
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    assert.equal(hyperframesPackageSpec("@hyperframes/producer"), "@hyperframes/producer@9.9.9");
+  } finally {
+    if (prev === undefined) delete process.env[ENV];
+    else process.env[ENV] = prev;
+  }
+});
+
+// (b) resolvable version (in-repo) pins the bundled hyperframes/@hyperframes/cli version.
+test("hyperframesPackageSpec: resolvable in-repo version pins it", async () => {
+  const prev = process.env[ENV];
+  delete process.env[ENV];
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    const spec = hyperframesPackageSpec("@hyperframes/producer");
+    assert.match(spec, /^@hyperframes\/producer@\d+\.\d+\.\d+/);
+  } finally {
+    if (prev !== undefined) process.env[ENV] = prev;
+  }
+});
+
+// (c) unresolvable + no override -> @latest fallback, no throw (global-install case).
+// Copy the loader into an isolated temp dir whose ancestor chain has no hyperframes
+// package.json, and run node from there so cwd cannot resolve one either.
+test("hyperframesPackageSpec: unresolvable falls back to @latest without throwing", () => {
+  const dir = mkdtempSync(join(tmpdir(), "hf-pkgloader-"));
+  try {
+    copyFileSync(join(HERE, "package-loader.mjs"), join(dir, "package-loader.mjs"));
+    const probe = join(dir, "probe.mjs");
+    writeFileSync(
+      probe,
+      [
+        'import { hyperframesPackageSpec } from "./package-loader.mjs";',
+        'process.stdout.write(hyperframesPackageSpec("@hyperframes/producer"));',
+        "",
+      ].join("\n"),
+    );
+    const res = spawnSync(process.execPath, [probe], { cwd: dir, encoding: "utf8" });
+    assert.equal(res.status, 0, res.stderr);
+    assert.equal(res.stdout.trim(), "@hyperframes/producer@latest");
+    assert.match(res.stderr, /using @latest/);
+    assert.match(res.stderr, new RegExp(ENV));
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});