Prompt to build a coding-agent skill that turns your session's UI changes into a short, on-brand "what's new" product video (via Remotion).

A developer has published a prompt that instructs coding agents like Claude Code to build a global skill that automatically generates short, on-brand 'what's new' product videos from UI changes in a work session. The skill reads git diffs, captures headless screenshots, and renders MP4s via a separate Remotion project called reel-studio, with security measures to avoid real user data.

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.