chore(skill): drop visual-vocabulary.md + use published npx hyperframes

- Delete `references/visual-vocabulary.md` and scrub the four call
  sites that referenced it. The 6-axis lookup framing it introduced
  contradicted the rest of the skill's "design from the brand, not
  from a table" stance.
- Replace all `npx tsx packages/cli/src/cli.ts <cmd>` invocations
  with `npx hyperframes <cmd>` in step-0-capture.md, step-5-build.md,
  step-6-validate.md, and beat-builder-guide.md. The capture- and
  snapshot-pipeline improvements that previously required the local
  CLI now ship in the published CLI via the stack's PRs heygen-com#987 and
  heygen-com#988, so once the stack lands the published CLI is the right
  invocation for the skill prose.
- Remove the now-contradictory "ALWAYS use the local CLI — never
  npx hyperframes" warnings in step-0-capture.md and step-6-validate.md.

Author: ukimsanov

skills/website-to-hyperframes/SKILL.md

@@ -95,7 +95,7 @@ Write DESIGN.md — a brand cheat sheet covering the visual identity: colors, ty
 
 ## Step 2: Strategy & Messaging
 
-**Read:** [references/step-2-brief.md](references/step-2-brief.md), [references/visual-vocabulary.md](references/visual-vocabulary.md), [references/capabilities.md](references/capabilities.md) (scan the Table of Contents — deep-dive sections only as needed)
+**Read:** [references/step-2-brief.md](references/step-2-brief.md), [references/capabilities.md](references/capabilities.md) (scan the Table of Contents — deep-dive sections only as needed)
 
 Align with the user on **what the video must communicate** before talking visuals or assets. Parse the user's prompt — they probably already gave you the video type and style. Ask only what's missing: the ONE thing this video must say, the narrative arc, and the audience.
 
@@ -184,7 +184,6 @@ Beat count is not in this table intentionally — it should come from the storyb
 | [step-1-design.md](references/step-1-design.md)                                    | Step 1 — write DESIGN.md brand cheat sheet (6 sections, 250-350 lines)                                                                         |
 | [step-2-brief.md](references/step-2-brief.md)                                      | Step 2 — align on message, narrative arc, audience with user                                                                                   |
 | [capabilities.md](references/capabilities.md)                                      | Steps 2 & 5 — full inventory of what HyperFrames can do (24 sections). Scan the TOC during the brief, deep-dive specific sections during build |
-| [visual-vocabulary.md](references/visual-vocabulary.md)                            | Step 2 & 3 — translate subjective terms to concrete techniques. Composable building blocks, not rigid presets                                  |
 | [step-3-storyboard.md](references/step-3-storyboard.md)                            | Step 3 — storyboard + script (combined) with user review gate                                                                                  |
 | [step-4-vo.md](references/step-4-vo.md)                                            | Step 4 — TTS provider choice, generation, timing                                                                                               |
 | [step-5-build.md](references/step-5-build.md)                                      | Step 5 — build index.html + compositions                                                                                                       |

skills/website-to-hyperframes/references/beat-builder-guide.md

@@ -95,7 +95,7 @@ Fix ALL errors. Zero errors required.
 ## Step 4: Snapshot and verify
 
 ```bash
-npx tsx packages/cli/src/cli.ts snapshot . --frames 3
+npx hyperframes snapshot . --frames 3
 ```
 
 **READ the contact sheet** (`snapshots/contact-sheet.jpg`). For each frame:

skills/website-to-hyperframes/references/step-0-capture.md

@@ -13,11 +13,10 @@ If the user provides the key or already has one set, proceed. If they skip it, p
 Create a project directory for your video if it doesn't exist yet, then capture the website into a `capture/` subfolder within it:
 
 ```bash
-# ⚠ ALWAYS use the local CLI — never `npx hyperframes capture`:
-npx tsx packages/cli/src/cli.ts capture <URL> -o <project-dir>/capture
+npx hyperframes capture <URL> -o <project-dir>/capture
 ```
 
