takomi 2.5.1 → 2.5.4

package/assets/.agent/skills/talking-head-recut/references/DESIGN_INDEX.md

@@ -1,145 +1,145 @@
-# V—Take Visual Design Library
-
-This directory is a **reference library** for the talking-head-recut skill. Style, layout,
-and video frame are three **orthogonal** dimensions you can freely mix when
-designing a takeaway video.
-
-```
-Style  ×  Layout  ×  VideoFrame
- (10)      (4)         (3)        = 120 possible combinations
-```
-
-Read a reference file when you decide to use that dimension. Each file is a
-self-contained HTML fragment that follows the talking-head-recut card-HTML contract
-(scoped `<style>`, no `<script>`, no external URLs, animations only via
-`data-anim-*`).
-
-## Layouts — how video and card share the canvas
-
-| key       | file                                         | what it does                                            | best for                                |
-| --------- | -------------------------------------------- | ------------------------------------------------------- | --------------------------------------- |
-| `split`   | [layouts/split.html](layouts/split.html)     | 50/50 side-by-side (landscape) or top/bottom (portrait) | speaker + data equal weight             |
-| `stack`   | [layouts/stack.html](layouts/stack.html)     | video on top (~52%), card below                         | talking-head with summary card          |
-| `pip`     | [layouts/pip.html](layouts/pip.html)         | card fills canvas, video rounded PiP in corner          | content-heavy moment, speaker secondary |
-| `overlay` | [layouts/overlay.html](layouts/overlay.html) | video full-bleed, glass card floats on bottom           | cinematic / dramatic moments            |
-
-A layout is a **two-part recipe**: pick a `card.zone` value to put in
-`storyboard.json` AND author a GSAP tween for `#video-wrap` to its
-target rect in the composition's `<script>`. Open the layout file's
-header for the recommended `zone` + the GSAP statement to paste.
-(Earlier docs referenced a `card.layout` field — that field does NOT
-exist in the real schema; the strict v3 schema only has `card.zone`.)
-
-## Styles — the card's visual language
-
-| key          | file                                             | character                                            | accent    | suggested font      |
-| ------------ | ------------------------------------------------ | ---------------------------------------------------- | --------- | ------------------- |
-| `academic`   | [styles/academic.html](styles/academic.html)     | warm paper · grid · serif · blue highlight           | `#2557a7` | serif               |
-| `editorial`  | [styles/editorial.html](styles/editorial.html)   | cream · coral block · big italic quote               | `#ff3a2d` | Playfair-like serif |
-| `minimal`    | [styles/minimal.html](styles/minimal.html)       | pure black/white · huge type · generous space        | `#000`    | Inter               |
-| `spotlight`  | [styles/spotlight.html](styles/spotlight.html)   | dark purple gradient · glow · dramatic               | `#a78bfa` | sans                |
-| `geom`       | [styles/geom.html](styles/geom.html)             | chartreuse + hot pink + black collision              | `#d4ff00` | Inter bold          |
-| `whiteboard` | [styles/whiteboard.html](styles/whiteboard.html) | paper · Caveat handwriting · sketched borders        | `#ff6b35` | Caveat              |
-| `audit`      | [styles/audit.html](styles/audit.html)           | manila paper · justified serif · APPROVED stamp      | `#8b1d1d` | serif               |
-| `terminal`   | [styles/terminal.html](styles/terminal.html)     | dark · monospace · ASCII border · prompt cursor      | `#4ade80` | mono                |
-| `swiss`      | [styles/swiss.html](styles/swiss.html)           | white · Helvetica · strict double rules · red accent | `#e8190f` | Helvetica/Inter     |
-| `xhs`        | [styles/xhs.html](styles/xhs.html)               | cream + hot pink · chips · #hashtags · ❤️💬 row      | `#ff2e63` | sans                |
-
-Choose by content tone, not by content type — `academic` works for finance
-too if the tone is reflective; `terminal` works for non-tech if the tone is
-"engineering rigor".
-
-## Video Frames — decoration around the video element
-
-| key        | file                                         | character                                                    | when to skip                                     |
-| ---------- | -------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------ |
-| `clean`    | [frames/clean.html](frames/clean.html)       | no decoration; raw video                                     | default; safest                                  |
-| `hairline` | [frames/hairline.html](frames/hairline.html) | double-stroke + four-corner viewfinder ticks                 | over `overlay` layout (clashes with full-bleed)  |
-| `polaroid` | [frames/polaroid.html](frames/polaroid.html) | white photo frame + Caveat label + blue washi tape (no tilt) | over `overlay` layout; portrait PiP gets cramped |
-
-A frame is a decorative div that sits **next to** the `#video-wrap` inside
-the composition's `#stage`. It is one-time HTML (not animated), but you can
-fade it in/out across cards. See each frame file for the placement snippet
-and the inline `<style>` it needs.
-
-## Decision guide (loose, not prescriptive)
-
-| video content                    | suggested combos                                         |
-| -------------------------------- | -------------------------------------------------------- |
-| interview / dialogue             | `academic` × `stack`, `audit` × `split`                  |
-| product launch / announcement    | `editorial` × `overlay`, `geom` × `pip`                  |
-| data analysis / financial report | `audit` × `split`, `swiss` × `stack`, `terminal` × `pip` |
-| social clip (9:16)               | `xhs` × `overlay`, `editorial` × `stack`                 |
-| technical tutorial               | `terminal` × `split`, `whiteboard` × `pip`               |
-| emotional story / narration      | `spotlight` × `overlay`, `whiteboard` × `overlay`        |
-| minimalist presentation          | `minimal` × `split`, `swiss` × `overlay`                 |
-
-These are starting points only. Look at the transcript, pick the tone, then
-pick the visual.
-
-## Portrait sizing — bigger type for mobile
-
-Every `references/styles/*.html` is sized for a **1920×1080 landscape**
-preview. When the final composition is **portrait (1080×1920)** — the
-default for social / mobile — scale every visual size up so it reads on a
-phone held close.
-
-| token                 | landscape | **portrait** | scale |
-| --------------------- | --------- | ------------ | ----- |
-| hero title (h1/h2)    | 64–96px   | **88–132px** | ×1.35 |
-| detail / body         | 24–30px   | **30–40px**  | ×1.30 |
-| kicker / chip / meta  | 14–18px   | **18–22px**  | ×1.25 |
-| primary number / stat | 48–60px   | **64–88px**  | ×1.40 |
-| horizontal padding    | 40–64px   | **24–36px**  | ÷1.5  |
-
-`portraitPx ≈ round(landscapePx × 1.3)`. Hero headlines can go ×1.4;
-small meta stays at ×1.2. Padding **shrinks** in portrait since the card
-is narrower.
-
-For a card that must work in both, use a container query on the card
-root: `container-type: inline-size` + `font-size: clamp(64px, 8.5cqi, 132px)`.
-
-## Source aspect ratio independence
-
-Output canvas is independent of source video aspect. Three supported
-output ratios (selected by the user in Step 7.0 of SKILL.md):
-
-| ratio  | canvas    | `storyboard.layout`                                    | best for                                                   |
-| ------ | --------- | ------------------------------------------------------ | ---------------------------------------------------------- |
-| `16:9` | 1920×1080 | `"landscape"`                                          | YouTube / TV / desktop playback                            |
-| `9:16` | 1080×1920 | `"portrait"`                                           | TikTok / Reels / short-form mobile                         |
-| `4:5`  | 1080×1350 | `"portrait"` (schema treats 4:5 as portrait since h>w) | Instagram feed / WeChat Moments / works for both platforms |
-
-The layout reference files in `layouts/` document **landscape** and
-**portrait** bounds only. For **4:5** derive bounds by proportional
-vertical scaling from portrait: `4:5 y/h = round(portrait y/h × 0.703)`,
-keep `x/w` identical. The composer doesn't care about the named layout
-value; it just uses `composition.width × height`.
-
-- Landscape video on landscape canvas → `videoBounds` matches video aspect, no letterbox
-- Portrait video on landscape canvas → `videoBounds` is a narrower box (e.g. `pip` becomes 248×440); empty side filled by card or background
-- Landscape video on portrait canvas → `videoBounds` becomes a wide-but-short band; `stack` and `overlay` work best
-- Portrait video on portrait canvas → most natural; any layout
-
-The layout reference files show landscape values; for portrait you usually
-flip the long axis: `split` becomes top/bottom, `pip` video bubble shrinks
-~20%, `overlay` card slot widens to full width.
-
-## Constraints you must obey when copying from these references
-
-1. **No `<script>`** — animations only via `data-anim-*` attributes
-2. **No external URLs** — no Google Fonts CDN, no remote images; the
-   skill provides Caveat / LXGW WenKai TC / Inter / Virgil locally
-3. **All `<style>` rules must be prefixed with `.card[data-card-id="..."]`** —
-   the hyperframes sanitizer auto-scopes them, but write them already-scoped to
-   stay readable
-4. **No `on*=` inline handlers**
-5. **CSS variables for colors** when you want a card to switch theme cleanly;
-   inline hex when you want this specific style's signature look
-
-If a reference uses a font you don't have, fall back:
-
-- Playfair Display / Noto Serif SC → `ui-serif, "Songti SC", "Times New Roman", serif`
-- Noto Sans SC → `ui-sans-serif, system-ui, sans-serif`
-- JetBrains Mono → `ui-monospace, "SF Mono", Menlo, monospace`
-- Kalam → `'Caveat', cursive`
+# V—Take Visual Design Library
+
+This directory is a **reference library** for the talking-head-recut skill. Style, layout,
+and video frame are three **orthogonal** dimensions you can freely mix when
+designing a takeaway video.
+
+```
+Style  ×  Layout  ×  VideoFrame
+ (10)      (4)         (3)        = 120 possible combinations
+```
+
+Read a reference file when you decide to use that dimension. Each file is a
+self-contained HTML fragment that follows the talking-head-recut card-HTML contract
+(scoped `<style>`, no `<script>`, no external URLs, animations only via
+`data-anim-*`).
+
+## Layouts — how video and card share the canvas
+
+| key       | file                                         | what it does                                            | best for                                |
+| --------- | -------------------------------------------- | ------------------------------------------------------- | --------------------------------------- |
+| `split`   | [layouts/split.html](layouts/split.html)     | 50/50 side-by-side (landscape) or top/bottom (portrait) | speaker + data equal weight             |
+| `stack`   | [layouts/stack.html](layouts/stack.html)     | video on top (~52%), card below                         | talking-head with summary card          |
+| `pip`     | [layouts/pip.html](layouts/pip.html)         | card fills canvas, video rounded PiP in corner          | content-heavy moment, speaker secondary |
+| `overlay` | [layouts/overlay.html](layouts/overlay.html) | video full-bleed, glass card floats on bottom           | cinematic / dramatic moments            |
+
+A layout is a **two-part recipe**: pick a `card.zone` value to put in
+`storyboard.json` AND author a GSAP tween for `#video-wrap` to its
+target rect in the composition's `<script>`. Open the layout file's
+header for the recommended `zone` + the GSAP statement to paste.
+(Earlier docs referenced a `card.layout` field — that field does NOT
+exist in the real schema; the strict v3 schema only has `card.zone`.)
+
+## Styles — the card's visual language
+
+| key          | file                                             | character                                            | accent    | suggested font      |
+| ------------ | ------------------------------------------------ | ---------------------------------------------------- | --------- | ------------------- |
+| `academic`   | [styles/academic.html](styles/academic.html)     | warm paper · grid · serif · blue highlight           | `#2557a7` | serif               |
+| `editorial`  | [styles/editorial.html](styles/editorial.html)   | cream · coral block · big italic quote               | `#ff3a2d` | Playfair-like serif |
+| `minimal`    | [styles/minimal.html](styles/minimal.html)       | pure black/white · huge type · generous space        | `#000`    | Inter               |
+| `spotlight`  | [styles/spotlight.html](styles/spotlight.html)   | dark purple gradient · glow · dramatic               | `#a78bfa` | sans                |
+| `geom`       | [styles/geom.html](styles/geom.html)             | chartreuse + hot pink + black collision              | `#d4ff00` | Inter bold          |
+| `whiteboard` | [styles/whiteboard.html](styles/whiteboard.html) | paper · Caveat handwriting · sketched borders        | `#ff6b35` | Caveat              |
+| `audit`      | [styles/audit.html](styles/audit.html)           | manila paper · justified serif · APPROVED stamp      | `#8b1d1d` | serif               |
+| `terminal`   | [styles/terminal.html](styles/terminal.html)     | dark · monospace · ASCII border · prompt cursor      | `#4ade80` | mono                |
+| `swiss`      | [styles/swiss.html](styles/swiss.html)           | white · Helvetica · strict double rules · red accent | `#e8190f` | Helvetica/Inter     |
+| `xhs`        | [styles/xhs.html](styles/xhs.html)               | cream + hot pink · chips · #hashtags · ❤️💬 row      | `#ff2e63` | sans                |
+
+Choose by content tone, not by content type — `academic` works for finance
+too if the tone is reflective; `terminal` works for non-tech if the tone is
+"engineering rigor".
+
+## Video Frames — decoration around the video element
+
+| key        | file                                         | character                                                    | when to skip                                     |
+| ---------- | -------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------ |
+| `clean`    | [frames/clean.html](frames/clean.html)       | no decoration; raw video                                     | default; safest                                  |
+| `hairline` | [frames/hairline.html](frames/hairline.html) | double-stroke + four-corner viewfinder ticks                 | over `overlay` layout (clashes with full-bleed)  |
+| `polaroid` | [frames/polaroid.html](frames/polaroid.html) | white photo frame + Caveat label + blue washi tape (no tilt) | over `overlay` layout; portrait PiP gets cramped |
+
+A frame is a decorative div that sits **next to** the `#video-wrap` inside
+the composition's `#stage`. It is one-time HTML (not animated), but you can
+fade it in/out across cards. See each frame file for the placement snippet
+and the inline `<style>` it needs.
+
+## Decision guide (loose, not prescriptive)
+
+| video content                    | suggested combos                                         |
+| -------------------------------- | -------------------------------------------------------- |
+| interview / dialogue             | `academic` × `stack`, `audit` × `split`                  |
+| product launch / announcement    | `editorial` × `overlay`, `geom` × `pip`                  |
+| data analysis / financial report | `audit` × `split`, `swiss` × `stack`, `terminal` × `pip` |
+| social clip (9:16)               | `xhs` × `overlay`, `editorial` × `stack`                 |
+| technical tutorial               | `terminal` × `split`, `whiteboard` × `pip`               |
+| emotional story / narration      | `spotlight` × `overlay`, `whiteboard` × `overlay`        |
+| minimalist presentation          | `minimal` × `split`, `swiss` × `overlay`                 |
+
+These are starting points only. Look at the transcript, pick the tone, then
+pick the visual.
+
+## Portrait sizing — bigger type for mobile
+
+Every `references/styles/*.html` is sized for a **1920×1080 landscape**
+preview. When the final composition is **portrait (1080×1920)** — the
+default for social / mobile — scale every visual size up so it reads on a
+phone held close.
+
+| token                 | landscape | **portrait** | scale |
+| --------------------- | --------- | ------------ | ----- |
+| hero title (h1/h2)    | 64–96px   | **88–132px** | ×1.35 |
+| detail / body         | 24–30px   | **30–40px**  | ×1.30 |
+| kicker / chip / meta  | 14–18px   | **18–22px**  | ×1.25 |
+| primary number / stat | 48–60px   | **64–88px**  | ×1.40 |
+| horizontal padding    | 40–64px   | **24–36px**  | ÷1.5  |
+
+`portraitPx ≈ round(landscapePx × 1.3)`. Hero headlines can go ×1.4;
+small meta stays at ×1.2. Padding **shrinks** in portrait since the card
+is narrower.
+
+For a card that must work in both, use a container query on the card
+root: `container-type: inline-size` + `font-size: clamp(64px, 8.5cqi, 132px)`.
+
+## Source aspect ratio independence
+
+Output canvas is independent of source video aspect. Three supported
+output ratios (selected by the user in Step 7.0 of SKILL.md):
+
+| ratio  | canvas    | `storyboard.layout`                                    | best for                                                   |
+| ------ | --------- | ------------------------------------------------------ | ---------------------------------------------------------- |
+| `16:9` | 1920×1080 | `"landscape"`                                          | YouTube / TV / desktop playback                            |
+| `9:16` | 1080×1920 | `"portrait"`                                           | TikTok / Reels / short-form mobile                         |
+| `4:5`  | 1080×1350 | `"portrait"` (schema treats 4:5 as portrait since h>w) | Instagram feed / WeChat Moments / works for both platforms |
+
+The layout reference files in `layouts/` document **landscape** and
+**portrait** bounds only. For **4:5** derive bounds by proportional
+vertical scaling from portrait: `4:5 y/h = round(portrait y/h × 0.703)`,
+keep `x/w` identical. The composer doesn't care about the named layout
+value; it just uses `composition.width × height`.
+
+- Landscape video on landscape canvas → `videoBounds` matches video aspect, no letterbox
+- Portrait video on landscape canvas → `videoBounds` is a narrower box (e.g. `pip` becomes 248×440); empty side filled by card or background
+- Landscape video on portrait canvas → `videoBounds` becomes a wide-but-short band; `stack` and `overlay` work best
+- Portrait video on portrait canvas → most natural; any layout
+
+The layout reference files show landscape values; for portrait you usually
+flip the long axis: `split` becomes top/bottom, `pip` video bubble shrinks
+~20%, `overlay` card slot widens to full width.
+
+## Constraints you must obey when copying from these references
+
+1. **No `<script>`** — animations only via `data-anim-*` attributes
+2. **No external URLs** — no Google Fonts CDN, no remote images; the
+   skill provides Caveat / LXGW WenKai TC / Inter / Virgil locally
+3. **All `<style>` rules must be prefixed with `.card[data-card-id="..."]`** —
+   the hyperframes sanitizer auto-scopes them, but write them already-scoped to
+   stay readable
+4. **No `on*=` inline handlers**
+5. **CSS variables for colors** when you want a card to switch theme cleanly;
+   inline hex when you want this specific style's signature look
+
+If a reference uses a font you don't have, fall back:
+
+- Playfair Display / Noto Serif SC → `ui-serif, "Songti SC", "Times New Roman", serif`
+- Noto Sans SC → `ui-sans-serif, system-ui, sans-serif`
+- JetBrains Mono → `ui-monospace, "SF Mono", Menlo, monospace`
+- Kalam → `'Caveat', cursive`

