{"slug": "prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a", "title": "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).", "summary": "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.", "body_md": "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.\n\n**Prerequisites** the prompt sets up for you:\n\n- The Remotion agent skill (installed globally so the agent knows how to write Remotion correctly)\n- A separate\n`reel-studio`\n\nRemotion project as the render engine (its own repo,`@remotion/cli`\n\npinned)\n\nCopy everything in the block below:\n\n```\nBuild me a global coding-agent skill that turns a work session's UI changes into\na short, on-brand \"what's new\" product video.\n\nSETUP — do this first, in order, before writing the skill:\n1. Install the Remotion agent skill globally so you know how to write Remotion\n   correctly: run `npx skills add remotion-dev/skills` and pick the global\n   (~/.claude/skills) scope. This is knowledge only — it teaches you the Remotion\n   APIs; it does not render anything by itself.\n2. Scaffold a SEPARATE Remotion project called `reel-studio` (its own folder/repo,\n   its own package.json) to be the render engine. Pin `@remotion/cli` as a\n   dependency there and run `npm install`, so `npx remotion render` works from\n   inside that project. Do NOT add Remotion to my app's codebase — keep it fully\n   separate so the skill is reusable across all my products and independent of\n   each app's React version. The render engine must take everything as input\n   props (brand colors, fonts, logo, copy, screenshots) so it stays brand-agnostic.\n\nTHE SKILL should:\n- read my git diff to find the changed pages\n- use the feature PRD I'm currently on for context\n- start the app and log in with a headless test account\n- capture screenshots headlessly with a browser-automation tool. If I already\n  have a headless-browser skill on my machine (e.g. a dev-browser / agent-browser\n  skill), use that — it's totally fine and preferred. Otherwise use Playwright or\n  Puppeteer. Navigate each route, log in once, read each element's on-page\n  position (bounding box) to pick the zoom regions itself, and take both a\n  full-page screenshot and cropped element screenshots — no hand-fed images.\n- build each feature as a little sequence: an explainer slide (title + 2\n  sentences), a full screenshot for context, then zoom-in detail slides where a\n  cropped region sits next to bullet points\n- write concrete, benefit-based copy in my brand voice\n- render the mp4 by calling `npx remotion render` against the reel-studio project\n\nSECURITY / DATA PRIVACY — this is important, the reel is made from a LIVE app:\n- Screenshots can contain whatever is on screen, so ONLY capture with a dedicated\n  test account on an isolated tenant/environment seeded with synthetic data —\n  never a real user or real customer data. Nothing private should ever end up in\n  the video.\n- The test account must be able to log in headlessly (no MFA prompt, or an\n  MFA-exempt test carve-out).\n- Keep the capture credentials in a gitignored .env. If the skill writes them\n  into a temporary capture script at run time, it must delete that file\n  afterward and never commit it.\n\nKeep brand tokens, voice, and the file-path-to-route map in a per-project config\nfile (e.g. .claude/feature-reel.json). Gate rendering until web fonts load so\ntext doesn't flash.\n\nMake the skill self-documenting: in its SKILL.md, list the prerequisites (the\nglobal remotion-dev/skills install, a `reel-studio` project with @remotion/cli\ninstalled, a headless-capable test account on an isolated tenant), and have the\nskill check they exist at run time and stop with a clear message telling me\nexactly what to install or configure if anything is missing.\n```\n\n", "url": "https://wpnews.pro/news/prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a", "canonical_source": "https://gist.github.com/netadror/763cd4a868cccf58f33916e5b9546c36", "published_at": "2026-07-29 14:51:00+00:00", "updated_at": "2026-07-30 16:31:20.499112+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai", "ai-agents"], "entities": ["Claude Code", "Remotion", "Playwright", "Puppeteer"], "alternates": {"html": "https://wpnews.pro/news/prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a", "markdown": "https://wpnews.pro/news/prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a.md", "text": "https://wpnews.pro/news/prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a.txt", "jsonld": "https://wpnews.pro/news/prompt-to-build-a-coding-agent-skill-that-turns-your-session-s-ui-changes-into-a.jsonld"}}