@autoaiai/aicut 0.1.7 → 0.1.11

package/skills/demoday/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: demoday
+description: "DemoDay: the method the original skill taught, run as an AICUT film — pages that draw any moment t, cut on tracks. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
+license: MIT
+source: "mrieck/demoday-claude-plugin"
+---
+
+# DemoDay
+
+## 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.
+
+
+You are about to produce a **finished demo video** of someone's software — narrated,
+paced, with an intro, transitions and a point — not a screen recording. This
+folder is the whole toolkit: scripts, a rehearsal server, a Remotion template and
+the five craft guides below. Nothing lives outside it.
+
+## Where things are
+
+`$CLAUDE_PLUGIN_ROOT` in the guides means **this folder** — the directory that
+holds this `SKILL.md`. In Claude Code the plugin sets that variable; installed
+through `npx skills` it is `~/.agents/skills/demoday` (or the project's
+`.agents/skills/demoday`); as a Codex plugin it is the plugin's install
+directory. Every `node scripts/...` command in the guides runs from here, e.g.
+
+```bash
+cd ~/.agents/skills/demoday && node scripts/doctor.mjs
+```
+```
+The video **project** is separate: it lives under the demoed repo at
+`<repo>/demo/<slug>/` and is passed as `--project demo/<slug>` to every script.
+```
+
+## First run — do this before anything else
+
+```
+`doctor` prints one line per requirement with the exact fix command. The two
+things it cannot do for the user: a **FAL_API_KEY** (fal.ai — narration,
+presenter, b-roll; store it in the macOS Keychain as printed), and, for desktop
+or terminal demos, the **Screen Recording** and **Accessibility** permissions,
+which the user grants to the terminal app and then restarts it. Stop and tell
+the user exactly what to do when either is missing; never fake a capture.
+```
+
+## The rehearsal tools
+
+Capture is two passes: **rehearse** (you drive the app, screenshot after every
+action, nothing recorded) and **perform** (a runner replays the rehearsed steps
+smoothly while recording). The rehearsal tools are `demo_open`, `demo_open_app`,
+`demo_open_cli`, `demo_inspect`, `demo_click`, `demo_type`, `demo_key`,
+`demo_scroll`, `demo_highlight`, `demo_wait_stable`, `demo_screenshot`,
+`demo_undo_step`, `demo_review_script`, `demo_save_actions`,
+`demo_load_actions`, `demo_close`.
+
+Three ways to reach them, pick the first that applies:
+
+1. **They are already in your tool list** (Claude Code plugin, Codex plugin) —
+   call them directly.
+2. **Your agent supports MCP servers** — register `mcp/server.mjs` as a stdio
+   server once and the tools appear. Any client config takes the same shape:
+   ```json
+   { "mcpServers": { "demo-stage": { "command": "node", "args": ["<this folder>/mcp/server.mjs"] } } }
+   ```
+(Codex: `codex mcp add demo-stage -- node <this folder>/mcp/server.mjs`;
+   Cursor: `.cursor/mcp.json`; Gemini CLI: `~/.gemini/settings.json`; VS Code /
+   Copilot: `.vscode/mcp.json`.) Raise the client's tool timeout if it has one —
+   `demo_wait_stable` can legitimately take a couple of minutes.
+3. **Shell only** — `scripts/stage.mjs` is the same server driven from the
+   command line. The first call starts it in the background; each later call is
+   one tool invocation against the live session, so the browser and the action
+   script persist between commands:
+```
+```
+Tool names drop the `demo_` prefix. Screenshots are written as PNG files and
+   the path is printed as `screenshot: …` — **open that image** after each step;
+   deciding from the text alone is guessing. Desktop clicks take `--x --y` read
+   off the most recent screenshot, exactly as with the MCP tool.
+
+Everywhere the guides say `demo_<name>`, read `node scripts/stage.mjs <name>` if
+you are on path 3.
+```
+
+## The workflow — read this next
+
+Open and follow **`skills/demo-video/SKILL.md`** in this folder. It is the
+end-to-end recipe (recon → direction → script → narration → rehearse → perform →
+presenter/b-roll → render → QA) and it tells you when to read the others:
+
+| guide | read it when |
+|---|---|
+| `skills/demo-video/SKILL.md` | always — the orchestration and the rules |
+| `skills/demo-script/SKILL.md` | writing narration and the `demo.json` manifest |
+| `skills/demo-capture/SKILL.md` | staging a window, selectors, desktop coordinates, terminal demos, the action-script format |
+| `skills/demo-assembly/SKILL.md` | rendering, transitions, captions, zoom, audio, the dynamic style's moving presenter frame, or a render that came out wrong |
+| `skills/demo-shorts/SKILL.md` | a 9:16 Short — listicle, cohost, flashcard or glide |
+
+Where a guide says to use `AskUserQuestion`, ask the user in whatever way your
+agent asks questions; the answers (style, goal, length, presenter mode) change
+the whole video, so do not skip them.
+
+## Rules that never bend
+
+- **Show the cost estimate (`node scripts/plan.mjs --project demo/<slug>`) and get
+  an explicit yes before generating anything.** Narration, presenter and b-roll
+  bill per second.
+- **Narration before capture.** Durations drive the pacing of every scene.
+- **Rehearse, then perform. Never record yourself exploring.**
+- **Everything goes in `demo.json`.** State that only exists in your context is
+  lost on the next run.
+- **Look at the frames** during QA (`node scripts/qa.mjs`). There is no automatic
+  grader.
+- **Report what actually happened.** A failed scene is reported, not hidden.
+
+## Source
+
+Rewritten for AICUT from [`mrieck/demoday-claude-plugin`](https://github.com/mrieck/demoday-claude-plugin)
+(MIT), SKILL.md. The method is that skill's own; the way it runs is AICUT's.
+
+The repository holds 6 skills; this is the one its entry stands for.

package/skills/develop-premiere-pro-mcp/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: develop-premiere-pro-mcp
+description: "Develop, debug, test, review, document, and release the premiere-pro-mcp repository. Use when changing MCP tools, schemas, server registration, CEP or UXP bridges, generated ExtendScript, authority profiles, packaging, release metadata, or compatibility claims in this repo. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
+license: MIT
+source: "leancoderkavy/premiere-pro-mcp"
+---
+
+# Develop Premiere Pro MCP
+
+## 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.
+
+
+Make focused, evidence-backed changes to this TypeScript MCP server. Preserve unrelated
+worktree changes and distinguish automated verification from behavior proven in a live
+Premiere Pro host.
+
+## Orient to the repository
+
+1. Read `AGENTS.md` first, then `README.md`, `SECURITY.md`, `CONTRIBUTING.md`, and
+   `RESEARCH.md` only as needed for the task. Treat current source and release metadata
+   as authoritative over dated snapshots.
+2. Inspect `git status` before editing. Do not stage, rewrite, or remove unrelated work.
+3. Trace the relevant path before changing it:
+   - `src/server.ts` assembles the MCP surface.
+   - `src/tools/` contains tool schemas and handlers.
+   - `src/bridge/` implements host communication.
+   - `cep-plugin/` is the broad production bridge.
+   - `uxp-plugin/` is capability-aware and supports only its declared Premiere APIs.
+4. Use Node.js 24 for development when available; preserve the package's Node 20.19+
+   runtime floor. Install deterministically with `npm ci` when dependencies are missing.
+
+## Implement safely
+
+- Reuse nearby helpers and module patterns before adding abstractions or dependencies.
+- Keep tool schemas, descriptions, registrations, structured results, authority profiles,
+  tests, documentation, generated catalogs, and reported counts synchronized.
+- Generate ExtendScript as ECMAScript 3: use `var`, traditional functions and loops, and
+  avoid arrows, `let`, `const`, template literals, and other modern runtime syntax.
+- Escape every user-controlled string with existing helpers before embedding it in a
+  generated script. Never interpolate raw paths, names, expressions, or prompts.
+- Keep raw scripting disabled unless the explicit `unsafe-script` capability is enabled.
+- Prefer documented Premiere APIs. Label QE DOM behavior experimental.
+- Verify mutation postconditions. Do not treat a host API return value alone as proof of
+  success, and do not silently fall back from failed UXP work to CEP or QE.
+- Premiere metadata is several documented surfaces, not one blob: Project-panel
+  column JSON (`getProjectColumnsMetadata`), Premiere-private project metadata XML,
+  file/clip XMP, panel-layout/schema XML, plus adjacent color-label, interpretation,
+  marker, and transcript tools. Documented `ppro.Metadata.*` methods are already
+  mapped. Do not wrap undocumented QE metadata, dump unbounded packets, or treat
+  `premiere://project/metadata` as XMP. Field-level inspect/update is bounded
+  (`uxp.XMPMeta` / AdobeXMPScript, 256 fields, sensitive EXIF omitted by default,
+  field readback). CEP still accepts a complete XML payload plus `updatedFields`.
+  Adobe exposes no field-level schema enumerator. Keep C2PA as beta until a
+  stable host pin exists. When adding metadata behavior, update
+  `src/workflows/agent-instructions.ts`, the workflow catalog prompt, and both
+  `edit-premiere-project` skill copies together.
+- Preserve private-directory ownership checks, authentication, size limits, secret
+  handling, and telemetry privacy. Never collect prompts, arguments, results, tokens,
+  IP addresses, project paths, media names, or person profiles.
+
+## Test proportionally
+
+1. Add or update tests for behavior, failure paths, validation, escaping, authorization,
+   registration, and metadata affected by the change.
+2. Run the narrowest relevant tests while iterating.
+3. Run `npm run check` before completion. Run `npm run test:coverage` when changing
+   coverage-sensitive behavior.
+4. Inspect the final diff and status so generated output or unrelated files are not
+   included accidentally.
+5. Treat build, unit tests, mocks, and CI as package evidence only. Require a supported
+   Premiere host and the applicable running CEP or UXP bridge for live-host claims.
+
+## Handle releases and compatibility claims
+
+- Follow `docs/release-conventions.md`: GitHub release titles equal their Git tags,
+  exactly `v<SemVer>` (for example, `v1.19.0` or `v1.20.0-rc.1`). Put summaries in
+  release bodies; omit `v` in package and manifest versions. Preserve the README
+  `### Latest release:` heading and existing changelog heading format.
+- Use `scripts/normalize-release-names.mjs` to preview title drift, `--check` to
+  fail on drift, and `--apply` for authorized repairs with GitHub readback. Historical
+  cleanup edits display titles only; never retag or republish existing versions.
+  A naming task does not authorize a new publication.
+- Search all version-bearing package, lock, manifest, marketplace, MCP configuration,
+  updater, and installation files when changing a version.
+- After an npm release is verified, update the README `### Latest release:` heading, README
+  install commands, both plugin `.mcp.json` pins, and both `edit-premiere-project` skill pins
+  together; `tests/release-metadata.test.ts` and `tests/codex-plugin.test.ts` guard them.
+- The website lives in `leancoderkavy/premiere-pro-mcp-site` and syncs published npm facts
+  automatically. Do not edit site facts from this repository.
+- Verify the exact commit, checks, registry artifact, release assets, deployment health,
+  and host state separately when the task includes those outcomes.
+- Never claim a commit, push, merge, publication, deployment, or live Premiere result
+  without direct evidence from that layer.
+- Report what changed, exact checks run, failures or skipped checks, and whether live CEP
+  or UXP verification was performed.
+
+## Source
+
+Rewritten for AICUT from [`leancoderkavy/premiere-pro-mcp`](https://github.com/leancoderkavy/premiere-pro-mcp)
+(MIT), claude-plugins/premiere-pro/skills/develop-premiere-pro-mcp/SKILL.md. The method is that skill's own; the way it runs is AICUT's.
+
+The repository holds 4 skills; this is the one its entry stands for.

package/skills/diagram-animation/SKILL.md

@@ -0,0 +1,200 @@
+---
+name: diagram-animation
+description: "This skill should be used when the user asks to \"animate this diagram\", \"build a flowchart that reveals step by step\", \"animate an architecture/sequence diagram\", \"make a chart animate in\", \"grow the bars / draw the line / count up the number\", \"show data flowing along a connector\", or \"turn a static diagram into a guided reveal\". Covers SVG, Framer Motion, D3, and AICUT. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
+license: MIT
+source: "iart-ai/explainer-video-skills"
+---
+
+# Diagram & Data Animation
+
+## 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.
+
+
+Make structure and data legible by revealing it over time — one idea per beat. Build progressive node/edge reveals, flowing connectors, and animated charts (bars grow, lines draw, numbers count up) for web or video.
+
+## When to use
+
+- Architecture, flow, or sequence diagrams that build step by step.
+- Animated charts: bars grow, lines draw on, numbers count up.
+- "How it works" walkthroughs and process explainers.
+- Showing data or signal flowing along connectors.
+
+## Core principle: progressive disclosure
+
+Never show everything at once. Reveal in this order: **nodes → edges → labels**. Highlight the active element and dim the rest (focus + context). Pace to comprehension, not flash — hold each step 0.5–1.5s so it lands. Keep a consistent visual grammar: color means meaning, and that mapping never changes mid-piece.
+
+## Quick reference
+
+| Goal | Mechanism | Easing |
+|---|---|---|
+| Node appear | scale 0.8→1 + opacity, `transform-origin:center` | `back.out(1.5)` / `easeOut` |
+| Edge connect | `stroke-dashoffset` len→0 | `easeInOut`, 0.4–0.7s |
+| Flowing data | animate `stroke-dashoffset` looping + traveling dot | `linear`, infinite |
+| Bar grow | `scaleY` 0→1, `transform-origin:bottom` | `easeOut`, stagger 0.06s |
+| Line chart | path `stroke-dashoffset` len→0 | `easeInOut`, 0.8–1.2s |
+| Count-up | interpolate value with eased `t` | `easeOutCubic` |
+| Highlight | active full-opacity, others `opacity:.35` | 0.3s |
+
+## Progressive node/edge reveal (SVG + GSAP)
+
+```html
+<svg viewBox="0 0 400 200" id="flow">
+  <g class="node" opacity="0"><circle cx="60" cy="100" r="28" fill="#0A84FF"/></g>
+  <g class="node" opacity="0"><circle cx="200" cy="100" r="28" fill="#0A84FF"/></g>
+  <g class="node" opacity="0"><circle cx="340" cy="100" r="28" fill="#0A84FF"/></g>
+  <path class="edge" d="M88 100 H172" stroke="#888" stroke-width="3" fill="none" pathLength="1"/>
+  <path class="edge" d="M228 100 H312" stroke="#888" stroke-width="3" fill="none" pathLength="1"/>
+</svg>
+<script type="module">
+  import gsap from "https://cdn.jsdelivr.net/npm/gsap/+esm";
+  gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
+  const tl = gsap.timeline({ defaults: { ease: "power2.out" } });
+  tl.to(".node", { opacity: 1, scale: 1, transformOrigin: "center",
+                   duration: .45, stagger: .35, ease: "back.out(1.6)", startAt: { scale: .8 } })
+    .to(".edge", { strokeDashoffset: 0, duration: .5, stagger: .35 }, "-=0.9");
+</script>
+```
+`pathLength="1"` lets one dash value drive any edge length. Reveal nodes first, then draw edges between the now-visible nodes.
+```
+
+## Flowing connector (marching dash + traveling dot)
+
+```css
+.flow-line { stroke-dasharray: 8 8; animation: march 0.6s linear infinite; }
+@keyframes march { to { stroke-dashoffset: -16; } }   /* = sum of dash pattern */
+@media (prefers-reduced-motion: reduce){ .flow-line { animation: none; } }
+```
+Traveling dot along the path (`offset-path`, no JS):
+```
+```css
+.packet { offset-path: path("M88 100 H312"); animation: travel 1.4s linear infinite; }
+@keyframes travel { to { offset-distance: 100%; } }
+
+## Charts
+
+Bar grow (scaleY from the baseline):
+
+```css
+.bar { transform: scaleY(0); transform-origin: bottom; }
+.bar.in { transform: scaleY(1); transition: transform .6s cubic-bezier(.22,1,.36,1); }
+/* stagger via inline transition-delay per bar */
+```
+Line chart draw-on (the whole series path strokes in):
+```
+```js
+const len = pathEl.getTotalLength();
+pathEl.style.strokeDasharray = len;
+pathEl.style.strokeDashoffset = len;
+pathEl.getBoundingClientRect();                 // force reflow
+pathEl.style.transition = "stroke-dashoffset 1s ease-in-out";
+pathEl.style.strokeDashoffset = "0";
+```
+Count-up with eased interpolation (rAF):
+```
+```js
+function countUp(el, to, dur = 1200) {
+  const t0 = performance.now();
+  const fmt = new Intl.NumberFormat();
+  (function tick(now){
+    const k = Math.min(1, (now - t0) / dur);
+    const e = 1 - Math.pow(1 - k, 3);           // easeOutCubic
+    el.textContent = fmt.format(Math.round(to * e));
+    if (k < 1) requestAnimationFrame(tick);
+  })(t0);
+}
+
+## Build-tool choice
+
+- **Inline animated SVG + GSAP/CSS**: best for bespoke diagrams and full control on the web.
+- **Framer Motion (React)**: declarative reveals via `variants` + `staggerChildren`; pairs with Visx/Recharts for charts.
+- **D3 + transitions**: data-bound charts; `.transition().duration().attr()` for grow/draw, `tween` for count-up.
+- **Mermaid / Excalidraw**: author the diagram structure fast, render to SVG, then animate the SVG.
+- **Remotion (React)**: data-driven, deterministic renders for video output and repeatable exports.
+
+## Output checklist
+
+- Reveal order is nodes → edges → labels; nothing dumps in all at once.
+- Each step holds long enough to read (0.5–1.5s).
+- Color grammar is consistent and meaningful.
+- Active element highlighted, context dimmed.
+- `prefers-reduced-motion` path shows the final composed diagram without looping motion.
+
+## Deliver & verify (standalone HTML)
+
+> **Packaged helper** (`scripts/`): `scripts/seek-shot.sh anim.html 0 1.5 3` freezes the `?t=N` harness and screenshots each moment; `scripts/contact-sheet.sh sheet.png frame-*.png` tiles them for one-glance review. See `scripts/README.md`.
+
+For a self-contained diagram (reveal, flowing connector, animated chart) the deliverable is **one HTML file that opens directly in a browser** — no build step, no render pipeline. A single file is the right tier for web motion. (If the diagram is part of a rendered video, build it as a Remotion composition instead and verify via `remotion still` — see remotion-video.)
+
+**Output contract:**
+- One `.html` file: SVG inline; Framer Motion / D3 / anime / GSAP from CDN; the animation in one inline `<script>` (one driver).
+- A way to freeze an exact moment for screenshots, matched to how the diagram animates:
+  - GSAP / JS timeline: build one master `tl`, then `?t=N` → `tl.pause(); tl.seek(N)`.
+  - SVG SMIL: `svg.pauseAnimations(); svg.setCurrentTime(N)`.
+  - CSS keyframes: drive reveal order with `animationDelay`; freeze by pausing/seeking the equivalent JS timeline.
+
+```html
+<script>
+  // ... build your master timeline as `tl` ...
+  const t = new URLSearchParams(location.search).get("t");
+  if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }  // frozen at t seconds
+  window.__ready = true;                                    // ready signal for headless wait
+  console.log("duration", tl.duration());
+</script>
+```
+**Verify loop — render → freeze → screenshot → check:**
+1. Open the file at start / mid / end: `…/diagram.html?t=0`, `?t=<dur/2>`, `?t=<dur>` (read `tl.duration()` from the console).
+2. Headless-screenshot each frozen frame:
+```
+```bash
+npx playwright screenshot --wait-for-timeout=500 "file://$PWD/diagram.html?t=1.2" frame-mid.png
+```
+```
+3. Check **fidelity** — the step-by-step reveal appears in order (nodes → edges → labels, each step present at its frame), connectors point at the right nodes, count-ups land on the EXACT values — and **artifacts** (clipped labels, off-canvas nodes, FOUC before fonts, jank at seams).
+
+**Before you finish:**
+1. Opens standalone in a browser — no console errors, no missing CDN.
+2. One driver/master timeline; the freeze (`?t=N` / `setCurrentTime`) lands on a deterministic still.
+3. Screenshotted at start / mid / end — reveal order correct, connectors land on the right nodes, numbers exact.
+4. `prefers-reduced-motion` shows the final composed diagram without looping motion.
+5. Color grammar consistent; active element highlighted, context dimmed; nothing dumps in all at once.
+```
+
+## Reference files
+
+- `references/diagram-and-chart-recipes.md` — fuller runnable code: staged node/edge reveal with labels, flowing-dash + traveling-dot connectors, bar/line/count-up chart recipes, sequence-diagram and architecture build patterns, and D3 / Framer Motion / Remotion implementations with easing notes.
+
+## Source
+
+Rewritten for AICUT from [`iart-ai/explainer-video-skills`](https://github.com/iart-ai/explainer-video-skills)
+(MIT), skills/diagram-animation/SKILL.md. The method is that skill's own; the way it runs is AICUT's.
+
+The repository holds 5 skills; this is the one its entry stands for.