@autoaiai/aicut 0.0.0-stage → 0.1.7

package/skills/aicut/references/recipes.md

@@ -0,0 +1,184 @@
+# Recipes
+
+Copy these, then change the words. Each is a whole file (or a whole `<section>`) and follows the rules in
+[film-format.md](film-format.md).
+
+## A title card, editable in Studio
+
+A page with no `width`/`height` is the whole stage. Text lives in DOM elements, so the person can select it in Studio
+and retype it — a headline painted into a canvas cannot be edited that way.
+
+```html
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  .card { position: absolute; inset: 0; display: grid; place-content: center; gap: 28px;
+          font-family: system-ui, "Noto Sans SC", sans-serif; color: #fff; text-align: center; }
+  h1 { margin: 0; font-size: 132px; letter-spacing: -0.035em; line-height: 1; }
+  p  { margin: 0; font-size: 44px; letter-spacing: 0.01em; opacity: 0.72; }
+</style>
+</head>
+<body>
+<div class="card">
+  <h1>Aura Pods</h1>
+  <p>quiet, by design</p>
+</div>
+<script type="module">
+  const card = document.querySelector('.card');
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const ease = (x) => 1 - Math.pow(1 - clamp01(x), 3);
+  window.film = {
+    duration: 4,
+    ready: document.fonts.ready,
+    frame(t) {
+      const inn = ease(t / 0.9);                 // 0 → 1 over the first 0.9 s
+      const out = 1 - ease((t - 3.2) / 0.6);     // 1 → 0 over the last 0.8 s
+      card.style.opacity = String(Math.min(inn, out));
+      card.style.transform = `translateY(${(1 - inn) * 28}px)`;
+    },
+  };
+</script>
+</body>
+</html>
+```
+
+In `film.html`, a page without a `duration` needs `#t=0,length`; this one has `duration: 4`, so `#t=0,4` also works
+and says the same thing:
+
+```html
+<section>
+  <iframe src="title.html" at="0" style="left: 0; top: 0; width: 1920px; height: 1080px"></iframe>
+</section>
+```
+
+## A canvas shot, driven by t
+
+Canvas is for what DOM cannot draw. Repaint the whole frame every call and let `t` decide everything — no
+`Math.random()`, no `x += v`, no loop.
+
+```html
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>html, body { margin: 0; height: 100%; background: #0b0b0f; }
+       canvas { display: block; width: 100%; height: 100%; }</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<script type="module">
+  const c = document.querySelector('#c');
+  const g = c.getContext('2d', { alpha: false });
+  const fit = () => {
+    const dpr = devicePixelRatio || 1;
+    c.width = Math.round(innerWidth * dpr);
+    c.height = Math.round(innerHeight * dpr);
+  };
+  fit();
+  addEventListener('resize', fit);
+  const ease = (x) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 3);
+
+  window.film = {
+    duration: 5,
+    frame(t) {
+      const k = ease(t / 1.1);
+      g.setTransform(1, 0, 0, 1, 0, 0);
+      g.fillStyle = '#0b0b0f';
+      g.fillRect(0, 0, c.width, c.height);
+
+      // a ring that draws itself, then breathes — all from t
+      const r = Math.min(c.width, c.height) * (0.12 + 0.03 * Math.sin(t * 1.6));
+      g.strokeStyle = 'rgba(127, 212, 255, 0.9)';
+      g.lineWidth = Math.max(2, c.width * 0.004);
+      g.beginPath();
+      g.arc(c.width / 2, c.height / 2, r, -Math.PI / 2, -Math.PI / 2 + k * Math.PI * 2);
+      g.stroke();
+    },
+  };
+</script>
+</body>
+</html>
+```
+
+## Picture-in-picture, voice-over, a hit, and subtitles
+
+The first track is on top: the title covers the footage while it is opaque, and the footage covers nothing. The
+voice-over and the music sit in the last track, on film seconds. This one runs 7.5 s: the title for 4, the reel from
+1.5 to 7.5, the music to the end — no clip outlasts the film and nothing is black.
+
+```html
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920, height=1080">
+<style>
+  .round { border-radius: 24px; object-fit: cover; }
+</style>
+</head>
+<body>
+<section>
+  <iframe src="scenes/title.html" at="0" style="left: 0; top: 0; width: 1920px; height: 1080px"></iframe>
+</section>
+<section>
+  <video id="reel" src="assets/reel.mp4#t=4,10" at="1.5" volume="0.8" class="round"
+         style="left: 120px; top: 120px; width: 760px; height: 428px"></video>
+</section>
+<section>
+  <audio id="vo1"  src="assets/vo/1.wav#t=0,6" at="1.5"></audio>
+  <audio id="bed"  src="assets/bed.mp3#t=0,7.5" volume="0.28"></audio>
+  <audio id="hit"  src="assets/sfx/hit.wav" at="1.5" volume="0.8"></audio>
+</section>
+</body>
+</html>
+```
+
+- `assets/vo/1.wav` is a 6-second read; `at="1.5"` puts its first word at film second 1.5, where the reel lands.
+- The hit is heard as the reel appears. If it belonged inside a page playing at local time `t = 0.4`, its film second
+  would be `1.5 + 0.4 − 0 = 1.9`.
+- `speed="0.5"` on the reel would halve its pace and double its length: `(10 − 4) / 0.5 = 12` seconds, so it would run
+  to 13.5 — the music would have to run that long too. Change one, check the other.
+
+Words, in the file's own seconds, beside the sound (`assets/vo/1.vtt`):
+
+```vtt
+WEBVTT
+
+00:00:00.200 --> 00:00:02.400
+A pod that disappears in your ear.
+
+00:00:02.400 --> 00:00:05.200
+<00:00:02.400>And <00:00:02.650>nothing <00:00:02.900>else.
+```
+
+Studio makes the film's subtitles from those cues. Do not draw them in a page.
+
+## A music bed that fades under the voice
+
+`fade` is the clip's own override entry — no `at`, so no selector:
+
+```html
+<section>
+  <audio id="bed" src="assets/bed.mp3#t=8,48" at="0" volume="0.3"
+         overrides='[{"fade":[1.5,2]}]'></audio>
+</section>
+```
+
+`1.5` in and `2` out, seconds, ramping the gain (and the picture's opacity, for a clip that has one). Together they
+may not be longer than the clip.
+
+## The order to work in
+
+```sh
+npx -y @autoaiai/aicut@latest open my-film          # prints Studio's address — open it
+# write film.html, title.html, scenes/…
+npx -y @autoaiai/aicut@latest look                  # the whole film, one sheet
+npx -y @autoaiai/aicut@latest look 1.4-2.2          # the beat where the reel lands
+npx -y @autoaiai/aicut@latest look assets/vo/1.wav  # what the voice-over sounds like, and how loud
+```
+
+Read the sheet: is the headline inside the frame, does the reel sit where you meant, is any stretch black that
+should not be, is the loudness roughly level? Fix, then look again.

package/skills/aicut/references/troubleshooting.md

@@ -0,0 +1,57 @@
+# When it does not work
+
+Look first, guess second: `npx -y @autoaiai/aicut@latest look <page.html>` and `look <file>` draw what the host actually sees,
+and a page's uncaught errors are reported there.
+
+## The frame is black, or the page is blank
+
+| What you see | What it usually is | Do |
+| --- | --- | --- |
+| Nothing at all, no error | `window.film` never set | Set it from a `<script type="module">`, before `load`. A syntax error in the module does this silently. |
+| Half the picture | `frame` throws on some `t` | Draw without try/catch once; the host reports the throw with its line. |
+| Black from a WebGL page | The buffer was cleared before capture | Create the context with `preserveDrawingBuffer: true`. |
+| Text invisible | A web font that never arrived | `ready: document.fonts.load('700 64px Inter')` per face, not just `document.fonts.ready`. |
+| Black where a clip should be | The clip runs past its file | A still or a page without `duration` needs `#t=0,length`; a video's `#t=in,out` must be inside its own length. |
+| A track shows nothing | The track is `hidden` | Only the person changes that. Say so rather than editing it. |
+
+## The picture changes on its own
+
+The same `t` must draw the same picture — `look` checks it. Causes, in the order they bite:
+
+- `Math.random()`, `Date.now()`, `performance.now()` used as a clock (the host pins them, but only while drawing).
+- Accumulation across calls (`x += v`, a particle array mutated per frame). Compute from `t`, or precompute in
+  `ready` and look it up.
+- A CSS animation, transition or WAAPI animation left running: its progress is history.
+- GSAP `to`/`from` (they record start values the first time they run): use `fromTo` with explicit ends.
+- A `<video>` seeked without awaiting `seeked`, so the captured frame is the previous one.
+- A library's own clock: drive it — `timeline.seek(t)`, `animation.currentTime = t * 1000`, `p5.redraw()`.
+
+## Sound and subtitles are off
+
+- **A hit lands early or late.** A page has no sound: the sound is a clip in `film.html`. A hit heard at page time
+  `t` goes at `at + t − in` film seconds. `speed` changes the length, not the start.
+- **A clip is silent.** `volume="0"`, `muted`, or its track is `muted`/`hidden`. The film's sound is its sound clips
+  plus its video clips' own sound.
+- **Subtitles do not appear.** The `.vtt` must sit beside the media with the same name (`assets/vo/1.wav` →
+  `assets/vo/1.vtt`), in the file's own seconds, one cue per line. `1.<language>.vtt` is a translation of it.
+- **Subtitles drift after a trim.** They follow the clip's `#t=in,out` and `speed`; do not retime the `.vtt` yourself.
+- **Subtitles are drawn twice.** A page is drawing them. Remove that: Studio draws the film's subtitles.
+
+## Commands
+
+- **Exit 2, "not a project".** Run the command inside the film's folder, or name it: `open <folder>`. `look` and
+  `render` work on the project around the current folder.
+- **Exit 1 from `render`.** The output says why. Usually no usable `ffmpeg` on `PATH` (install one, or use the
+  desktop app, which brings its own), or the film is enormous — lower `--workers`, or render a range to find it.
+- **The first run hangs.** It is downloading a headless Chromium (about 100 MB). Behind a proxy, set `HTTPS_PROXY`
+  for that download, or use the desktop app.
+- **An old version keeps answering.** `npx` remembers the first version it fetched for a name: always run
+  `npx -y @autoaiai/aicut@latest`, and `--version` to see which one answered.
+- **Studio does not open.** `open` prints the address even when no browser opened by itself; open it by hand.
+  `AICUT_NO_BROWSER=1` stops it from ever opening one.
+
+## Editing a film someone else is editing
+
+Studio writes `film.html` while the person works. Read it immediately before each change, write back only the part
+you mean to change, keep every `overrides` exactly as it is, and never rewrite the whole file from memory — that
+reverts what they did in the meantime.

package/skills/aicut-motion/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AiCut contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/aicut-motion/SKILL.md

@@ -0,0 +1,255 @@
+---
+name: aicut-motion
+description: 'Design motion films that look authored rather than generated — brand films, showreels, kinetic typography, explainers, data stories, product and UI promos, character stories, music videos, abstract loops, title sequences. Use when a film needs art direction — a style, a palette and type system, real transformations, a plan laid out on beats, and a critique of its own frames. Works on AICUT films (film.html and pages with window.film).'
+license: MIT
+---
+
+# Motion films with a direction
+
+AICUT already knows how to make a film — `film.html` cutting pages, footage, pictures and sound. This is about
+making one that looks designed: the same prompt, given to a strong model and to a weaker one, should give films that
+look, move and sound almost the same.
+
+The gap is rarely taste. It is behaviour:
+
+- honour every value in a long prompt;
+- turn vague words into concrete design decisions;
+- design every element properly instead of settling for a placeholder;
+- plan the whole timeline before writing a frame;
+- build one shared system, so everything stays consistent;
+- look at the output and fix it.
+
+Read `npx -y @autoaiai/aicut@latest` once before the first film: it is the format and the tools, and it is authoritative. This
+skill is how to decide what to draw.
+
+## Priority order
+
+When rules compete, keep this order:
+
+1. **The prompt's own words**: every value, beat, copy line and ban.
+2. **Look and craft at the style's level**: composition, palette, type, and every element designed properly.
+3. **Continuity**: real transformations, persistent identity, plausible physics.
+4. **Rhythm and sound.**
+5. **Bookkeeping**: ledgers, tables, checks. They serve 1–4 and never replace them.
+
+**Helpers are mechanics, not style.** A page's easing function decides how something moves; it never decides what it
+looks like. Never ship a plain box or a default figure as the design, and never carry one film's palette into
+another. Every film gets its own designed look.
+
+## When a request comes in
+
+- Any request for a motion piece runs the pipeline. Ask nothing: resolve gaps in stage 1 and say so in 解读.
+- **Each new prompt is a new film**, built in a new folder, even in a conversation that already made one. Reuse
+  earlier work only when the person says to change it (修改, 改一下, 在上一版基础上, fix this).
+- **Modes.** The default builds. 只要提示词 / 扩写 / "prompt only" stops after stage 2 and prints the brief.
+- If the message has no idea in it, reply only: “请给我一句话的创意或一段完整的提示词。”
+
+## Stage 0 — read the prompt like a director
+
+Three ledgers, before any file is written.
+
+- **Spec ledger** `S01…` — one row per value or instruction, quoted exactly: durations, sizes, colours, fonts,
+  weights, copy, counts, angles, positions, timings, easing, bans, the loop or ending, characters, every storyboard
+  beat. The film's `viewport` and its length come from these rows; a placeholder value from a template must never
+  survive. A truncated prompt is completed in the voice and density of its last full section, those rows marked
+  `S##*`.
+- **Transformation ledger** `X01…` — every becoming verb (becomes, turns into, gathers, dissolves, unfolds, grows
+  into, 变成, 化成, 收拢, 汇聚, 展开) as `source → target · mechanism · start–end s · what is conserved`.
+- **Element ledger** `E01…` — every thing drawn or typed, with its playbook (type, object, character, environment,
+  data, UI, transition, texture-light, sound), listing three or more structural features, size and coordinates, how
+  it moves, and — for characters — the design sheet and named poses.
+
+Each scene also gets its back-to-front layer list.
+
+Every value is binding: never round, rename, recolour, re-time or drop one. The last third of a long prompt counts as
+much as the first. If two rows conflict, keep the more specific one and say so in 解读.
+
+In the files: constants live at the top of the page that uses them, tagged `// S07`; each builder is tagged `// E03`;
+each beat inside `frame` is tagged `// S31 X02`.
+
+## Stage 1 — fill gaps the way a director does
+
+Only where the prompt is silent; never override a ledger row.
+
+| Gap | Default |
+| --- | --- |
+| Format | 1920 × 1080 (the film's `<meta name="viewport">`); a stated format is binding |
+| Duration | 15 s for an idea, 30 s for a showreel or brand film; state it as the last clip's end |
+| Ending | A seamless loop for reels and idents (the `t = D` frame equals frame 0, all motion at rest); a resolved final image or end card for stories and promos |
+| Rhythm | Calm 60–90 BPM, brand 110–128, energetic 128–140. Dense pieces have an event on every beat, calm ones on every bar. Holds ≤ 0.5 s when dense, as long as the copy needs when calm |
+| Narrative | One motif or carrier connects the film; each scene grows out of the one before; no unrelated title cards |
+| Camera | Locked and front-on unless the prompt implies movement |
+| Composition | From the style's occupancy and whitespace. Nothing at rest within 150 px of the sides, 90 px of the top and bottom |
+| Typography | One family with character; the payoff word or number in the heaviest weight at the largest size. Latin: Inter, Geist, Space Grotesk, Fraunces. Chinese: Noto Sans SC, Noto Serif SC |
+| Palette | 3–5 colours with roles; the accent foreshadows what comes next |
+| Texture and light | Material per element, scaled to its size; light from a motivated source |
+| Detail | Three recurring micro-details that make the film feel authored (labels, ticks, legends, timecodes, signage) — no new claims, numbers or copy |
+| Captions | On-screen speech, lyrics or subtitles: ≥ 40 px at 1080p, high contrast, lower third, whole line held for its reading window (≈ 0.25 s per Chinese character, ≈ 3 Latin words per second) |
+| Sound | A track that fits the mood, or ambience for an environment-led scene; silent only if asked |
+
+## Stage 2 — the design contract
+
+**Where the style comes from:**
+
+1. **The prompt states it** — palette, materials, type, references. The contract comes from the ledger alone.
+2. **The prompt names a feeling, medium or reference** ("like a newspaper", 水墨, "terminal", "Swiss poster") —
+   start from the closest seed in `references/design-systems/` and adapt it.
+3. **The prompt is a bare idea** — synthesise a contract with the method below. Seeds are starting points, not
+   defaults.
+
+**Synthesis method:**
+
+1. **Subject → world.** What material world does this subject live in: paper, ink, glass, metal, fabric, screens,
+   nature, a city, a lab. Pick one, plus at most one contrasting world to transform into.
+2. **Audience and mood → energy.** Calm or punchy, warm or precise, playful or serious. Sets tempo, easing,
+   overshoot, density.
+3. **Make it concrete.** Write values, not adjectives: palette hexes with roles; type family, weights, sizes,
+   tracking; how lines, fills and shapes are drawn; texture and light per element; occupancy and the edge rule;
+   easing per move type; which mechanism changes which scene; signature details; sound palette; bans.
+4. **Check against slop.** Every choice must be traceable to the subject or the prompt. Generic gradients, glows and
+   template layouts are exactly what the contract exists to replace.
+
+Seeds: `drafting-table` (process, tools, engineering) · `swiss-kinetic` (brands, launches, statements) ·
+`editorial-ink` (culture, craft, heritage, East Asian) · `data-instrument` (explainers, finance, science) ·
+`bold-poster` (music, sport, youth) · `riso-halftone` (indie, retro, playful) · `storybook-scene` (characters,
+stories, MVs).
+
+**Short prompts:** write the full brief first, at that density — a direction paragraph, the contract, the structure
+(tempo, named scenes, scene changes), characters if any, and a scene-by-scene storyboard with timestamps and
+numbers. That brief becomes the ledgers. In prompt-only mode, output it and stop.
+
+## Stage 3 — the timeline before the code
+
+1. One row per scene: `start–end s · name · what the viewer learns · carried element in → out · transition out (X##)`.
+2. Every event: `t · element (E##) · action · numbers · ids`.
+3. The key times as a `T` block.
+4. The sound cues, derived from the same events — this is where each `<audio>` clip goes in `film.html`.
+
+Checks before going on:
+
+- beats fall on multiples of `60 / BPM`;
+- each scene's exit state is the next scene's entry state (same element, same slot, same colour);
+- no two actions drive one property at once;
+- everything finishes before the end;
+- for a loop, the `t = D` frame equals frame 0 with all motion at rest.
+
+## Stage 4 — design before motion
+
+1. Build each element's geometry from its structural features, at module level, once.
+2. For characters, draw a **character sheet** first: one still with every character in every named pose, holding its
+   props.
+3. Fix the key compositions as exact pixel layouts: frame 0, the first full frame of each scene or material, the last
+   frame. Check each against the contract's occupancy and whitespace.
+4. Code those static states before the motion between them. A weak still is never rescued by motion. Look at them
+   with `look` before going on.
+
+## Element playbooks
+
+| Element | Build it | Move it | The usual failure |
+| --- | --- | --- | --- |
+| **Type** | One family; hierarchy by weight and size; tracking set per size; big words on one line, fitted to their stated width; split words keep their spaces; CJK may run vertical | Arrive on `EASE.out`; stagger 0.02–0.06 s; slot clips, slides on rails, scale reveals; readable hold before exit | Words run together, orphan lines, captions too small or low contrast, the payoff not the heaviest type |
+| **Object** | Three or more structural features of the real thing; one shade side for volume; consistent outline policy; built once as a function | Motion from its nature: paper bends at a fold, liquid ripples, metal turns on an axis, light switches | A symbol instead of the thing, floating parts, inconsistent scale between shots |
+| **Character** | A design sheet: silhouette, proportions, colours, face, marks, and named poses — never a stick figure unless asked | Interpolate between named poses, small readable acting beats; feet on the ground, hands on what they hold | The look drifting between shots, hands off held props, limbs through the head, feet off the ground |
+| **Environment** | Layers back to front: sky or wall, far, mid, ground, foreground. Motivated light sources and their light shapes. Weather across the frame in two depths | Ambient life that never stops (weather, lights, small loops); the camera stays still unless asked | A flat backdrop, weather passing through solid objects, missing light logic, edge-to-edge clutter |
+| **Data** | Axes and units first, values exact from the ledger, labels attached to marks, one chart per scene | Axes, then data, then annotation; counters roll with their mark; charts morph through shared slots | Wrong numbers, unlabelled axes, decoration over data, labels ignoring the prompt's wording |
+| **UI / product** | Real screens or faithful reconstructions: crisp rectangles, true proportions, real hierarchy | Cursor-driven or state-driven changes; zoom into the region that changes | Stretched screenshots, fake interface noise, unreadable small text |
+| **Transition** | A physical mechanism: morph, merge, mask or wipe, material change, unfold, match on a shared shape | Hard edges, planned on a beat, the source gone as the target forms | Crossfades, cuts the prompt didn't ask for, things popping in, identity lost across a material change |
+| **Texture and light** | Paper and grain as separate layers (`feTurbulence` + `feDisplacementMap`); halftone and hatching as `<pattern>`; light as shapes (cones, lit windows, reflections) | Seeded and stable, or boiling at a fixed step rate (`stepped`) | One texture on everything, decorative glow, flicker from unseeded noise |
+| **Sound** | A bed (music or ambience) plus one clip per visual hit, placed on the `T` block in `film.html` | Synced to the beats; a loop's tail folds into its start | Silence by omission, noise used as music, hits out of sync |
+
+## Rules that hold in every film
+
+1. **Becoming is real.** Every X row morphs the same object point by point — equal point counts, one path
+   interpolated to the other. The source is gone when the target forms, and the target is fully reached: "becomes a
+   bar chart" ends as bars. Parts are born at their source and travel. Merges and splits conserve quantity. Never
+   fake a transformation with an overlay, a crossfade, or by scaling the whole frame.
+2. **Identity persists.** An element keeps its colour, its shape and its slot through every scene and material
+   change unless the prompt says otherwise. Elements that turn into one another share a slot constant — a lane, a
+   baseline, an anchor.
+3. **Physics and depth are explicit.** Each scene has a back-to-front layer list. Weather respects occluders; things
+   behind glass are tinted; reflections mirror their source; shadows share one light direction. Contacts are
+   computed, not eyeballed.
+4. **Space words are coordinates.** On 1920 × 1080: centre (960, 540); the thirds at x ≈ 640 and x ≈ 1280; upper
+   y ≈ 360; lower y ≈ 760. Scale for other formats.
+5. **Energy is even.** On-screen change follows the tempo. Spikes are planned hits; no dead seconds unless the hold
+   is planned.
+6. **Sound by default**, on its own track, never drawn in a page.
+7. **Finish and check.** Write every scene completely, run the jury, fix until every juror scores 8 or more.
+
+## Stage 5 — build in AICUT
+
+```
+my-film/
+  film.html                 the cut: viewport, tracks, every clip and every sound
+  scenes/SceneNN.html       one page per shot: window.film = { frame(t), duration, ready }
+  lib/…                     a page's own shared code (easing, geometry), loaded by relative path
+  assets/                   media, including the sound
+```
+
+**Rules:**
+
+- **Time.** `frame(t)` only. Time is the page's own seconds from 0. No CSS animations, no `requestAnimationFrame`
+  loop, no `Date`, no `Math.random()` (seed by hand if you need variation), no state carried between frames.
+- **One page per shot.** A five-shot film is five pages cut together in `film.html`, so the person can reorder or
+  replace one. Anything the pages share goes in `lib/`.
+- **Placement is `film.html`'s.** `left`, `top`, `width`, `height`, `rotate` on the clip's `style`. Never position the
+  page itself from inside, and never animate the clip's box — that is the cut, not the motion.
+- **Easing.** Write it once in `lib/motion.js` and import it everywhere: a `prog(t, start, dur, ease)` clamped to
+  0..1, the four curves below, and a spring that lands on a beat. `references/pages.md` has the file.
+- **Type.** HTML for set type (so the person can edit the words), per-letter spans for per-letter motion, SVG
+  `<text>` for pattern fills, outlines and clips. `writing-mode: vertical-rl` for vertical CJK.
+- **Fonts.** System stacks, or a font in `assets/` with `document.fonts.load('700 64px …')` awaited in `ready`.
+  Never a font that may not arrive.
+- **Sound.** A music or ambience `<audio>` clip, plus one clip per hit on its own track, all in `film.html`. Generated
+  music and effects come from `npx -y @autoaiai/aicut@latest get`, once the person has connected a service.
+- **Completeness.** No TODOs. If space runs out, stop at the end of a file with `// CONTINUE FROM <path>`.
+
+## Stage 6 — the jury
+
+Five jurors score 1–10. Each names its worst moment with a timestamp.
+
+1. **SPEC.** Every S, X and E row is implemented with its exact value. Missing or changed ids listed. This score caps
+   the total.
+2. **CONTINUITY.** Every X row is a real transformation that reaches its target, parts born at their source. Identity
+   and slots persist through scenes and materials. Physics and depth are correct.
+3. **RHYTHM & SOUND.** Events land on beats; easing matches the contract; energy is even with no unplanned spikes or
+   dead seconds; every hit has its sound; the loop seam is clean.
+4. **DESIGN.** Hero frames match their layouts; occupancy and whitespace match the contract; every element passes its
+   playbook check (look at stills zoomed in on type, faces, hands, props, data labels); the look is designed for this
+   film, not a default and not an example's.
+5. **CRAFT.** Texture and light are per element; the film is deterministic; nothing from the ban list — unrequested
+   gradients, glow (bloom, neon halos, lens flares), generic fade-ins, bounce where forbidden, particle bursts,
+   camera shake, RGB split, centred-title-over-cards, stock icons and emoji, placeholder copy, anything that reads as
+   a template. Motivated light drawn as shapes is allowed.
+
+Fix everything below 8, worst first, up to three rounds.
+
+**How to look:**
+
+```sh
+npx -y @autoaiai/aicut@latest look            # the whole film: contact sheet, sound, loudness, same-t check
+npx -y @autoaiai/aicut@latest look 4.5        # one frame at full size
+npx -y @autoaiai/aicut@latest look 3-6        # a stretch, densely
+TIMES are worth naming: the first frame, each scene's first full frame, the loop seam
+```
+
+Read the PNGs it writes. Trust the stills over the code: a format mismatch, a leftover placeholder, missing audio, a
+flash of the wrong colour at `t = 0`, a bad loop seam.
+
+## Stage 7 — hand it over
+
+Reply in this order:
+
+1. **解读** (the person's language, ≤ 6 lines): the style source, the assumptions, the conflicts, the inferred
+   `S##*` rows.
+2. **Ledgers and timeline** in one fenced block, kept for later rounds.
+3. **Files**, each headed by its path: `film.html`, every `scenes/*.html`, `lib/*.js`.
+4. **Parity table**: `X## · source → target · mechanism · file`; `E## · playbook · features drawn · file · identity
+   kept across materials`; `format · W×H · duration · S##`. Any X row done by overlay, crossfade or whole-frame
+   scaling is a failure — fix it before replying.
+5. **Jury**: five scores, and the three things you are least sure of.
+6. **运行方法**: `npx -y @autoaiai/aicut@latest open <folder>` and open the address it prints; `look` to check; `render` for
+   the MP4 when the person wants the file.
+
+**Follow-ups.** 继续 → only the remaining files. 评审修复 → run stage 6 on new stills, then output only the changed
+files, in full.

package/skills/aicut-motion/references/design-systems/README.md

@@ -0,0 +1,25 @@
+# Design systems
+
+Use one only when the prompt does not state its own style (SKILL.md stage 2).
+
+Each file is a base contract: adapt the palette, the copy and the details to the idea, and keep the mechanisms. When
+none fits, write a new contract in the same sections — that is often the right answer.
+
+| File | Fits |
+| --- | --- |
+| `drafting-table.md` | Designers, tools, process, engineering, "how it's made" |
+| `swiss-kinetic.md` | Brands, launches, statements, events, tech |
+| `editorial-ink.md` | Culture, food, books, craft, heritage, Chinese themes |
+| `data-instrument.md` | Explainers, finance, science, products with numbers |
+| `bold-poster.md` | Music, sport, youth, fashion, campaigns |
+| `riso-halftone.md` | Indie, zines, retro, nostalgia, playful brands |
+| `storybook-scene.md` | Stories, characters, music videos and lyric clips, picture books |
+
+Every seed uses the same functions, all in `../pages.md`: `prog`, `EASE`, `settle`, `beats`, `stepped`, `wobble`,
+`rand`, `ring`, `polygon`, `toPath`, `morphPts`, `drawOn`, `revealInset`, `revealCircle`, `counter`, `poseAt`. Copy
+`lib/motion.js` from there into the film once; do not paste helpers into a scene.
+
+The sound lines name instruments (`kick`, `pluck`, `scratch`, …). AICUT has no synthesiser: those are descriptions
+of the effects to fetch with `npx -y @autoaiai/aicut@latest get` or to bring as files under `assets/`, one `<audio>` clip per hit
+on the `T` block. Write the cue list down even when the files are not there yet, so the film can be finished later
+without re-deciding the rhythm.

package/skills/aicut-motion/references/design-systems/bold-poster.md

@@ -0,0 +1,62 @@
+# bold-poster
+
+Fits: music, sport, youth brands, fashion, festivals, campaigns. Not for: finance, heritage, calm topics.
+
+## Palette
+
+- Three or four saturated flat colours with roles, e.g. electric blue `#2346FF`, hot pink `#FF4FA3`, acid yellow
+  `#E8FF3A`, black `#0B0B0B` or white `#FFFFFF`.
+- Every scene takes a different background from that set — the change of background is the scene change.
+
+## Type
+
+- Ultra-heavy condensed or wide display at 900, 300–700 px, cropped by the frame: Anton, Archivo Black or Bebas Neue
+  for Latin; ZCOOL QingKe HuangYou or Noto Sans SC 900 for Chinese.
+- Stacked lines, tight leading (0.85): one `<span>` per line, `line-height: 0.85`.
+
+## Marks, in a page
+
+- Flat cut-out shapes — stars, circles, arrows — drawn as plain `<path>` with a flat fill and no stroke.
+- Photo-free collage of colour blocks.
+- Stickers: a shape with a 6 px white outline (`stroke="#fff" stroke-width="12"` behind it, or `paint-order: stroke`).
+
+## Texture
+
+One grain rect at 0.08 with `mix-blend-mode: overlay`; flat otherwise.
+
+## Layout
+
+- Edge to edge. Type bleeds off the frame. Diagonals at 8–15°.
+- Elements overlap; a big shape behind a big word.
+
+## Composition
+
+- Occupancy 80–100%; type and shapes bleed off edges on purpose.
+- One giant element per scene; diagonals at 8–15°.
+
+## Motion character
+
+- 128–140 BPM. Punchy: `settle` with `{ bounce: 0.3–0.6 }`, dur 0.2–0.35 s.
+- Squash and stretch on landing: `scale(1 + 0.08 * (1 - p), 1 - 0.08 * (1 - p))` during the last 0.1 s.
+- Repeated words strobe in colour on beats (swap `color` at `beats.index(t)`, not a fade).
+- Shapes spin at fixed beat steps: `rotate(${stepped(t, bpm / 60 * 2) * 90}deg)`.
+
+## Transition grammar
+
+- A colour block slams in from a side and becomes the next background (one full-frame rect, `left` from ±100%).
+- Type scales up until it fills the frame, and its colour becomes the next scene's background.
+- A shape iris-opens on the beat: `revealCircle(p)` at the shape's centre.
+
+## Signature details
+
+A repeating word or chant that changes colour each beat; stickers with numbers or dates; a final lock-up that shakes
+once on the last beat (scale the lock-up, never the camera).
+
+## Sound
+
+- `kick` on every beat, `clap` on 2 and 4, `hat` on eighths; `boom` on the final lock-up; `whoosh` on colour slams.
+- 128–140 BPM.
+
+## Bans
+
+Muted palettes, thin type, long holds, crossfades, realistic shadows, generic gradients.