docs(skill): sync hyperframes skill with upstream changes

Pulls the hyperframes skill up to the latest state of heygen-com/hyperframes
skill content. Opened 2026-04-17; upstream has shipped CLI, layout, and path
changes since.

- SKILL.md: promote the visual-style check to a proper HARD-GATE
  (DESIGN.md > named style > ask 3 questions, with the #333/#3b82f6/Roboto
  tells); expand Step 6 to cover audio-reactive (mandatory per-frame
  tl.call() sampling loop — a single long tween does NOT react to audio),
  caption exit guarantee (hard tl.set kill after group.end), marker
  highlighting, and scene transitions; add the animation-map script to
  Verification; link the new features.md.

- references/cli.md: add capture and validate (both shipped commands, both
  referenced from the workflow but missing from the reference). Add
  --lang to tts with the voice-prefix auto-inference table and espeak-ng
  dependency note (heygen-com/hyperframes#351, 2026-04-20 — after this
  PR opened).

- references/website-to-video.md: update all paths to the capture/
  subfolder layout introduced in heygen-com/hyperframes#345
  (capture/screenshots/, capture/assets/, capture/extracted/tokens.json).
  Old captured/ prefix was broken — agents following the skill were
  looking for files in wrong locations.

- references/features.md (new): distilled coverage for captions (language
  rule, tone table, word grouping, fitTextFontSize, exit guarantee), TTS
  (multilingual phonemization, speed tuning), audio-reactive (data
  format, mapping table, sampling pattern), marker highlighting
  (highlight/circle/burst/scribble/sketchout), and transitions (energy/
  mood tables, presets, shader-compatible CSS rules). Five topics the
  original PR didn't cover.

optional-skills/creative/hyperframes/references/website-to-video.md

@@ -7,16 +7,18 @@ The workflow has 7 steps. Each produces an artifact that gates the next. **Do no
 ## Step 1: Capture & Understand
 
 ```bash
-npx hyperframes capture https://example.com --out captured/
+npx hyperframes capture https://example.com -o example-video
 ```
 
-Produces:
-- `captured/snapshot.html` — self-contained page
-- `captured/screenshot.png` — above-the-fold visual
-- `captured/assets/` — logos, hero images, background video (if any)
-- `captured/palette.json` — extracted colors (sorted by pixel coverage)
-- `captured/text.md` — extracted headings, paragraphs, CTAs
-- `captured/fonts.json` — font families and stacks detected in computed styles
+Produces `example-video/capture/` with:
+- `capture/screenshots/` — above-the-fold + section screenshots (up to `--max-screenshots`)
+- `capture/assets/` — logos, hero images, background video (if any)
+- `capture/extracted/tokens.json` — colors, fonts, and spacing tokens
+- `capture/extracted/visible-text.txt` — extracted headings, paragraphs, CTAs
+- `capture/extracted/fonts.json` — font families and stacks detected in computed styles
+- `capture/asset-descriptions.md` — auto-generated asset catalog
+
+All subsequent steps read from the `capture/` subfolder — `capture/extracted/tokens.json`, `capture/assets/hero.png`, etc. Never strip the `capture/` prefix when referencing these files.
 
 **Gate:** Print a site summary — name, top 3 colors, primary + display fonts, hero asset path, one-sentence vibe. Keep it in your context — don't re-capture.
 
@@ -46,8 +48,8 @@ Small brand reference at the project root. 6 sections, ~90 lines. This is the ch
 - Eases: `power3.out` for entrances, `expo.in` for exits
 
 ## Assets
-- Logo: `captured/assets/logo.svg`
-- Hero image: `captured/assets/hero.png`
+- Logo: `capture/assets/logo.svg`
+- Hero image: `capture/assets/hero.png`
 
 ## What NOT to Do
 - No purple, no pastels, no serif body