-Example: `npx tsx packages/cli/src/cli.ts capture https://stripe.com -o videos/stripe-launch/capture`
+Example: `npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture`
 
 Keeping the capture artifacts (`screenshots/`, `assets/`, `extracted/`, `AGENTS.md`, `CLAUDE.md`) in a dedicated `capture/` subfolder keeps them isolated from the later build files (`SCRIPT.md`, `STORYBOARD.md`, `DESIGN.md`, `compositions/`, `index.html`, `narration.wav`, `transcript.json`, `renders/`, `snapshots/`), which all live at `<project-dir>/` root.
 

skills/website-to-hyperframes/references/step-2-brief.md

@@ -35,7 +35,7 @@ Ask the user to describe what they want — or react to concrete framings that d
 
 Do NOT present a labeled menu of styles with pre-filled descriptions ("Cinematic = dark + glow + Apple keynote energy"). Those descriptions become the brief even when they don't match the brand. "Cinematic" for a wellness brand should look completely different from "cinematic" for a security tool — but a label with a baked-in description collapses that distinction.
 
-Instead, ask them across the six axes from [visual-vocabulary.md](visual-vocabulary.md) — framed as approachable questions, not a form:
+Instead, ask them approachable open-ended questions:
 
 > "A few questions to get the direction right:
 >
