wizz-method 2.18.0 → 2.19.0

package/src/skills-lib/wizz-router/references/routing-table-flat.md

@@ -2,7 +2,7 @@
 
 Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `_wizz/`) — there the router fires the skill on its own. **Inside a Wizz project** it can also be consulted as a CAPABILITY INDEX, to discover a relevant capability the user didn't name (e.g. "I want a carousel" → `wizz-canvas-design`); but delegation still happens through the normal SKILL.md dispatch (area agent / maestro) — the table never fires a skill directly inside a Wizz project.
 
-**Existence check:** before offering any skill, confirm it exists in the environment (the session's skill catalog or `ls ~/.claude/skills`); if it doesn't exist, don't offer it: use the missing-skill protocol (`find-skills`).
+**Existence check:** before offering any skill, confirm it exists in the environment (the session's skill catalog or `ls ~/.claude/skills`); if it doesn't exist, don't offer it: use the missing-skill protocol (`wizz-find-skills`).
 
 ## Technical Area — Backend / Data / Infra
 
@@ -15,8 +15,8 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 | Auth, secrets, tokens, OAuth, JWT, Clerk, permissions | `wizz-auth-and-secrets` + `wizz-web-security` | 1 |
 | Dependencies, packages, vulnerabilities, npm audit | `wizz-database-and-deps` | 2 |
 | Security, XSS, CSRF, SQLi, IDOR, OWASP, rate limit, CORS, clickjacking, PII in the response, user enumeration, headers | `wizz-web-security` + `wizz-auth-and-secrets` | 1 |
-| Full-app security audit/pentest, "audit security", "pentest", "find vulnerabilities", pre-release scan | `security-audit-pentest` | 1 |
-| **Autonomous, offensive** pentest that actually runs the app and proves each finding with a real PoC | CLI `strix` (qa registry). CONDITIONAL, never the default: only on an app the user owns/is authorized to test, and only when they ask for validated exploitation rather than a review. Start from `security-audit-pentest` | 2 |
+| Full-app security audit/pentest, "audit security", "pentest", "find vulnerabilities", pre-release scan | `wizz-security-audit-pentest` | 1 |
+| **Autonomous, offensive** pentest that actually runs the app and proves each finding with a real PoC | CLI `strix` (qa registry). CONDITIONAL, never the default: only on an app the user owns/is authorized to test, and only when they ask for validated exploitation rather than a review. Start from `wizz-security-audit-pentest` | 2 |
 | Error monitoring, crash/exception triage, releases and source maps in Sentry | CLI `sentry-cli` (architect registry). CONDITIONAL: only if the project ALREADY uses Sentry (`SENTRY_DSN` in env, `sentry.properties`, or `@sentry/` in package.json) and it's at production stage — never propose adopting Sentry from this row | 2 |
 | Launch-readiness audit, "is it ready to launch?", broad release checklist (technical, security, SEO, analytics, content, legal, infra), "what's missing before going to production" | `wizz-launch-readiness` | 1 |
 | Desktop, Electron, contextIsolation, code signing | `wizz-desktop-security` | 2 |
@@ -54,8 +54,8 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 | Generate an image via code: carousel, quote card, infographic (editable PNG/PDF), generative hero background/texture | `wizz-canvas-design` + `wizz-algorithmic-art` | 2 |
 | **Video with audio, narration, SFX, or synced captions** (film assembly) | `wizz-remotion-best-practices` (Remotion assembles; frame timing). Pipeline rule: HyperFrames draws the mute screens, Remotion assembles the film — don't use hyperframes to position audio/captions (~2.76s drift and CSS leaking between screens in production) | 1 |
 | Draw a video SCREEN/scene in HTML/CSS, mute visual (app mockup, animated chart, title, loop; HTML→MP4) | CLI `hyperframes` (designer registry; `npx skills add heygen-com/hyperframes`) — mute screens only; assembly with audio goes to Remotion (line above) | 2 |
-| Word-by-word timestamps for TTS narration (sync captions/cuts/animation with speech) | `ctc-align` (designer registry; single source of timing, replaces Whisper) | 2 |
-| Which short-video STYLE to copy, from the inventory of the material (real person, voice only, B-roll, screens, product), with the recipe measured on 104 real shorts (lyric video and kinetic typography included); "edit it in the style of", "the video looks amateur" | `wizz-video-styles` (designer registry; picks the style before voice, timing, effects and assembly) | 2 |
+| Word-by-word timestamps for TTS narration (sync captions/cuts/animation with speech) | `wizz-ctc-align` (designer registry; single source of timing, replaces Whisper) | 2 |
+| Which short-video STYLE to copy, from the inventory of the material (real person, voice only, B-roll, screens, product), with the recipe measured on 110 real videos (lyric video, kinetic typography and the UI-only app video "ui-morph" included); "a video of my app moving", "edit it in the style of", "the video looks amateur" | `wizz-video-styles` (designer registry; picks the style before voice, timing, effects and assembly) | 2 |
 | Effects and sound of a short vertical video (ad or Reels): which effect goes where and when not, which SFX for each event and at what level, ducking, master loudness, safe-zone/density/excess/rhythm gates | `wizz-video-effects` (designer registry; decides the effects, Remotion assembles them) | 2 |
 | **Find B-roll / inserts / cutaways / supporting footage** for a video or Reel (real footage of the fact, person, product, news item or screen the script names; YouTube/Instagram/TikTok/Pexels/Pixabay/Commons/NASA) | CLI `get-brolls` (designer registry; **macOS**, global `skills add` + its own `install.sh`; needs ffmpeg with drawtext, Node 22+, Python 3.11+). Ends in a Storyboard the HUMAN approves — the agent never self-approves. Stock only when the user explicitly asks for stock | 1 |
 | **Edit/cut video** (cuts, selects, roughcut) | CLI `buttercut` (designer registry; **Apple Silicon only**, clone-and-run in the project, heavy deps) | 1 |
@@ -72,7 +72,7 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 | Paid ads, ads, Google Ads, Meta Ads, TikTok Ads, paid media | `wizz-paid-ads` + `wizz-ad-creative` + `wizz-analytics-tracking` | 1 |
 | Wrong pixel/UTM/attribution, "sales don't match the ads manager", "where is the funnel leaking", inflated organic traffic, checking tracking before launching a campaign | `wizz-tracking-audit` (+ `wizz-analytics-tracking` if it's a SaaS/product) | 1 |
 | Feature launch, product launch, go-to-market | `wizz-launch-strategy` + `wizz-social-content` + `wizz-email-sequence` | 1 |
-| Site ready to go live, SITE pre-launch, "review before deploy", go-live checklist, or a specific pre-launch item (og:image/link preview, FAQ with schema, robots.txt, LGPD, alt text) | `site-launch-kit` | 1 |
+| Site ready to go live, SITE pre-launch, "review before deploy", go-live checklist, or a specific pre-launch item (og:image/link preview, FAQ with schema, robots.txt, LGPD, alt text) | `wizz-site-launch-kit` | 1 |
 | Price, plans, pricing, monetization | `wizz-pricing-strategy` + `wizz-paywall-upgrade-cro` | 1 |
 | Churn, retention, cancellation, NPS | `wizz-churn-prevention` + `wizz-revops` | 1 |
 | Page conversion, CRO, funnel optimization | `wizz-page-cro` + `wizz-copywriting` + `wizz-form-cro` | 1 |
@@ -93,7 +93,7 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 | Free lead-capture tool | `wizz-free-tool-strategy` | 2 |
 | A/B test, variations, conversion experiments | `wizz-ab-test-setup` + `wizz-analytics-tracking` | 2 |
 | Copywriting, copy, persuasion, sales text | `wizz-copywriting` + `wizz-humanizer` | 1 |
-| Offer audience research, VoC, angle matrix, info-product lexicon | `pesquisa-de-publico-do-piva` | 1 |
+| Offer audience research, VoC, angle matrix, info-product lexicon | `wizz-pesquisa-de-publico-do-piva` | 1 |
 | Forge an offer, create an irresistible offer, unique mechanism, bonus, guarantee | `wizz-offer-forge` + `wizz-pricing-strategy` | 1 |
 | Market research, competitive intelligence | `deep-research` (external plugin — only if installed) | 2 |
 | Scrape/crawl the web for market research, lead prospecting or competitive intel (anti-bot bypass, adaptive parsing) | MCP `scrapling` (growth registry) — the collection layer under the research rows above | 2 |
@@ -102,7 +102,7 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 
 | Intent / keywords | Skills to offer | Priority |
 |---|---|---|
-| What was decided, past context, learnings, history | `cerebro` (/ver or /dia) | 1 |
+| What was decided, past context, learnings, history | `wizz-cerebro` (/ver or /dia) | 1 |
 
 ---
 
@@ -110,7 +110,7 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
 
 When no installed skill/MCP covers the request, **classify what's missing** (skill = knowledge/flow; MCP = real access to a tool/API):
 
-**Missing a SKILL:** inform → invoke `find-skills` → `npx skills find "<term>"` → present 2-3 candidates with source → propose `npx skills add <pkg>` with confirmation → route again. Sources: anthropics/skills, superpowers-marketplace, skill-codex, claude-mem, skills.sh. **Review the SKILL.md and any `scripts/` before installing; prefer known owners.**
+**Missing a SKILL:** inform → invoke `wizz-find-skills` → `npx skills find "<term>"` → present 2-3 candidates with source → propose `npx skills add <pkg>` with confirmation → route again. Sources: anthropics/skills, superpowers-marketplace, skill-codex, claude-mem, skills.sh. **Review the SKILL.md and any `scripts/` before installing; prefer known owners.**
 
 **Missing an MCP:** inform → `claude mcp list` → check `skills-registry.yaml` (`mcps:`/`mcp_utility:`, with a ready `server`) → propose `claude mcp add <id> [-e VAR=$VAR] -- <command> [args]`. Secrets always via env/placeholder, never a real token.
 

package/src/skills-lib/{security-audit-pentest → wizz-security-audit-pentest}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: security-audit-pentest
+name: wizz-security-audit-pentest
 description: >
   Adversarial 5-stage security audit with standardized output (markdown table, cutoff ruler,
   concrete payload per finding). Use when the request is to audit/pentest an entire app, review security

package/src/skills-lib/{site-launch-kit → wizz-site-launch-kit}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: site-launch-kit
+name: wizz-site-launch-kit
 description: "Operational pre-launch website checklist in 15 corrective rounds: main CTA above the fold, mobile sticky bar, response-time promise, real social proof, decision-focused FAQ with FAQPage, real images (not stock), address and directions, unique titles, Open Graph, breadcrumbs, alt text, local business schema, robots/sitemap, LGPD privacy policy and terms, event measurement. Use when the site is ready or nearly ready to go live: 'vamos lançar', 'subir o site', 'revisar antes do deploy', 'checklist de lançamento', 'pré-go-live', 'o site tá pronto?', or when the request is one of the individual items (e.g. 'arruma a prévia do WhatsApp', 'coloca FAQ com schema', 'confere robots.txt antes de subir'). Runs AFTER the site is built and BEFORE deploy. Central rule: no invented business data goes into the site; whatever is missing becomes a placeholder and goes into PENDING ITEMS."
 ---
 

package/src/skills-lib/wizz-video-effects/SKILL.md

@@ -9,7 +9,7 @@ A catalogue of effects is easy. What makes a video look professional is the **re
 
 ## Where it sits in the video pipeline
 
-1. Script and narration exist; `ctc-align` gave word-by-word timestamps.
+1. Script and narration exist; `wizz-ctc-align` gave word-by-word timestamps.
    On a music-driven piece (lyric video over a song) the song is the narration: `scenes[]` start on the downbeats from `wizz-video-styles/scripts/beat_grid.py`, and the song's own hits count as the SFX budget already spent.
 2. Screens were drawn silent (HyperFrames) or footage was sourced.
 3. **This skill:** events → SFX and levels → effects anchored on breaths → budget → timeline JSON → (render in Remotion) → gates on the final MP4.
@@ -39,7 +39,7 @@ Requires Python 3 (stdlib only) and ffmpeg/ffprobe.
 
 ## Per piece
 
-1. **Timeline.** Write the piece's timeline JSON ([references/data-contract.md](references/data-contract.md)): `words[]` from ctc-align, `scenes[]`, `elements[]`, and the safe-zone profile (`ad` or `organic`).
+1. **Timeline.** Write the piece's timeline JSON ([references/data-contract.md](references/data-contract.md)): `words[]` from wizz-ctc-align, `scenes[]`, `elements[]`, and the safe-zone profile (`ad` or `organic`).
 2. **Events to sounds.** List what happens in the narration as semantic events with their times, from the words: a price appears, a verdict lands, a message arrives. Map them with `res = sound.map_requests([(5.4, "verdict"), (7.1, "element_in")], cfg)` from `scripts/sound.py`; it returns the shots (file and `vol` from the config) plus the refusals, with the reason. Write the accepted shots into `sfx[]` with their `event`. Events that trigger an effect (a `verdict` triggers `shake`): pass `sound.effect_candidates(res)` through `budget.select(...)` from `scripts/budget.py` and write the accepted ones into `shakes[]`; no other step writes them.
 3. **Effects on breaths.** `python3 scripts/fill_breaths.py TIMELINE --narration NARRATION.mp3 --visual LAYOUT_RENDER.mp4 --write` anchors punches and flashes on real speech breaths, runs every candidate through the budget, and sets scene transitions and cut sounds by speech pace. Without `--write` it only reports.
    - `--narration` is required in practice: ctc-align words touch each other (each ends where the next starts), so `words[]` alone yields almost no breaths.
@@ -81,6 +81,6 @@ Full table, what each gate cannot see, and escape hatches: [references/gates.md]
 
 - Assembling the film, captions layout, `<Audio>` API: `wizz-remotion-best-practices`.
 - Drawing screens: HyperFrames.
-- Word timestamps: `ctc-align`.
+- Word timestamps: `wizz-ctc-align`.
 - Script, hook wording and CTA wording: the copy or social area.
 - Launch films with music and art direction: `wizz-huashu-design`.

package/src/skills-lib/wizz-video-effects/references/data-contract.md

@@ -1,6 +1,6 @@
 # Timeline data contract
 
-The scripts in `scripts/` read and write one JSON object per piece: the **timeline**. It is the hand-off between whoever plans the edit (HyperFrames screens, `ctc-align` timing) and whoever renders the audio and effects (Remotion). Times are always **seconds from the start of the piece**, as floats. Every list is optional: an absent list is an empty list, never an error.
+The scripts in `scripts/` read and write one JSON object per piece: the **timeline**. It is the hand-off between whoever plans the edit (HyperFrames screens, `wizz-ctc-align` timing) and whoever renders the audio and effects (Remotion). Times are always **seconds from the start of the piece**, as floats. Every list is optional: an absent list is an empty list, never an error.
 
 Numbers that decide anything (gaps, ceilings, depths) are never in the timeline: they live in `effects.config.json` and are cited by key.
 
@@ -11,7 +11,7 @@ Numbers that decide anything (gaps, ceilings, depths) are never in the timeline:
 | `fps` | int | `sound.py duck` | planner | render fps; default `frame.fps` of the config |
 | `duration` | float | every check | planner | piece length; if absent, derived from the largest scene end (reports say so) |
 | `safe_zone_profile` | string | `check_safe_zone.py`, `measure_density.py`, `fill_breaths.py` | planner | `organic` or `ad` (any key of `safe_zones`); overrides the config default for this piece |
-| `words[]` | list | `sound.py duck`, `fill_breaths.py` | `ctc-align` | spoken words |
+| `words[]` | list | `sound.py duck`, `fill_breaths.py` | `wizz-ctc-align` | spoken words |
 | `scenes[]` | list | `check_excess.py`, `check_rhythm.py`, `fill_breaths.py` | planner, `fill_breaths.py` | screens |
 | `sfx[]` | list | `sound.py duck`, `fill_breaths.py` | planner, `fill_breaths.py` | point sounds |
 | `punches[]` | list | `check_excess.py`, `check_rhythm.py` | planner, `fill_breaths.py` | zoom punches |
@@ -40,7 +40,7 @@ Only `start` and `end` are required. Breaths are the gaps between words at least
 }
 ```
 
-- `transition`: `cut`, `whip`, `zoom` or any name the renderer knows. Anything other than `""` or `cut` counts as a `transition` event in the budget.
+- `transition`: `cut`, `whip`, `zoom` or any name the renderer knows. Anything other than `""` or `cut` counts as a `transition` event in the budget. `fill_breaths.py` only fills scenes without a real transition (absent, `""` or `cut`); a transition the author declared is kept, and its `sfx` too when already set.
 - `sfx` (optional): the cut sound, played at `start`. Same shape as an `sfx[]` entry without `at`.
 
 ### `sfx[]`

package/src/skills-lib/wizz-video-effects/scripts/fill_breaths.py

@@ -199,13 +199,27 @@ def pace_profile(index: int, wps: float, cfg: Config) -> str:
     return "fast" if wps >= cfg.breaths.fast_speech_wps else "slow"
 
 
+def declared_transition(scene: dict) -> bool:
+    """True when the author chose a real transition (anything but absent, "" or
+    'cut', the same rule timeline.transitions uses). Those are kept."""
+    return scene.get("transition") not in (None, "", "cut")
+
+
 def scene_updates(scenes: list[dict], words: list[dict], cfg: Config) -> list[tuple[dict, float]]:
-    """(new scene dict, words per second) with transition and cut sound by pace."""
+    """(new scene dict, words per second) with transition and cut sound by pace.
+    A transition the author declared stays, and so does a cut sound already set:
+    pace only fills what is missing."""
     out = []
     for i, sc in enumerate(scenes):
         start = float(sc["start"])
         wps = words_per_second(words, start, start + float(sc.get("dur", 0.0)))
         prof = cfg.breaths.pace_profiles[pace_profile(i, wps, cfg)]
+        if declared_transition(sc):
+            sfx = sc.get("sfx") or {"event": prof.sound_event,
+                                    "src": cfg.sound.src(prof.sound_event),
+                                    "vol": cfg.sound.event(prof.sound_event).vol}
+            out.append(({**sc, "sfx": sfx}, round(wps, 2)))
+            continue
         ev = cfg.sound.event(prof.sound_event)
         out.append(({**sc, "transition": prof.transition,
                     "sfx": {"event": prof.sound_event, "src": cfg.sound.src(prof.sound_event),

package/src/skills-lib/wizz-video-effects/scripts/test_fill_breaths.py

@@ -168,6 +168,26 @@ class TestPlan(unittest.TestCase):
         self.assertTrue(out["punches"])
         self.assertTrue(all("event" in s for s in out["sfx"]))
 
+    def test_declared_transition_is_kept(self):
+        whoosh = {"event": "block_cut", "src": "sfx/mine.mp3", "vol": 0.3}
+        data = {**self.DATA, "scenes": [
+            {"start": 0.0, "dur": 10.0, "transition": "zoom", "sfx": whoosh},
+            {"start": 10.0, "dur": 10.0, "transition": "whip"}]}
+        out = FB.apply(data, FB.plan(data, CFG, [], {}))
+        self.assertEqual([s["transition"] for s in out["scenes"]], ["zoom", "whip"])
+        self.assertEqual(out["scenes"][0]["sfx"], whoosh)
+        self.assertIn("sfx", out["scenes"][1])
+
+    def test_default_transition_is_filled(self):
+        for default in ("", "cut", None):
+            scene = {"start": 0.0, "dur": 10.0}
+            if default is not None:
+                scene["transition"] = default
+            data = {**self.DATA, "scenes": [scene]}
+            out = FB.apply(data, FB.plan(data, CFG, [], {}))
+            self.assertEqual(out["scenes"][0]["transition"],
+                             CFG.breaths.pace_profiles["first"].transition)
+
     def test_pace_profile(self):
         f = CFG.breaths.fast_speech_wps
         self.assertEqual(FB.pace_profile(0, 99.0, CFG), "first")

package/src/skills-lib/wizz-video-styles/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wizz-video-styles
-description: Catalogue of short vertical video styles (Reels, Shorts, TikTok) measured on real high-reach videos, for any niche. Takes an inventory of the material the project actually has (a real person on camera, voice only, b-roll, app screens, a physical product), crosses it with niche and goal, picks the style to copy and hands over its recipe - rhythm, captions, palette, typography, motion vocabulary, music and SFX rules - plus a Remotion template when one exists and a licensed audio kit. Use when a video is about to be edited or planned and nobody has decided what it should look like, when someone says a video "looks amateur" or asks to copy a creator's style, or before wizz-video-effects and Remotion take over. Triggers - estilo do vídeo, editar no estilo de, copiar a edição de, que estilo usar no reel, referência de edição, catálogo de estilos, o vídeo ficou amador. Does not decide per-event SFX or gates (that is wizz-video-effects) and does not assemble the film (that is Remotion).
+description: Catalogue of short vertical video styles (Reels, Shorts, TikTok) measured on real high-reach videos, for any niche. Takes an inventory of the material the project actually has (a real person on camera, voice only, b-roll, app screens, a physical product), crosses it with niche and goal, picks the style to copy and hands over its recipe - rhythm, captions, palette, typography, motion vocabulary, music and SFX rules - plus a Remotion template when one exists and a licensed audio kit. Use when a video is about to be edited or planned and nobody has decided what it should look like, when someone says a video "looks amateur" or asks to copy a creator's style, or before wizz-video-effects and Remotion take over. Triggers - estilo do vídeo, editar no estilo de, copiar a edição de, que estilo usar no reel, referência de edição, catálogo de estilos, o vídeo ficou amador, vídeo do app mexendo, anima o app num vídeo. Does not decide per-event SFX or gates (that is wizz-video-effects) and does not assemble the film (that is Remotion).
 ---
 
 # wizz-video-styles: which style to copy, and its recipe
@@ -11,7 +11,7 @@ Every number in this skill was measured on a real public short ([references/rese
 
 1. Script exists (social area, `wizz-social-content`).
 2. **This skill:** inventory of the material, then style, then recipe.
-3. Narration and word timing (the person's own recording or TTS, then `ctc-align`).
+3. Narration and word timing (the person's own recording or TTS, then `wizz-ctc-align`).
 4. Footage and screens: `get-brolls` for b-roll, HyperFrames for silent screens, real screenshots for app screens.
 5. Effects and sound per event, plus gates: `wizz-video-effects`. Pass it this style's SFX density ceiling and music level.
 6. Assembly in Remotion: invoke `wizz-remotion-best-practices`; copy the style's template from `assets/remotion/` when it has one.

package/src/skills-lib/wizz-video-styles/data/recipes.json

@@ -368,6 +368,37 @@
     "Shipping 16:9: every measured reference is horizontal; recompose for 9:16 with the keyword in the upper-middle and nothing in the bottom 20%."
    ],
    "template": null
+  },
+  "ui-morph": {
+   "title": "UI morph: one shape, many UI states (twoclipping, verbove, AnnaCher)",
+   "needs": "The product's real screens or a list of 8 to 12 UI states that tell its story (button, loader, player, slider, toggle, tabs, chart, ⌘K, toast), one accent colour and a track around 120 BPM. Nobody on camera, no footage: everything is drawn in code (HyperFrames).",
+   "fits": "App and SaaS launches, a feature announcement, a product promo for the site or the store page, a portfolio piece. Strong on X and LinkedIn with a product audience; it shows the product working instead of describing it. Weak for teaching step by step or for anything that needs a face.",
+   "look": [
+    "One shape on screen the whole time, never cut: it becomes button, loader, player, slider, toggle, tabs, chart, ⌘K and toast, changing size, corners and colour (the same language as the iPhone Dynamic Island).",
+    "Warm light grey canvas (#EDEBE6), components in black and white, at most one accent colour; a dark variant (navy with one yellow) for a product film.",
+    "Real UI and real data: the product's own labels and numbers, never lorem ipsum or generic components.",
+    "A cursor drives every change with real clicks and drags; the camera zooms so each state fills the frame."
+   ],
+   "palette": "Warm grey #EDEBE6 or beige #E6E2DA, black #111, white, plus ONE accent (orange, peach or yellow) used only where the eye must go. Dark variant: #0B1020 base, one yellow accent.",
+   "type": "One UI sans (Inter, Geist or the product's own font) in regular and semibold; mono only for a URL or a code line. No display fonts.",
+   "motion": [
+    "Every state grows out of the previous one by a spring (size, corner radius, colour), with at most one small overshoot; content swaps with a short blur.",
+    "Something happens on every beat; the state changes land on the downbeats of the beat grid (scripts/beat_grid.py), not on a hand-counted 120 BPM.",
+    "Build it as a pure function of time (seek(t)): closed-form springs, no CSS transitions or timers, so every frame renders the same. HyperFrames does this natively.",
+    "The last frame equals the first, so the piece loops."
+   ],
+   "captions": "None. The text is the interface's own (button labels, track title, chart numbers). A single short line at most, in the UI font, when the product needs one sentence.",
+   "hook": "The first state already on screen at 0 s (a button or the brand pill) and the cursor arriving on the first beat. No logo intro, no title card.",
+   "cta": "The shape returns to the first state or closes on the brand pill with the URL in small mono under it, held 1 to 2 s.",
+   "music": "The track is the whole soundtrack: a continuous bed in 4 of 6 measured pieces, around -14 LUFS. Pick an electronic or lo-fi track with a clear kick so the beat grid is reliable.",
+   "sfx": "Sparse and tied to UI events: a soft click on a press, a low tick on a snap. The measured pieces range from none to a hit on most state changes; never whooshes on every move.",
+   "dont": [
+    "Cutting between screens: the moment it cuts it becomes a screen recording, not this style.",
+    "Bouncy easing, particles, glow, gradients on the UI chrome, icons with uneven stroke, dead time, template look.",
+    "Generic components instead of the product's real UI and numbers.",
+    "Shipping square or 16:9: every measured piece is 1:1 or 16:9; recompose for 9:16 with the shape in the upper-middle and nothing in the bottom 20 %."
+   ],
+   "template": null
   }
  }
-}
+}

package/src/skills-lib/wizz-video-styles/data/references.json

@@ -3568,5 +3568,215 @@
   },
   "lufs": "-10.7",
   "formato": "16:9 (horizontal); adaptar para 9:16"
+ },
+ {
+  "id": "x-twoclipping-2103273003555402193",
+  "url": "https://x.com/twoclipping/status/2103273003555402193",
+  "channel": "zero",
+  "views": "1164424",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Uma forma preta só sobre cinza quente claro, que vira botão, player, slider de volume, toggle, abas, gráfico, ⌘K e toast, e volta ao botão do início (loop)",
+  "motion_transicoes": "Sem corte nenhum: cada estado nasce do anterior por mola (tamanho, cantos, cor); o conteúdo troca com blur curto; um cursor clica e arrasta de verdade",
+  "legenda": "Nenhuma; o texto é o da própria interface (rótulos de botão, título da faixa, número do gráfico)",
+  "hook_0_3s": "Botão \"Generate\" parado e o cursor chegando nele no primeiro tempo",
+  "paleta": "cinza quente #EDEBE6, preto, branco; um gradiente só na capa do player",
+  "tipografia": "uma sans de interface (tipo Inter), pesos regular e semibold",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.33,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 1,
+    "impact_low": 0
+   },
+   "per_10s": 0.71,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.1",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-verbove-2103483957266268381",
+  "url": "https://x.com/verbove/status/2103483957266268381",
+  "channel": "Martijn Verbove",
+  "views": "17438",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "A mesma forma contínua contando um produto real (MakerMap): pílula da marca, busca, cartão de perfil, globo de pontos com os makers, lista de matches, contador, evento com RSVP",
+  "motion_transicoes": "Sem corte: morfose de pílula para cartão e para globo; o globo gira e se enche de pontos; cursor dirige cada passo",
+  "legenda": "Nenhuma; dados reais na interface (2.266 produtos, 6 matches)",
+  "hook_0_3s": "Pílula preta com o nome do produto e o ponto laranja da marca",
+  "paleta": "cinza quente claro, preto, branco e um laranja de destaque",
+  "tipografia": "sans de interface; mono só na URL do fim",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 20.05
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.3,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 2,
+    "whoosh": 2,
+    "impact_low": 31
+   },
+   "per_10s": 17.45,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.6",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-AnnaCher___-2103571096549433425",
+  "url": "https://x.com/AnnaCher___/status/2103571096549433425",
+  "channel": "Anna Chernikova",
+  "views": "1605",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Promo feito da própria interface do produto (Sprites): spinner, biblioteca de anúncios, slider de orçamento, abas de plataforma, gráfico de ROAS, toggle de piloto automático, ⌘K",
+  "motion_transicoes": "Sem corte: um componente vira o próximo; números contam; o cursor arrasta o orçamento e liga o toggle",
+  "legenda": "Nenhuma; a interface carrega a mensagem (4.2x ROAS, $200/dia)",
+  "hook_0_3s": "Spinner sozinho no centro, o produto já trabalhando",
+  "paleta": "bege quente, preto, branco e um pêssego de destaque no gráfico",
+  "tipografia": "sans de interface única",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 42.09
+  },
+  "musica": {
+   "guess": "sem",
+   "ratio": 0.0,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 2,
+    "whoosh": 27,
+    "impact_low": 0
+   },
+   "per_10s": 6.89,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-24.0",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-nezbuilds-2103487427365294391",
+  "url": "https://x.com/nezbuilds/status/2103487427365294391",
+  "channel": "Nez",
+  "views": "519",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Refeito com o mesmo prompt: botão \"Get started\", loader, ilha que abre em player, volume, toggle, abas, gráfico com tooltip, ⌘K \"Export chart\" e toast com Undo",
+  "motion_transicoes": "Sem corte; molas com overshoot pequeno; cursor arrasta a barra do player e escolhe a aba",
+  "legenda": "Nenhuma",
+  "hook_0_3s": "Botão com seta e o cursor clicando no primeiro tempo",
+  "paleta": "bege quente, preto, branco",
+  "tipografia": "sans de interface única",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.226,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 3,
+    "whoosh": 3,
+    "impact_low": 20
+   },
+   "per_10s": 18.49,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-19.2",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-dzhohola-2103605737595249003",
+  "url": "https://x.com/dzhohola/status/2103605737595249003",
+  "channel": "Andromedus",
+  "views": "222",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "A mesma técnica sobre a interface real de um app (T3 Code): diff de código, menu de esforço, permissões, toggles, temas, gráfico de uso, lista de PRs, celular e contador de estrelas do GitHub",
+  "motion_transicoes": "Sem corte; troca de tema claro para escuro no meio; cada cartão nasce do anterior",
+  "legenda": "Nenhuma",
+  "hook_0_3s": "Pílula \"Working 2m\" com spinner",
+  "paleta": "branco e cinza claros, depois quase preto; azul só nos toggles",
+  "tipografia": "sans de interface; mono no diff",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 60.05
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.454,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 7,
+    "impact_low": 0
+   },
+   "per_10s": 1.17,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.2",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-daniel_haida-2104139720829636937",
+  "url": "https://x.com/daniel_haida/status/2104139720829636937",
+  "channel": "Daniel Haida",
+  "views": "3968",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Variante escura: filme de produto de um app de contabilidade (taxtello) feito em React, painel com número grande, gráfico, recibo de papel, anel de score e a marca no fim",
+  "motion_transicoes": "Câmera em perspectiva passando sobre o painel; elementos entram em sequência sem corte; o logo fecha",
+  "legenda": "Duas frases curtas grandes (\"Alles im Blick.\", \"In guter Ordnung\")",
+  "hook_0_3s": "Ícone do app sozinho no escuro",
+  "paleta": "azul-marinho quase preto, um amarelo de destaque, verde no score",
+  "tipografia": "sans de interface, números grandes em mono",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "sem",
+   "ratio": 0.033,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 0,
+    "impact_low": 3
+   },
+   "per_10s": 2.13,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-17.1",
+  "formato": "16:9 (horizontal); recompor para 9:16"
  }
-]
+]

package/src/skills-lib/wizz-video-styles/data/styles.json

@@ -777,5 +777,59 @@
     "url": "https://www.youtube.com/watch?v=5EoO5413dBY"
    }
   ]
+ },
+ "ui-morph": {
+  "n": 6,
+  "nichos": [
+   "a",
+   "d"
+  ],
+  "langs": [
+   "en"
+  ],
+  "views_max": 1164424,
+  "views_median": 2786,
+  "cuts_per_10s": [
+   0.0,
+   0.0,
+   0.0
+  ],
+  "shot_median_s": 17.05,
+  "music": {
+   "continua": 4,
+   "fraca": 0,
+   "sem": 2
+  },
+  "sfx_on_cuts": [
+   0,
+   0
+  ],
+  "top": [
+   {
+    "channel": "zero",
+    "views": "1164424",
+    "url": "https://x.com/twoclipping/status/2103273003555402193"
+   },
+   {
+    "channel": "Martijn Verbove",
+    "views": "17438",
+    "url": "https://x.com/verbove/status/2103483957266268381"
+   },
+   {
+    "channel": "Daniel Haida",
+    "views": "3968",
+    "url": "https://x.com/daniel_haida/status/2104139720829636937"
+   },
+   {
+    "channel": "Anna Chernikova",
+    "views": "1605",
+    "url": "https://x.com/AnnaCher___/status/2103571096549433425"
+   },
+   {
+    "channel": "Nez",
+    "views": "519",
+    "url": "https://x.com/nezbuilds/status/2103487427365294391"
+   }
+  ]
  }
 }

package/src/skills-lib/wizz-video-styles/references/generated-prompts.md

@@ -1,6 +1,6 @@
 # Generated-video prompts, by catalogue style
 
-Fifteen prompts picked from [awesome-opus5-5-videos](https://github.com/yihui-dev/awesome-opus5-5-videos) (513 entries in its `data/videos.json`, MIT, checked on 2026-10-10): videos that a model wrote as code (canvas, SVG, three.js) and that went viral. Each line says what the prompt asks for, in our words; the full prompt and the video are at the links. The prompts belong to their creators: link to them, quote at most a phrase, never paste the whole prompt into a project or a skill.
+Eighteen prompts picked from [awesome-opus5-5-videos](https://github.com/yihui-dev/awesome-opus5-5-videos) (513 entries in its `data/videos.json`, MIT, checked on 2026-10-10): videos that a model wrote as code (canvas, SVG, three.js) and that went viral. Each line says what the prompt asks for, in our words; the full prompt and the video are at the links. The prompts belong to their creators: link to them, quote at most a phrase, never paste the whole prompt into a project or a skill.
 
 This page is a fixed sample. For current videos, and to skip the ones a project already used, run `node scripts/references.mjs pick --style <key>`.
 
@@ -9,7 +9,7 @@ Use this page **after** the style is chosen ([style-picker.md](style-picker.md))
 ## How a generated piece runs in the Method
 
 - **HyperFrames draws, Remotion assembles** (`_shared/video-pipeline.md`, wizz module). A prompt that asks for "one HTML file with the music" becomes: scenes drawn silent in HyperFrames, assembled in Remotion with the audio.
-- **Timing is measured, never guessed.** Words from `ctc-align`; cuts on the downbeats from [`scripts/beat_grid.py`](../scripts/beat_grid.py). Several prompts below ask for a "120 BPM grid" by hand; the script gives the real grid of the actual song.
+- **Timing is measured, never guessed.** Words from `wizz-ctc-align`; cuts on the downbeats from [`scripts/beat_grid.py`](../scripts/beat_grid.py). Several prompts below ask for a "120 BPM grid" by hand; the script gives the real grid of the actual song.
 - **Recompose for 9:16** when the original was square or horizontal: keyword in the upper-middle, nothing important in the bottom 20 %.
 
 ## Kinetic typography and lyric video ([card](styles/tipografia-cinetica.md))
@@ -21,13 +21,23 @@ Use this page **after** the style is chosen ([style-picker.md](style-picker.md))
 | ParanoidAmerica · evil pizza parlour | A full music video synced to a `lyrics.txt`, one continuous camera journey through a place, collage plus ballpoint-pen look. | [post](https://x.com/ParanoidAmerica/status/2103570879619686717) · [video](https://skillry.dev/ai-videos/opus-5-5/paranoidamerica-686717) |
 | twoclipping · wordmark launch film | A one-word brand built in one continuous take to a 120 BPM song with a drop and a breakdown; every scene grows out of the previous one, nothing fades or cuts. | [post](https://x.com/twoclipping/status/2103835273813496100) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-496100) |
 
-## Motion editorial and product UI ([card](styles/motion-editorial.md))
+## UI morph: one shape, many UI states ([card](styles/ui-morph.md))
+
+The most remade prompt in the catalogue: the "8 to 12 UI states" brief appears 7 times, by different authors, with the same result. All six measured references of the style come from here.
 
 | Prompt | What it asks | Links |
 |---|---|---|
 | twoclipping · one shape, many UI states | One element morphs through 8 to 12 UI states (button, loader, player, chart), a cursor drives each change, springs, cut on a 120 BPM grid. | [post](https://x.com/twoclipping/status/2103273003555402193) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-402193) |
 | verbove · product story in one canvas | The same morphing-shape idea as strict rules: one `draw(t)` function, real UI and real data, something on every beat, exports in 1:1, 16:9 and 9:16. | [post](https://x.com/verbove/status/2103483957266268381) · [video](https://skillry.dev/ai-videos/opus-5-5/verbove-268381) |
 | AnnaCher · promo from the product's own UI | Same structure built from the real product UI, one accent colour, last frame equals the first so it loops; a long banned list (glows, particles, bouncy easing). | [post](https://x.com/AnnaCher___/status/2103571096549433425) · [video](https://skillry.dev/ai-videos/opus-5-5/annacher-433425) |
+| dzhohola · the template on a real app | The same "8 to 12 UI states" brief pointed at an existing product (T3 Code): diff, settings, toggles, themes, usage chart and GitHub stars, light turning dark halfway. | [post](https://x.com/dzhohola/status/2103605737595249003) · [video](https://skillry.dev/ai-videos/opus-5-5/dzhohola-249003) |
+| daniel_haida · dark product film | 15 s Apple-level film for a bookkeeping app in React + Remotion, "not a feature walkthrough"; dashboard in perspective, a paper receipt, one yellow accent, soundtrack synthesised in code. | [post](https://x.com/daniel_haida/status/2104139720829636937) · [video](https://skillry.dev/ai-videos/opus-5-5/daniel-haida-636937) |
+| Bilimfili1 · a glance inside the app (vertical) | 45 to 50 s vertical tour of every feature, recorded for real in the simulator, each feature breaking out of the phone; every number on screen comes from the recordings. | [post](https://x.com/Bilimfili1/status/2103743617848459762) · [video](https://skillry.dev/ai-videos/opus-5-5/bilimfili1-459762) |
+
+## Motion editorial and product UI ([card](styles/motion-editorial.md))
+
+| Prompt | What it asks | Links |
+|---|---|---|
 | jhylee95 · launch video | Research the product, hook in the first second, distinct beats for proof, every cut and hit retimed until it lands on a beat or drop. | [post](https://x.com/jhylee95/status/2103604431627452427) · [video](https://skillry.dev/ai-videos/opus-5-5/jhylee95-452427) |
 | twoclipping · minimal launch with real footage | 10 bars at 120 BPM, one idea per shot, masked type reveals and match cuts over the owner's real vertical clips; no placeholder cards. | [post](https://x.com/twoclipping/status/2102554209166000267) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-000267) |
 | Mounnna · logo reveal | Logo drawn as a wireframe, low-poly shards fly in and assemble it, then the icon background and the typed brand name. A 3 to 5 s sting for the CTA. | [post](https://x.com/Mounnna/status/2103802871934497266) · [video](https://skillry.dev/ai-videos/opus-5-5/mounnna-497266) |

package/src/skills-lib/wizz-video-styles/references/style-picker.md

@@ -8,6 +8,7 @@ The material decides which styles are **possible**. Niche and goal only rank the
 |---|---|
 | Voice only (own recording or TTS), no one on camera | [motion-editorial](styles/motion-editorial.md), [explicador-animado](styles/explicador-animado.md), [meme-rapido](styles/meme-rapido.md) |
 | A song with its lyrics, or a voice-over or slogan with no footage at all | [tipografia-cinetica](styles/tipografia-cinetica.md) (the words are the image; scenes generated in code) |
+| Only the product's UI (its screens, or a list of states), no person and no voice | [ui-morph](styles/ui-morph.md) (one shape becomes each UI state, a cursor drives it, cut on the beat) |
 | Voice + app/site screens | [motion-editorial](styles/motion-editorial.md) (screenshots in a phone card), [camera-no-setup](styles/camera-no-setup.md) (film the screen), [meme-rapido](styles/meme-rapido.md) |
 | A person on camera talking, nothing else | [talking-head-legenda](styles/talking-head-legenda.md) |
 | A person on camera + headlines, articles, charts, b-roll | [talking-head-cards](styles/talking-head-cards.md) (face bubble over full-screen b-roll is a variant) |
@@ -29,10 +30,10 @@ From [`data/references.json`](../data/references.json): the styles measured in e
 
 | Niche | Styles found (highest views) |
 |---|---|
-| dev / AI / build in public (EN) | meme-rapido (8.8M), camera-no-setup (8.1M), talking-head-legenda (5.4M), quadro-branco (4.4M), motion-editorial (0.83M), talking-head-cards (0.82M), podcast-clip (0.48M) |
+| dev / AI / build in public (EN) | meme-rapido (8.8M), camera-no-setup (8.1M), talking-head-legenda (5.4M), quadro-branco (4.4M), ui-morph (1.2M), motion-editorial (0.83M), talking-head-cards (0.82M), podcast-clip (0.48M) |
 | dev / AI / tech business (BR) | quadro-branco (1.1M), talking-head-cards (0.41M), talking-head-legenda (0.26M), meme-rapido (0.23M), camera-no-setup (0.11M) |
 | personal finance / investing | podcast-clip (1.2M), talking-head-cards (1.2M), talking-head-legenda (0.77M) |
-| product / SaaS / marketing / business / law | desafio-numero (20.9M), talking-head-legenda (9.8M), tipografia-cinetica (1.2M), camera-no-setup (0.53M), podcast-clip (0.33M), quadro-branco (0.15M), talking-head-cards (0.09M) |
+| product / SaaS / marketing / business / law | desafio-numero (20.9M), talking-head-legenda (9.8M), tipografia-cinetica (1.2M), camera-no-setup (0.53M), podcast-clip (0.33M), quadro-branco (0.15M), talking-head-cards (0.09M), ui-morph (0.02M) |
 | health / fitness / nutrition | explicador-animado (33.4M), podcast-clip (9.8M), quadro-branco (0.61M), macro-asmr (0.54M), talking-head-cards (0.43M), desafio-numero (0.22M) |
 | food / recipes / lifestyle / travel | desafio-numero (107M), pov-vlog (8.7M), macro-asmr (7.7M), tour (1.05M) |
 | beauty / fashion / local services (clinic, salon, architecture, real estate) | macro-asmr (10.6M), talking-head-legenda (3.8M), talking-head-cards (2.0M), pov-vlog (1.4M), tour (0.37M) |
@@ -45,6 +46,7 @@ BR local services (clinic, salon, law, architecture), BR travel and BR sales/mar
 
 - **Saves and comments (teach, explain a system):** motion-editorial, explicador-animado, quadro-branco, talking-head-cards.
 - **Reach and shares (curiosity, humour):** desafio-numero, experimento, meme-rapido, esquete, pov-vlog, tipografia-cinetica (music and manifestos).
+- **Show the product working (launch, new feature, store page):** ui-morph, motion-editorial.
 - **Trust and authority (a person the audience should know):** talking-head-legenda, podcast-clip, camera-no-setup.
 - **Desire for a product:** macro-asmr, desafio-numero, camera-no-setup.