@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/demoday/SKILL.md

@@ -1,148 +0,0 @@
----
-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

@@ -1,131 +0,0 @@
----
-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

@@ -1,200 +0,0 @@
----
-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.