@@ -44,7 +44,7 @@ Instead, ask them across the six axes from [visual-vocabulary.md](visual-vocabul
 > - **Narration:** Should a voice guide viewers through the video, or let the visuals carry it?
 > - **Anything specific?** Any moments, techniques, or references you're drawn to? Or say 'surprise me' and I'll work from what I found in the capture."
 
-Their answers modify the brand-derived baseline you built in Step 1. Don't override the brand with their words — let the brand and their direction converge. See [visual-vocabulary.md](visual-vocabulary.md) for how to handle conflicts.
+Their answers modify the brand-derived baseline you built in Step 1. When the user's words conflict with the brand, don't blindly override — let the brand and their direction converge. If the conflict is sharp (user says "dark cinematic" for a brand whose entire identity is white-and-pastel light), surface it and ask before resolving.
 
 ### Question 3: What's the ONE thing this video must communicate?
 
@@ -118,7 +118,7 @@ With that minimum in hand, still write an ambitious storyboard. "Surprise me" me
 
 ### Specific direction
 
-Map their words to visual-vocabulary.md dimensions. If they say something vague ("make it really cool"), push back gently:
+If they say something vague ("make it really cool"), push back gently:
 
 > "I want to make sure I nail what you're imagining. When you say 'cool' — do you mean: dramatic/cinematic(slow reveals and dark atmosphere)? Or high-energy (fast cuts and bold motion)? Or something else entirely?"
 
@@ -157,7 +157,7 @@ Lock all of these before moving to Step 3. The first three are the strategic fra
 3. **Audience** — who's watching, where they're watching. (Required.)
 4. **Video type** — social ad / product demo / launch teaser / brand reel / feature announcement / etc. Infer from prompt.
 5. **Duration** — infer from type if not stated (demo: 30-45s, social: 15-20s, teaser: 15-25s).
-6. **Style direction** — map their words to visual-vocabulary dimensions.
+6. **Style direction** — pace / mood / specifics — from the user's words, layered onto the brand baseline from Step 1.
 7. **Specific requests** — any scenes/effects/beats they explicitly asked for.
 8. **Narration** — yes / no / minimal.
 9. **Format** — landscape unless specified otherwise.

skills/website-to-hyperframes/references/step-3-storyboard.md

@@ -61,8 +61,7 @@ Beat 3: composed kanban (4 cards-as-divs per column) + counter chip on In-Progre
 **Re-read these files before writing:**
 
 - **DESIGN.md** — your color palette, font rules, components, Do's/Don'ts. Every visual must be grounded in this brand identity. If it says "white backgrounds with purple accent" — plan light scenes, not dark moody ones.
-- **[visual-vocabulary.md](visual-vocabulary.md)** — translate the user's style direction into concrete dimension values (pacing, density, transitions, mood, motion, audio). Note any per-beat overrides the user requested.
-- **Asset discovery — use the contact sheets.** View `capture/assets/contact-sheet-*.jpg` and `capture/assets/svgs/contact-sheet-*.jpg`. Each grid cell is labeled with the filename. This is how you browse what's available without opening 50 individual files. When you find an asset that earns its place as a brand accent, note the filename from the label and reference it as `capture/assets/<filename>`. If an asset looks promising but you need to check resolution or detail, THEN open the individual file. Also read `capture/extracted/asset-descriptions.md` for one-line summaries. **Understand what each asset IS before using it.** Product screenshots show what the product does — useful for understanding the brand, but **compose the UI from divs/CSS in your beats rather than pasting the screenshot** (see Per-Beat Direction below). The strongest captured assets for video accents are usually the brand logo (SVG), the hero illustration, and gradient/texture backgrounds. **Never use contact sheets or scroll screenshots in the video** — contact sheets have grid labels and headers baked in, scroll screenshots are raw browser captures. Both are for AI to BROWSE and understand the site, not to place in compositions.
+- **Asset discovery — use the contact sheets.** View `capture/assets/contact-sheet-*.jpg` and `capture/assets/svgs/contact-sheet-*.jpg`. Each grid cell is labeled with the filename. This is how you browse what's available without opening 50 individual files. When you find an asset that earns its place in a beat, note the filename from the label and reference it as `capture/assets/<filename>`. If an asset looks promising but you need to check resolution or detail, THEN open the individual file. Also read `capture/extracted/asset-descriptions.md` for one-line summaries. **Never use contact sheets or scroll screenshots in the video** — contact sheets have grid labels and headers baked in, scroll screenshots are raw browser captures. Both are for AI to BROWSE and understand the site, not to place in compositions.
 - **[techniques.md](../../hyperframes/references/techniques.md)** — 20 visual techniques with code patterns. Pick for beats, these are starting points to adapt, not templates to copy.
 - **[text-effects.md](../../hyperframes/references/text-effects.md)** — 24 named text animation effects bundled in the repo. Read the catalog now and assign a specific effect ID to every headline, label, and copy element in every beat — not generic "fades in" descriptions.
 

skills/website-to-hyperframes/references/step-5-build.md

@@ -302,7 +302,7 @@ FIRST: Read skills/website-to-hyperframes/references/beat-builder-guide.md end t
 It has your full workflow, all rules, easing vocabulary, and file references.
 Follow its workflow exactly:
   build → lint (`npx hyperframes lint .`)
-        → snapshot (`npx tsx packages/cli/src/cli.ts snapshot . --frames 3`)
+        → snapshot (`npx hyperframes snapshot . --frames 3`)
         → view contact sheet AND read snapshots/descriptions.md
         → fix issues
 

skills/website-to-hyperframes/references/step-6-validate.md

@@ -70,17 +70,15 @@ After lint and validate pass, capture snapshot frames to SEE your own output. **
 
 Scale snapshot count to the video — not a fixed number. Formula: `max(beats × 3, ceil(duration_seconds / 2))`. A 3-beat 10s video: max(9, 5) = 9 frames. An 8-beat 60s video: max(24, 30) = 30 frames. Aim for at least 3 frames per beat: entrance, hold, and near-exit.
 
-**⚠ NEVER use `npx hyperframes snapshot`.** The published CLI (0.6.6) is missing critical fixes: sub-comps load before capturing, local-time seek for last beats, Gemini vision descriptions. Always use the local CLI below or all beats after the first may appear black and descriptions.md won't be generated.
-
 ```bash
-# The local CLI auto-loads .env from the current working directory, so a
-# .env file in <project-dir> with GEMINI_API_KEY=... is enough — no explicit
-# export needed. If you've set GEMINI_API_KEY directly in your shell env that
-# also works.
-npx tsx packages/cli/src/cli.ts snapshot <project-dir> --frames <N>
+# The CLI auto-loads .env from the current working directory, so a
+# .env file in <project-dir> with GEMINI_API_KEY=... is enough — no
+# explicit `export` needed. If you've set GEMINI_API_KEY in your shell
+# environment, that works too.
+npx hyperframes snapshot <project-dir> --frames <N>
 
 # Pass a custom question to Gemini instead of the default prompt:
-npx tsx packages/cli/src/cli.ts snapshot <project-dir> --frames <N> \
+npx hyperframes snapshot <project-dir> --frames <N> \
   --describe "Is the brand logo visible in every beat? Is any beat showing a black or blank frame?"
 ```