package/assets/.agent/skills/talking-head-recut/references/frames/clean.html

@@ -1,92 +1,92 @@
-<!--
-  Frame: clean — no decoration. Raw video edge.
-  ─────────────────────────────────────────────────────────────────────
-  When to use
-    - Default; safest.
-    - Pairs with any layout and any style.
-    - Required over the `overlay` layout (decorative frames clash with full-bleed video).
-
-  How to apply in the composition
-    No extra HTML — just leave #video-wrap without the `framed` class.
-
-    .video-wrapper { border-radius: 0; box-shadow: none; }
-
-  How to apply on PiP layouts
-    Even with `clean`, PiPs benefit from a 14px border-radius + soft shadow
-    (see layouts/pip.html). That's a layout-level treatment, not a frame.
-
-  Placement
-    None. This reference exists as documentation of the "no-frame" option.
--->
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <title>frame · clean (no decoration)</title>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        background: #0a0c12;
-        color: #fff;
-        font-family: ui-sans-serif, system-ui, sans-serif;
-      }
-      .stage {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        transform-origin: top left;
-        transform: scale(0.5);
-        background: #0a0c12;
-        overflow: hidden;
-      }
-      .video-wrap {
-        position: absolute;
-        left: 240px;
-        top: 140px;
-        width: 1440px;
-        height: 810px;
-        background: #1a1f2e;
-        background-image: repeating-linear-gradient(
-          45deg,
-          transparent 0 12px,
-          rgba(255, 255, 255, 0.05) 12px 13px
-        );
-      }
-      .v-label {
-        position: absolute;
-        left: 24px;
-        top: 24px;
-        padding: 8px 14px;
-        border: 1px solid rgba(255, 255, 255, 0.45);
-        border-radius: 3px;
-        color: rgba(255, 255, 255, 0.7);
-        font:
-          600 16px/1 ui-monospace,
-          monospace;
-        letter-spacing: 0.14em;
-      }
-      .note {
-        position: absolute;
-        left: 240px;
-        bottom: 60px;
-        right: 240px;
-        text-align: center;
-        color: rgba(255, 255, 255, 0.5);
-        font:
-          14px/1.4 ui-monospace,
-          monospace;
-        letter-spacing: 0.12em;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="stage">
-      <div class="video-wrap">
-        <span class="v-label">VIDEO · no chrome</span>
-      </div>
-      <div class="note">CLEAN — let the video speak for itself.</div>
-    </div>
-  </body>
-</html>
+<!--
+  Frame: clean — no decoration. Raw video edge.
+  ─────────────────────────────────────────────────────────────────────
+  When to use
+    - Default; safest.
+    - Pairs with any layout and any style.
+    - Required over the `overlay` layout (decorative frames clash with full-bleed video).
+
+  How to apply in the composition
+    No extra HTML — just leave #video-wrap without the `framed` class.
+
+    .video-wrapper { border-radius: 0; box-shadow: none; }
+
+  How to apply on PiP layouts
+    Even with `clean`, PiPs benefit from a 14px border-radius + soft shadow
+    (see layouts/pip.html). That's a layout-level treatment, not a frame.
+
+  Placement
+    None. This reference exists as documentation of the "no-frame" option.
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>frame · clean (no decoration)</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        color: #fff;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        background: #0a0c12;
+        overflow: hidden;
+      }
+      .video-wrap {
+        position: absolute;
+        left: 240px;
+        top: 140px;
+        width: 1440px;
+        height: 810px;
+        background: #1a1f2e;
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 12px,
+          rgba(255, 255, 255, 0.05) 12px 13px
+        );
+      }
+      .v-label {
+        position: absolute;
+        left: 24px;
+        top: 24px;
+        padding: 8px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        border-radius: 3px;
+        color: rgba(255, 255, 255, 0.7);
+        font:
+          600 16px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.14em;
+      }
+      .note {
+        position: absolute;
+        left: 240px;
+        bottom: 60px;
+        right: 240px;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.5);
+        font:
+          14px/1.4 ui-monospace,
+          monospace;
+        letter-spacing: 0.12em;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="video-wrap">
+        <span class="v-label">VIDEO · no chrome</span>
+      </div>
+      <div class="note">CLEAN — let the video speak for itself.</div>
+    </div>
+  </body>
+</html>