demo
π―Skillfrom jaobrown/demo-changes
demo skill from jaobrown/demo-changes
Installation
npx skills add jaobrown/demo-changesgit clone https://github.com/jaobrown/demo-changes .claude/skills/demoSkill Details
Overview
# demo-changes
A Claude Code skill that automatically generates screen recordings with AI narration to demonstrate your PR changes.
Installation
Via skills.sh (Recommended)
```bash
npx skills add jaobrown/demo-changes
```
Manual Installation
Clone this repository into your project's .claude/skills/ directory:
```bash
mkdir -p .claude/skills
git clone https://github.com/jaobrown/demo-changes .claude/skills/demo
```
Prerequisites
- Node.js 18+
- pnpm package manager
- ffmpeg for video composition (optional but recommended)
- ELEVEN_LABS_API_KEY environment variable for AI narration (optional)
Installing ffmpeg
```bash
# macOS
brew install ffmpeg
```
Usage
Make sure your development server is running, then:
```bash
/demo
```
The skill will:
- Analyze your git diff for UI-relevant changes
- Generate a Playwright test to demonstrate the changes
- Create a narration script
- Record the screen while running the test
- Generate AI voice narration (if API key is set)
- Composite the final video with audio
Options
```bash
# Analyze specific commit range
/demo --commits=HEAD~3..HEAD
# Only staged changes
/demo --staged
# Custom output filename
/demo --output my-feature-demo
```
Configuration
Edit config.json to customize behavior:
```json
{
"baseUrl": "http://localhost:3000",
"voiceId": "21m00Tcm4TlvDq8ikWAM",
"videoDimensions": {
"width": 1280,
"height": 720
},
"outputDir": "output",
"tempDir": "temp",
"recordingTimeout": 60000,
"defaultPacing": {
"beforeClick": 500,
"afterNavigation": 1000,
"betweenActions": 800
},
"autoPatchFixtures": true,
"fixturePatterns": ["test.ts", "fixtures.ts", "base.ts", "setup.ts"]
}
```
Configuration Options
| Option | Default | Description |
|--------|---------|-------------|
| baseUrl | http://localhost:3000 | URL of your development server |
| voiceId | 21m00Tcm4TlvDq8ikWAM | ElevenLabs voice ID for narration |
| videoDimensions | 1280x720 | Video resolution |
| outputDir | output | Directory for final videos |
| tempDir | temp | Directory for temporary files |
| recordingTimeout | 60000 | Max recording time (ms) |
| defaultPacing | see above | Timing between actions |
| autoPatchFixtures | true | Auto-patch custom Playwright fixtures for video recording |
| fixturePatterns | see above | Files to search for custom fixtures |
How It Works
- Diff Analysis - Parses git diff to identify UI-relevant file changes (
.tsx,.jsx,.css, etc.) - Test Generation - Creates a Playwright test that navigates to affected routes and interacts with changed components
- Script Generation - Writes natural-sounding narration synced to test steps
- Recording - Runs Playwright with video capture enabled
- Narration - Calls ElevenLabs API to generate voice-over audio
- Composition - Uses ffmpeg to combine video + audio into final output
File Structure
```
demo-changes/
βββ SKILL.md # Skill documentation (loaded by Claude)
βββ README.md # This file
βββ LICENSE # MIT license
βββ config.json # Configuration
βββ lib/
β βββ index.ts # Main exports
β βββ cli.ts # CLI entry point
β βββ config.ts # Configuration loading
β βββ analyze-diff.ts
β βββ record.ts
β βββ narrate.ts
β βββ composite.ts
β βββ playwright-env.ts
β βββ test-location-strategy.ts
βββ temp/ # Temporary files
βββ output/ # Generated demo videos
```
License
MIT
Credits
Created for use with [Claude Code](https://claude.ai/claude-code) and the [skills.sh](https://skills.sh) ecosystem.