@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/create-onboarding-video/SKILL.md

@@ -1,233 +0,0 @@
----
-name: create-onboarding-video
-description: "Produce short, punchy web app onboarding videos in AICUT that showcase a feature in action by animating isolated pieces of the UI (cropped components, not full pages) with nice UI-like transitions. Default output is column-sized (half-screen) for embedding next to copy in a two-column block on a marketing page. Use when the user asks to create, build, or generate an onboarding video, feature demo clip, in-page feature video, two-column feature block video, product launch video, or any short video that demonstrates a web app feature using supplied screenshots. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "gorkem-bwl/onboarding-video-generator"
----
-
-# Create Onboarding Video
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-Produce a **short, punchy web app onboarding video** in Remotion that showcases one feature working. Output is meant to drop into a **two-column feature block** on a marketing page — copy on one side, this video on the other — zoomed into the moment that proves the feature works. Not a tutorial, not a screen recording, not a marketing reel.
-
-## What you make
-
-- **Length:** short. 3–8 seconds per onboarding view, stitched together. Whole video rarely exceeds ~20s — these live next to copy on a marketing page, not in a standalone player.
-- **Size:** **column-sized, not full-screen.** Default canvas is **1280×960 (4:3)** or **1200×900 (4:3)** — sized to fit one column of a two-column feature block at desktop widths, and to scale down cleanly to a stacked single-column on mobile. Square (1:1) is also fine when the layout calls for it. **Do not** default to 1920×1080 widescreen — that's a fullscreen video aspect, not a column aspect.
-- **Style:** UI-first, **never the whole page**. Each beat shows a **piece of the feature in action** — a single button being clicked, a toggle flipping, a row reordering, a modal sliding in, a chart filling in, a dropdown opening — animated with **nice UI-like transitions** (springs, slides, scales, crossfades, masked reveals, shared-element swaps).
-- **What "pieces" means:** crop, mask, or extract just the relevant component from the supplied still — the card, the input field, the nav bar, the sidebar item, the empty state turning into a filled state. The rest of the UI is omitted, blurred, or implied by a tinted background. We are showcasing **what the feature *does*,** not what the whole app looks like. This is doubly true at column size: a full-page screenshot shrunk into a column is unreadable, so cropping to a single component is non-negotiable.
-- **Tone:** to the point. Each beat communicates one thing the feature does.
-- **Loop-friendly.** Because these autoplay muted next to copy on a marketing page, the last frame should comfortably crossfade back to the first — design the end card / final beat so the loop point isn't jarring.
-- **Output:** a Remotion project that renders to MP4 + WebM (the WebM is for `<video>` tag embedding on the marketing page). Optionally a square variant for stacked-mobile and a widescreen variant if a full-bleed hero placement is requested.
-
-## Workflow
-
-Follow this loop. **Do not skip the intake — guessing at flows produces generic videos.**
-
-### 1. Intake — ask for stills + intent
-
-For each onboarding view the user wants to feature, collect:
-
-1. **Still shots (screenshots)** of the view — ask for **2–4 stills per view** so you can show interaction states:
-   - resting state
-   - mid-interaction (button hovered/pressed, field focused, modal halfway in, etc.)
-   - result state (data loaded, success, next view)
-   - any variant worth showing (empty vs. filled, light vs. dark, etc.)
-2. **What the feature is** — one or two sentences on what this view does for the user and what makes it feel good. This drives which detail to zoom into.
-3. **Order** — the sequence of views in the onboarding flow.
-4. **Where it will live on the page** — confirm this is a column-embedded feature video (default) vs. a fullscreen hero video (rare). Default is column-sized (4:3 or 1:1).
-5. **Optional:** brand color / accent, font if non-standard, target aspect ratio override (default 1280×960 / 4:3 column; 1080×1080 square; widescreen only if a fullscreen hero placement is confirmed), end-card text/CTA, whether it should loop seamlessly.
-
-Use `AskUserQuestion` when the user is vague. **Match the feature to an archetype in `resources/state-archetypes.md`** before asking for screenshots — the archetype tells you exactly which states to capture (resting, mid-interaction, result, etc.) and removes the "I started authoring then realized I'm missing the focused state" bug. Don't start rendering until you have stills + intent for every view.
-
-### 2. Plan the shots
-
-For each view, identify the **single piece of the feature that proves the feature works** — the clicked button, the filling progress bar, the row that gets dragged, the field that auto-completes, the dropdown that expands — and how it transitions to the next beat. **Never animate the whole page.** Sketch the timeline (focal element → motion → result → next focal element) before writing components. Prefer:
-
-- isolating/cropping/masking the relevant component out of the still and placing it on a tinted background
-- showing the *interaction itself* (click ripple, drag, focus, hover, state change) rather than just the static layout
-- shared-element transitions between beats (the button on beat 1 becomes the header on beat 2)
-- subtle parallax / depth on layered elements
-- spring-based motion over linear easing
-
-### 3. Scaffold from `resources/scaffold/`
-
-**Do not author from scratch.** The skill ships a complete Remotion scaffold at `resources/scaffold/`. Copy it into the target project — never reinvent the boilerplate.
-
-```bash
-cp -R <skill-dir>/resources/scaffold/ <project-dir>/
-```
-```
-The scaffold gives you:
-- `src/Root.tsx` + `src/Composition.tsx` — already wired to render whatever beats you define
-- `src/beats.ts` — the `Beat` type and `computeTotalDuration()` helper. **Total composition duration is computed from the `BEATS` array — never hardcode `durationInFrames`.**
-- `src/scenes/beats-config.ts` — the single source of timing truth. Edit `BEATS` here; the composition reshapes itself.
-- `src/components/TopCaption.tsx`, `Pointer.tsx`, `DebugCrosshair.tsx` — pre-built and battle-tested. Don't rewrite them.
-- `src/tokens.ts` — design tokens (replace per project; VerifyWise defaults are the comment).
-- `package.json` with render + ship scripts.
-```
-
-### 4. Pin Remotion to the actual latest version
-
-The scaffold's `package.json` lists `"latest"` for the three Remotion packages. **Resolve `latest` to a real version before installing** — do not invent versions:
-
-```bash
-npm view remotion version       # prints e.g. 4.0.459
-```
-
-# Edit package.json — replace all three "latest" entries with that exact version.
-npm install
-```
-Inventing a version (e.g. `4.0.190`) will fail with `ETARGET notarget` and waste time.
-```
-
-### 5. Build with Remotion
-
-**Always invoke the `remotion-best-practices` skill before writing scene code.** When you do, include this guidance:
-
-> Build a short, **column-sized** web-app feature video (default canvas 1280×960, 4:3 — *not* widescreen). It's destined to autoplay muted inside one half of a two-column block on a marketing page. **Never render the whole page** — each beat must show a *piece of the feature in action*: an isolated/cropped/masked UI component (button, card, row, modal, field, chart, dropdown, etc.) animating through the interaction that demonstrates what the feature does. Place it on a clean tinted background; the rest of the app chrome is omitted or implied. Use **nice UI-like transitions** — springs, masked reveals, shared-element morphs, crossfades, parallax — to move between beats. Prefer `spring()` over linear interpolation, use `<Sequence>` to chain beats, and keep each beat short (90–240 frames at 30fps). The composition should loop cleanly — the last frame should crossfade comfortably back to the first. Stills go in `public/` and load via `staticFile()`; crop them with CSS `clip-path` / `overflow: hidden` / absolute positioning to extract the focal element.
-
-Project conventions:
-- Source stills in `public/<view-name>/<state>.png`.
-- **Default 30fps, 1280×960 (4:3) column-sized.** Expose `width` and `height` as composition props so the same scenes can re-render at 1080×1080 (square) or 1920×1080 (widescreen, only if a fullscreen hero is explicitly asked for).
-- Render an **MP4** (H.264) for general use **and** a **WebM** (VP9 or AV1) for `<video>` tag embedding on the marketing page. Both should be small (target <2 MB for a 15s clip) so the page stays fast.
-- Layout the focal slice within a safe margin: at least 8% padding on every edge. Captions should sit comfortably *inside* the canvas, not flush to the corners — column-sized videos lose readability fast if anything is at the edge.
-- **Rebuild vs crop:** when rebuilding a UI slice in JSX, run through `resources/rebuild-parity-checklist.md` before considering the slice done. The checklist also tells you when to crop a screenshot instead.
-
-### 6. Verify cursor coordinates before final render
-
-**This step is mandatory for every beat that has a click, ripple, or glow ring. Skipping it costs a full re-render.**
-
-Three complementary tools, in order:
-
-**A. Coordinate picker (first pass).** Open `resources/coordinate-picker.html` in a browser, drop the screenshot in, click the target, copy the generated `<Pointer>` config. Handles canvas-coord scaling automatically — a click in a half-size browser window still produces correct 1280×960 coordinates.
-
-**B. Render a still at the click frame (second pass — REQUIRED before first full render).** When you rebuild a slice in JSX, the picker's coords are based on the source screenshot, but the rebuild may not align pixel-for-pixel. Render a still at the global frame where the cursor arrives:
-
-```bash
-npm run render:still -- --frame=<global-arrival-frame>
-```
-```
-Open the still and visually check: the cursor's tip is *inside* the target. The HIGH RISK chip / Save button / glow ring is *exactly* where you intended. Do this for every interactive beat.
-
-**Computing the global arrival frame.** Sequences overlap by `CROSSFADE_FRAMES` (default 12). Beat N starts at:
-```
-```
-globalStart(N) = sum(durationFrames of beats 0..N-1) - N * CROSSFADE_FRAMES
-```
-```
-So if your beats are 75, 60, 135, 75, 60, 90 frames and you want to verify a click at local frame 32 of beat 4 (index 3): `globalStart = 75 + 60 + 135 - 3*12 = 234`, then `globalFrame = 234 + 32 = 266`. Use the `beatGlobalFrame()` helper in `src/beats.ts` to do this math automatically.
-
-**C. DebugCrosshair (third pass — when coords are wrong).** If the still in pass B shows the cursor missing the target, drop `<DebugCrosshair x={...} y={...} label="..."/>` next to the cursor in the scene at the same coords as the waypoint, render again. The crosshair makes the *intended* coords visually obvious so you can see how far off they are. **Remove all `<DebugCrosshair>` instances before the final render.**
-```
-
-### 6b. Choose SingleBeat vs SceneGroup
-
-The scaffold supports two beat kinds:
-
-- **SingleBeat** — one sequence, one component, one caption. Use when the visual changes substantially between beats (toolbar → modal → result).
-- **SceneGroup** — one sequence wraps a UI that persists across multiple captioned moments. The group's component reads the local frame and drives state internally. Use when the same UI is on screen across multiple cuts and only its internal state changes (a modal that opens empty → fills in → submits — modal never unmounts).
-
-The default is SingleBeat. Use SceneGroup when you catch yourself authoring three near-identical scene components for the same UI — they should be one group with three sub-beats. See `src/scenes/ExampleGroup.tsx` in the scaffold for the pattern.
-
-### 7. Render + ship
-
-```bash
-npm run render        # mp4 + webm
-SHIP_DEST=/path/to/website/public/videos/features npm run ship
-```
-```
-The ship script is destination-agnostic — `SHIP_DEST` is set per project. For VerifyWise: `SHIP_DEST=../../public/videos/features` if the scaffold lives at `<website>/remotion/<feature>`.
-```
-
-### 8. Iterate
-
-Render a preview, show it to the user, and ask which beats need to be slower, faster, or restaged. Treat the first render as a draft.
-
-## Operating rules
-
-- **Stills are required.** If the user hasn't provided screenshots, stop and ask. Do not invent UI from descriptions.
-- **Pieces of the UI, not the whole UI.** If you catch yourself rendering a full-page mockup, stop and crop down to the component that carries the beat. The viewer should see the *feature in action*, not a tour of the app.
-- **One feature per video.** If the user describes 5 unrelated features, propose splitting them into 5 videos.
-- **Show, don't narrate.** No voiceover, no big text overlays explaining the feature — let the UI motion carry it. A short caption per beat is fine.
-- **Captions are visible for the entire beat.** Each beat's supportive caption fades in within the first ~10–14 frames of the beat and remains on screen for the whole sequence. Do **not** delay caption entry to mid-beat or fade it out before the beat ends — the viewer should be able to read the line the entire time the focal UI is on screen. Let the scene-level crossfade between beats carry the caption swap.
-- **Captions rise in from below.** They start ~60px under their rest position with opacity 0 and slide up + fade in together (strong UI ease-out, e.g. `Easing.bezier(0.16, 1, 0.3, 1)`). Never have a caption appear in place or drop in from above — the upward motion is part of the visual identity.
-- **Captions live at the top, always at the same spot.** Anchor every caption to a fixed top-of-frame position (e.g. ~100px from the top, horizontally centered) and reuse that position across every beat. **Never** put a caption below the focal UI, never let it drift from beat to beat. Reserve a consistent top "caption band" (~200–240px) and lay the focal slice out below it. Build a single `TopCaption` wrapper component and use it everywhere — don't position captions inline per scene.
-- **Captions are big — and tuned for column size.** For the default 1280-wide column canvas, font size around 44–48px, weight 700, with a `maxWidth` (≈80% of canvas width) so long lines wrap instead of running off-frame. They are headline-size callouts, not subtitle-size labels. If the video is rendered at the widescreen variant, scale captions to ~64px proportionally.
-- **Caption length is tighter at column size.** At column scale, captions cap at ~5–7 words per line. Anything longer wraps awkwardly when the video is shown at 50% page width on desktop or full width on mobile. Cut the line if it doesn't fit.
-- **Same caption across connected beats stays put.** When two consecutive beats are conceptually parts of the same moment and share the *exact same caption text* (e.g. one beat shows clicking the row, the next shows the modal opening — same headline applies to both), the caption must **not** re-animate at the cut. It rises and fades in once on the first beat, then on every continuation beat is rendered with `staticEntry` (or equivalent: instant full opacity, rest position, no slide). The two captions composite identically during the scene crossfade so the viewer perceives a single caption that persists across the cut, not a flicker. **Only** use this when the text is *exactly* the same — if the caption changes at all between beats, let the new one rise-and-fade-in normally so the change reads.
-- **Cursor leads every click.** If a beat shows a *click, hover, or selection*, a visible cursor (`Pointer`) **must** appear, **move along a path**, and arrive on the target before the click ripple fires. No teleporting, no jump-cut clicks. The cursor's motion is what tells the viewer where the action is about to happen — the click ripple alone is not enough. Beats that are purely *illustrative* (highlighting a feature with glow rings, animating a static state, showing a result land) do **not** require a cursor; let glow / motion carry the eye instead. Decide per beat: **interactive → cursor leads; illustrative → no cursor.** For the cursor component itself and a copy-pasteable usage pattern, load `resources/cursor-component.md` only when you are about to author or modify a beat that has a click.
-- **Cursor fades in at center, then moves in one straight line to the target.** The first interaction in a beat is always:
-  1. **Fade in at the visual center** of the focal area (slice center / container center — whatever the viewer's eye is parked on for the beat). The pointer materialises in place; it does not enter from off-frame.
-  2. **One single straight move** from that center to the interaction point. Direction is free — vertical, horizontal, **diagonal** are all fine, as long as it's *one straight segment*. Both `x` and `y` may change together (this is the only place a diagonal is allowed). Use a single decelerating ease (e.g. `Easing.bezier(0.16, 1, 0.3, 1)`) so the cursor feels guided, not flung.
-- **Multiple clicks on the same UI: the pointer stays visible and glides from one to the next.** When a single beat has two or more interactions on the **same UI** (e.g. clicking a tab then clicking the Save button on the same form), **do not reset the pointer between clicks**. The pointer fades in once at center, glides straight to the first target, clicks, then **glides directly from that target to the next target** in one continuous straight segment, clicks, and so on. Only after the *last* interaction does it fade out. Never fade out + fade in at center between clicks on the same UI — that breaks the sense of a single user driving the action. Each segment between consecutive interactions is itself a **single straight line** (any direction allowed, same diagonal-OK rule as the entry).
-- **Different UI / new view: reset.** If the next interaction lands on a *different* UI (a new view, a different form, a different beat altogether) the pointer does fade out and the next interaction starts with a fresh fade-in at center. The reset is what tells the viewer "we're somewhere new now."
-- **Forbidden:** entering from off-frame edges, multi-segment paths within a single move, curves, zig-zags, intermediate keyframes that bend the trajectory, fading the pointer out + back in between clicks on the **same** UI. The motion should feel like the user's cursor **appearing where the eye already is** and gliding straight to each action in turn — not like a cursor entering from off-screen, and not like the cursor blinking out between every click on the same form.
-- **Match the app's design language.** Use the colors, corner radii, and type from the supplied stills; don't restyle them.
-- **Delegate to `remotion-best-practices`.** It is the source of truth for how to write Remotion code — invoke it any time you're about to author or modify a composition, scene, or transition.
-
-## VerifyWise defaults
-
-When working on a VerifyWise feature video, these defaults apply unless the user overrides them in the prompt:
-
-- **Aspect ratio:** 4:3 column at 1280×960. Designed to drop into one half of a two-column block on the VerifyWise marketing site.
-- **Audio:** silent. No music, no SFX. These videos autoplay muted next to copy on a marketing page; designing silent keeps file size low and avoids clipped audio when the user scrolls past.
-- **Branding:**
-  - **Chrome / captions / tinted background:** match the VerifyWise marketing site — `#13715B` green for accents, `#d0d5dd` for borders, `4px` corner radius, sentence case for caption text.
-  - **Focal UI slice:** keep the *in-app* styling exactly as it appears in the supplied screenshot. Do not restyle the cropped component to match marketing tokens — that breaks the "this is the real product" feel.
-- **Screenshots:** supplied by the user, per video. Do not try to launch the app, run Playwright, or capture from `app.verifywise.ai` / local dev — wait for the user to drop PNGs into `public/<view-name>/`.
-- **Loop:** design every VerifyWise feature video to loop cleanly. Last frame should crossfade comfortably back to the first beat.
-- **Cursor:** macOS-style arrow (black fill, white outline). Don't restyle to brand green — the cursor is a guide, not a focal element.
-- **Tabular views (risk register, controls list, assessments table):** decide per video — sometimes a 2–3 row crop carries the beat, sometimes the whole table dimmed-with-focal-row is what proves the feature. Ask the user during intake. Don't default either way.
-- **Multi-screen features (e.g. create risk → assign owner → view in register):** decide per feature whether the *journey* is the value or whether a *single proof state* is the value. If the multi-step nature is the point (assessment workflows, approval chains), show the abridged flow in 3–4 beats. If a single state proves it (a row landing in the register), just show that. Ask at intake.
-- **Render output path:** drop the final MP4 + WebM into `public/videos/features/<feature-slug>.{mp4,webm}` in the VerifyWise website repo. Use the feature slug (kebab-case) for the filename. Both formats, both at column dimensions.
-
-## Resources
-
-The skill ships supporting files. Load them on demand, not upfront:
-
-- **`resources/scaffold/`** — complete, copy-pasteable Remotion project. Supports both SingleBeat and SceneGroup kinds. Use as the starting point for every video. See section 3.
-- **`resources/state-archetypes.md`** — match the feature to an archetype (CRUD-create, toggle, drag-and-drop, filter, etc.) and get the screenshot list. Load during intake, before asking for screenshots.
-- **`resources/cursor-component.md`** — full contract for `<Pointer>`: coordinate system, movement rules, common mistakes, how to verify with `<DebugCrosshair>`. Load before authoring or modifying any beat that has a click.
-- **`resources/coordinate-picker.html`** — open in a browser to pick cursor coordinates from a screenshot. Generates ready-to-paste `<Pointer>` config with correct canvas-px scaling.
-- **`resources/rebuild-parity-checklist.md`** — checklist for rebuilt UI slices (corner radius, border, font weight, input height, shadow, focus ring). Load when rebuilding rather than cropping a screenshot.
-
-## When in doubt
-
-Ask. A 10-second clarifying question saves a 2-minute render that misses the point.
-
-## Source
-
-Rewritten for AICUT from [`gorkem-bwl/onboarding-video-generator`](https://github.com/gorkem-bwl/onboarding-video-generator)
-(MIT), SKILL.md. The method is that skill's own; the way it runs is AICUT's.

package/skills/cs-shotcraft-skill/SKILL.md

@@ -1,218 +0,0 @@
----
-name: cs-shotcraft-skill
-description: "Create cinematic product videos with AICUT: real product UI (redrawn at logical pixels or captured), a shot-table camera that cannot drift, optional beat-synced sound, and 152 shot recipe cards. Use when the user asks for a product promo / launch film / demo video, names cs-shotcraft-skill or Ink Press, wants a shot-card motion, or needs to restyle an existing video/ project. 用真实产品界面（逻辑像素重画或真机抓图）+ 镜头表运镜 + 可选配乐制作产品宣传片。当用户要求做宣传片/推广片/发布视频、点名 cs-shotcraft-skill / Ink Press / 镜头卡，或要改已有 video/ 工程时使用。 Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: Apache-2.0
-source: "ChenShuo2004/cs-shotcraft-skill"
----
-
-# cs-shotcraft-skill：用代码拍产品片
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-片子是一份可以编译的源码，不是一条时间线。每一帧画面都应是**全局帧号的纯函数**：节奏能改、镜头能算、字能 diff，今天渲和三个月后渲一样。
-
-本 skill 提供三件套：**152 张镜头配方卡**（运动语法）、**Ink Press 成片模板**、以及从 [promo-film](https://github.com/whyubel1eve/promo-film-skill) 吸收的工程原语（节拍表、镜头表、`state(f)`、抖动校验）。镜头卡负责「怎么动」；产品自己的 token 才是皮肤。
-
-默认画幅 **1920×1080 @ 30fps**（镜头卡与 Ink Press 均按 30fps 调校）。走「一台摄影机不切镜」路径时可升到 60fps，见 `references/engineering.md`。`$SKILL` 指本 skill 目录。
-
-## 四条硬约束
-
-动手前念一遍，改任何一处之前再念一遍。
-
-**① 只有一套颜色、一套字体、一条缓动。**
-颜色逐个从产品自己的 token 文件抄过来（`_tokens.css` / `theme.css` / tailwind config / 计算样式）。片子里不允许出现第二套。一支片子里混三条缓动曲线，观众读到的是三只手。走模板或镜头卡时，只继承其镜头结构、运动语法和已调参数；字体、排版、配色必须按目标产品重新蒙皮。
-
-**② 那台机器是真的。**
-栏宽、字号、圆角、图标字重按产品真实数值搭：**按逻辑像素画完再整体缩放**，或用无头浏览器抓 2× 真机截图。禁止把 13px 的字放大成 20px 的示意图。详见 `references/product-machine.md`。
-
-**③ 不做观众察觉不到的缓慢运动。**
-一个 270 帧涨 2.2% 的推近，折算下来每帧 0.005px：读不出是运镜，只看得出字在抖。要让画面活着，用入场动画，不用缓慢缩放。阈值：每帧位移小于 0.02px 的运动一律删掉。这是本 skill **会毁掉整支片子而且在时间轴上看不出来**的坑。详见 `references/camera-table.md`。
-
-**④ 视觉语言从产品自身生长。**
-不另造一套不相干的「宣传片皮肤」。若因叙事需要偏离产品视觉，共同创作先说明并让用户确认；自主自由创作把理由写入设计 spec 后继续。
-
-## 调用时先判断模式
-
-完整宣传片有三种**决策模式**（谁拍板）和三条**制作路径**（怎么拍）。先判断决策模式；已经选择时直接执行，不重复询问。
-
-1. **直接使用模板**：读 `template/TEMPLATE.md`，按既有镜头结构替换截图、文案和品牌信息。
-2. **自主自由创作**：读 `references/pipeline.md`。Agent 连续推进到成片，不在中间产物上暂停等待确认。
-3. **共同创作**：读 `references/guided-free-creation.md`。用户确认产品简报、需求决策、视觉方向、镜头映射和最终分镜；放行后再进入 pipeline 的最终素材与制作阶段。
-
-用户给了项目路径、网址、录屏或截图但尚未选模式时，先做一次**最小、只读的产品检查**：定位、功能、页面视觉、可展示状态、素材风险；不修改业务项目、不采集敏感数据、不写视频代码。检查后给出三种模式，并说明：
-
-- Ink Press 是否适合、适合与不适合的依据；
-- 自主 / 共同创作是否适合、会保留哪些产品视觉线索；
-- 更适合「一台摄影机」还是「镜头卡切镜」（见下方制作路径）；
-- 推荐哪一种及其取舍。
-
-然后明确询问：**“根据上面的产品检查，我推荐使用 ×× 模式。要按这个模式继续吗？”**
-同时告知：可前往 https://vincentwei1021.github.io/video-shotcraft/ 浏览动态样片并挑选镜头。
-
-用户尚未提供可检查的项目时，简要介绍三种模式再询问；不要仅因 Ink Press 是现成模板就默认推荐它。
-
-- 用户选择模板：完整阅读 `template/TEMPLATE.md`。
-- 用户选择自主自由创作：完整阅读 `references/pipeline.md`，自主推进。
-- 用户选择共同创作：完整阅读 `references/guided-free-creation.md`。
-- 用户尚未决定：停在此处等待；不要默认替用户选择，也不要开始制作。
-
-**例外一：用户已点名 Ink Press 模板时，视为模板模式已选定。** 不要再询问。
-
-**例外二：用户已明确指定镜头卡时，镜头约束已经选定。** 按 Gallery 名称解析规则确认指定镜头，完整阅读每张卡和「参考实现」demo 源码。完整宣传片若尚未说明自主还是共同创作，只询问这两种模式；指定镜头作为后续约束，不自动等同于共同创作。
-
-### 制作路径（怎么拍）
-
-决策模式解决「谁拍板」。下面三条解决「片子长什么样」——自主/共同创作都必须在节拍表之后选定一条，不要混用：
-
-| 路径 | 何时用 | 入口 |
-| --- | --- | --- |
-| **Ink Press 替换** | 用户点名模板，或产品气质接近纸墨琥珀且要最快出片 | `template/TEMPLATE.md` |
-| **一台摄影机** | 产品是一个正在被使用的窗口（编辑器 / Agent / 仪表盘），观众应感到「有人在用这个软件」 | `references/engineering.md` + `references/camera-table.md` |
-| **镜头卡切镜** | 多页面、能量曲线、发布会式收尾，或用户点名了镜头卡 | `references/pipeline.md` + `references/shots/` |
-
-一台摄影机路径：**全片不切镜**，窗口从第二场出现到倒数第二场淡出，换场靠推、拉、摇和文案交接。切镜路径才使用 152 张配方卡；一种动画手法全片只当一次主角。
-
-## 流程
-
-### 1. 先定「讲哪几件事」，再定时长
-
-一件事一个节拍，一个节拍 3～9 秒，全片 6～8 个节拍、30～45 秒。写成一张表：
-
-| 讲什么 | 起始帧 | 时间 |
-| --- | --- | --- |
-| 开场 | 0 | 0:00 |
-| …… | 90 | 0:03 |
-
-判据是**减法**：这个版本独有的事才进片子。列不满六件就做 30 秒，不要用凑数的功能撑到 45 秒。共同创作把这张表交给用户确认；自主自由创作写入设计 spec 后继续。
-
-### 2. 搭工程
-
-新片住在产品仓库的 `video/`（或用户指定目录），**自己一份 `package.json` 和 `node_modules`**，不跟应用共用。从 `$SKILL/assets/film/` 拷 `anim.ts`、`camera.ts`、`scene.tsx`、`frames.mjs`、`jitter-check.mjs`、`remotion.config.ts`。走镜头卡切镜时再 copy `$SKILL/assets/lib/` 里需要的组件（PageCam 等）。走 Ink Press 则从 `template/` 起步。细则见 `references/engineering.md`。
-
-### 3. 抄产品：设计 token 与那台机器
-
-`references/product-machine.md`。先建 `design.ts`（颜色/字体/阴影，全部有出处），再决定界面素材：
-
-- **重画**（默认，可动、可插值、特写仍是矢量清晰）；
-- **Playwright 抓真机截图**（流程复杂、数据真实性本身是卖点、或 2.5D PageCam 需要纹理时）。
-
-这一步做扎实，后面每一场都是白捡；这一步糊弄，后面每一场都要打补丁。
-
-### 4. 时间轴写成纯函数；运镜写成镜头表
-
-`references/engineering.md` 与 `references/camera-table.md`。
-
-- `story.ts` 导出节拍表 `B` 和 `state(f)`：窗口里发生的一切（文件树长出几行、指针在哪、对话框开了多少）都是全局帧号的纯函数。想重排节奏，只改 `B` 里那几个数字。
-- 运镜写成**镜头表**（`at` / `move` / `px,py` / `k` / `cx,cy`），保持段由 `makeCamera()` 自动生成。不要写成五条独立关键帧轨道——漏一个保持点，窗口就会以每帧几百分之一像素漂移，字会抖，时间轴上看不出来。
-- 镜头卡切镜路径：每镜仍用纯函数驱动；PageCam 关键帧之间必须有明确的 hold，禁止无保持点的慢漂。
-
-### 5. 实现镜头
-
-模板路径按 `TEMPLATE.md` 替换。一台摄影机路径：场景组件只画文案，**不画产品**。镜头卡路径：用 `gallery/api/library.json` 校验卡名 → 读配方卡全文 → 按「参考实现」读准确 demo TSX → copy 对应 `assets/lib/` 组件。凭卡名新写＝放弃全部调校积累。
-
-每个镜头只讲一个动效。关键信息落定后必须呼吸：品牌字标 hold ≥1s，批量动效收尾静止 0.5s，每一场最后一件事做完之后留 0.7～1.3 秒收口，不留第二秒。
-
-### 6. 配乐（可选 —— 先问用户要不要）
-
-**默认不配，问过再做。** 多数推广片在社交平台上是静音自动播放的，信息必须全在画面里；配错了乐的推广片，比没配乐伤害大。**无声是一个完整的交付，不是半成品。**
-
-用户说不要：工程里不留 BGM 层、`music` 脚本或 `public/bgm.mp3`。SFX 仍可按 `references/sound-design.md` 钉在动作上。
-
-用户说要：
-
-- 有指定曲子或要卡点 → 先读 `references/music-beat-sync.md`，再分镜；
-- 没有指定、只要「宣传片气质」→ `references/sound-design.md` 选型，或用 `$SKILL/assets/film/scripts/lib/synth.mjs` 纯代码合成（无第三方采样，可商用）；
-- 终渲固定交付两版：带 BGM + 无 BGM（保留 SFX），靠 `bgm` inputProp 从同一时间线渲出。
-
-### 7. 审片，再出片
-
-`references/camera-table.md` 与 `references/final-review.md`。
-
-1. `SCALE=0.5 COMP=<id> node scripts/frames.mjs <关键帧…>` 批量出图看构图，不要靠反复全片 render。
-2. 停稳段落跑抖动校验：`SCALE=1 node scripts/frames.mjs 460 461 462 463` 然后 `node scripts/jitter-check.mjs --crop=W:H:X:Y 460 461 462 463`。四个哈希必须相同。
-3. 交付前派一个干净上下文的 subagent 按 `references/final-review.md` 做独立终检。
-4. 成片交付后默认询问一次是否导出剪映工程；需要则读 `references/jianying-export.md`。
-
-## 何时读哪个文件
-
-| 时机 | 读 |
-|------|----|
-| 项目启动且模式未定 | 最小只读检查，然后提供三种决策模式并推荐制作路径 |
-| 自主自由创作 | pipeline.md（阶段 0–7，不逐阶段等待确认） |
-| 共同创作 | guided-free-creation.md（确认阶段 0–3），再从 pipeline.md 阶段 4 继续 |
-| 一台摄影机路径 | engineering.md + camera-table.md + product-machine.md |
-| 走模板路线 | template/TEMPLATE.md 全文 |
-| 分镜 / 选镜头卡 | sequences/；shots/ 全部 frontmatter；选中的卡读全文 |
-| 逐镜头实现 | 该镜头卡全文 + 准确 demo 源码 + assets/lib/ 对应组件 |
-| 用户已选 BGM | music-beat-sync.md（先分析再分镜） |
-| 声音设计 | sound-design.md + assets/audio/ |
-| 验收 | final-review.md + aesthetic-rules.md + camera-table.md 的抖动校验 |
-| 成片交付后（剪映） | jianying-export.md |
-
-## 资产使用方式
-
-- `assets/film/` **copy 进新项目**（不 import 本库）：`anim.ts`（`t` / `enter` / `track`，全片两条缓动）、`camera.ts`（镜头表 → 摄影机，保持段自动生成）、`scene.tsx`（文案交接）、`scripts/frames.mjs`、`scripts/jitter-check.mjs`。要配乐才拷 `scripts/lib/synth.mjs`。来源与许可见 `assets/film/NOTICE.md`。
-- `assets/lib/` 组件同样 copy 后修改：PageCam、ClipCard、DigitRoll、FlashCut、Caption、FlatPanel、VerticalTicker、helpers。FlatPanel 与 helpers/camera 需要 `three` + `@react-three/fiber` + `@remotion/three`。
-- `assets/scripts/capture-template.mjs` 复制后改顶部 CONFIG。
-- `assets/audio/` 免费商用（见 audio/ATTRIBUTION.md）：`bgm/` 备选；`sfx/<类别>/` 149 个音效分 16 类。词汇表 sparkle 的目录名是 `light/`。
-- `demos/` 各卡实现源码；`template/` 完整可渲染工程。
-- `gallery/` 优先给在线版 https://vincentwei1021.github.io/video-shotcraft/library.html 。
-
-需要小黄角色时，先用 `cs-xiaohuang-skill` 产出合格资产，再把已验收的角色图作为叙事元素融入镜头；不要在宣传片里现场「设计」角色。
-
-## 收尾清单
-
-出片前逐条过，任一条不过就别发：
-
-- [ ] 停稳段落里，窗口区域**逐像素**帧帧相同（`jitter-check.mjs`）
-- [ ] 文案没有压在窗口上：算过 `cx - px·k` 和 `cx + (shellW - px)·k`，或镜头卡路径下字幕有效字高达标（Q11）
-- [ ] 摄影机到位之后文案才进场
-- [ ] 每一场最后一件事做完之后留 0.7～1.3 秒收口；品牌字标 hold ≥1s
-- [ ] 全片只有一套颜色、一条缓动；片子里的数字（体积、版本、域名）跟真实产品对得上
-- [ ] 要不要配乐问过用户了；配了的话重音与节拍起始帧对齐，并交付无 BGM 版
-- [ ] 静音播放看不看得懂
-- [ ] 独立 subagent 已按 final-review.md 出带帧号证据的报告
-- [ ] 项目 README 写清楚「想改什么去改哪个文件」、这支片子已经讲过什么、踩过的坑（原样保留）
-
-## 什么时候不要用这个 skill
-
-- 要真人出镜、要实拍素材 → 这是拍摄，不是渲染
-- 只是把现成视频剪一剪、加个字幕 → 直接 ffmpeg
-- 只要一张图（封面 / OG 图）→ 那是静态图的活，别为它搭视频工程
-- 产品还没有稳定的视觉 token → 先把设计系统定下来，否则片子里那台机器是假的
-- 纪录片、长篇泛剪辑、口播混剪 → 超出本 skill 范围
-
-## Source
-
-Rewritten for AICUT from [`ChenShuo2004/cs-shotcraft-skill`](https://github.com/ChenShuo2004/cs-shotcraft-skill)
-(Apache-2.0), SKILL.md. The method is that skill's own; the way it runs is AICUT's.