A single prompt you can paste into your coding agent (Claude Code, etc.) to build a global skill that turns a work session's UI changes into a short, on-brand "what's new" product video.
Prerequisites the prompt sets up for you:
- The Remotion agent skill (installed globally so the agent knows how to write Remotion correctly)
- A separate
reel-studio
Remotion project as the render engine (its own repo,@remotion/cli
pinned)
Copy everything in the block below:
Build me a global coding-agent skill that turns a work session's UI changes into
a short, on-brand "what's new" product video.
SETUP — do this first, in order, before writing the skill:
1. Install the Remotion agent skill globally so you know how to write Remotion
correctly: run `npx skills add remotion-dev/skills` and pick the global
(~/.claude/skills) scope. This is knowledge only — it teaches you the Remotion
APIs; it does not render anything by itself.
2. Scaffold a SEPARATE Remotion project called `reel-studio` (its own folder/repo,
its own package.json) to be the render engine. Pin `@remotion/cli` as a
dependency there and run `npm install`, so `npx remotion render` works from
inside that project. Do NOT add Remotion to my app's codebase — keep it fully
separate so the skill is reusable across all my products and independent of
each app's React version. The render engine must take everything as input
props (brand colors, fonts, logo, copy, screenshots) so it stays brand-agnostic.
THE SKILL should:
- read my git diff to find the changed pages
- use the feature PRD I'm currently on for context
- start the app and log in with a headless test account
- capture screenshots headlessly with a browser-automation tool. If I already
have a headless-browser skill on my machine (e.g. a dev-browser / agent-browser
skill), use that — it's totally fine and preferred. Otherwise use Playwright or
Puppeteer. Navigate each route, log in once, read each element's on-page
position (bounding box) to pick the zoom regions itself, and take both a
full-page screenshot and cropped element screenshots — no hand-fed images.
- build each feature as a little sequence: an explainer slide (title + 2
sentences), a full screenshot for context, then zoom-in detail slides where a
cropped region sits next to bullet points
- write concrete, benefit-based copy in my brand voice
- render the mp4 by calling `npx remotion render` against the reel-studio project
SECURITY / DATA PRIVACY — this is important, the reel is made from a LIVE app:
- Screenshots can contain whatever is on screen, so ONLY capture with a dedicated
test account on an isolated tenant/environment seeded with synthetic data —
never a real user or real customer data. Nothing private should ever end up in
the video.
- The test account must be able to log in headlessly (no MFA prompt, or an
MFA-exempt test carve-out).
- Keep the capture credentials in a gitignored .env. If the skill writes them
into a temporary capture script at run time, it must delete that file
afterward and never commit it.
Keep brand tokens, voice, and the file-path-to-route map in a per-project config
file (e.g. .claude/feature-reel.json). Gate rendering until web fonts load so
text doesn't flash.
Make the skill self-documenting: in its SKILL.md, list the prerequisites (the
global remotion-dev/skills install, a `reel-studio` project with @remotion/cli
installed, a headless-capable test account on an isolated tenant), and have the
skill check they exist at run time and stop with a clear message telling me
exactly what to install or configure if anything is missing.
source & further reading
gist.github.com — original article
cuda-oxide: eliding bounds checks with proof carrying views
JavaScript Property Behavior Matrix
Daemonless ticket-queue poller for the sonu plugin — cron wrapper that wakes a headless agent session only when a trigger label or in-flight ticket branch exists