demo-video-pipeline

Companion skills — load these BEFORE you start

Two other skills carry the deep API knowledge for the tools in this pipeline. Without them, you will spin on basics this skill does not repeat. As soon as this skill triggers, invoke the Skill tool for both of these:

• remotion-best-practices — official @remotion/skills from remotion-dev. 36 rules covering Remotion's API: animations, audio, captions, transitions, the interpolate / spring patterns, useCurrentFrame rules, <Video> / <OffthreadVideo> gotchas, MapLibre embed, silence-detection, measuring-dom-nodes, voiceover, and more. Pinned to a Remotion release version, so it's the most authoritative source for the API. Load it before touching anything in src/ (phase 4).
• playwright-best-practices — covers the locator strategy, auto-waiting, network mocking, debugging flaky tests, and CI patterns. Load it before writing scripts/record-demo.ts (phase 3) — the SPA waiting / waitForFunction patterns in rules/03 are a thin slice of what this skill knows.

Skipping this is the #1 way to lose an hour rediscovering things. Real example: forgetting remotion-best-practices led to using CSS animations inside Remotion (silently produces a frozen frame in the rendered mp4 — Remotion only honours useCurrentFrame()-driven animation).

Step 0 — Intake (run BEFORE anything else)

Before reading any other rule, before installing dependencies, before writing scenes — collect these answers from the user. They fork the pipeline at every level and are 10× cheaper to gather upfront than to retrofit mid-flight. Use the AskUserQuestion tool where options are bounded; use a plain prompt where the answer is open-ended.

Q1 — Source (open prompt).

"Where are we recording from? Give me a file path, URL, or path to a project I should run."

Examples: /Users/me/projects/myapp/demo.html (local HTML), http://localhost:3000/dashboard (your dev server), https://staging.acme.com/fleet (live staging), ~/work/myrepo (with the dev-server command).

Infer from the answer: file:// or *.html → standalone HTML, hook injectable. localhost:* → live local app, usually injectable. External URL → live external, usually NOT injectable. Only ask the explicit follow-up "can you modify the source to inject a keyboard zoom hook?" if the answer doesn't make this clear.