# 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).

> Source: <https://gist.github.com/netadror/763cd4a868cccf58f33916e5b9546c36>
> Published: 2026-07-29 14:51:00+00:00

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.
```