jaobrown/demo-changes

Overview

This skill automatically generates screen recordings with AI narration to demonstrate UI changes introduced by a pull request. It creates a Playwright test that walks through the affected route, produces a synced narration script, records the screen, and composites final video and optional voiceover. Use it to quickly produce clear, repeatable demo videos for reviewers and stakeholders.

How this skill works

The skill analyzes your Git diff to detect UI-relevant changes and suggests the route and actions to demonstrate. It writes a vanilla Playwright test that navigates to the target page and performs timed interactions, then generates a narration script aligned to those actions. The CLI records the browser run to a video, optionally requests AI narration (ElevenLabs), and composites audio + video into a final MP4.

When to use it

• You want a short demo video to show UI changes in a pull request.
• You need a repeatable, script-driven screen recording for release notes or QA.
• You want narrated walkthroughs for non-technical stakeholders.
• You need to embed a demo in a PR description or design review.
• You want to automate demo creation as part of a review workflow.

Best practices

• Run the prereq check and ensure the dev server responds before recording.
• Keep tests focused: navigate to the affected route and perform a few clear actions.
• Use robust selectors (data-testid, ARIA roles, stable text) to avoid flakiness.
• Add 1–3s waitForTimeout pauses between actions so viewers can read changes.
• If using narration, verify your ELEVEN_LABS_API_KEY and review timing offsets.

Example use cases

• Record a demo showing updated modal copy and how users interact with it.
• Create a narrated walkthrough of a redesigned settings page for product review.
• Produce a short clip demonstrating a bug fix in a form flow for QA.
• Generate a video illustrating new visual changes for marketing or release notes.
• Automate demo generation across multiple packages in a monorepo with discovered Playwright configs.