🎯

demo

🎯Skill

from jaobrown/demo-changes

VibeIndex|
What it does

demo skill from jaobrown/demo-changes

demo

Installation

Quick InstallInstall with npx
npx skills add jaobrown/demo-changes
git cloneClone repository
git clone https://github.com/jaobrown/demo-changes .claude/skills/demo
πŸ“– Extracted from docs: jaobrown/demo-changes
5
-
Last UpdatedJan 27, 2026

Skill Details

SKILL.md

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:

  1. Analyze your git diff for UI-relevant changes
  2. Generate a Playwright test to demonstrate the changes
  3. Create a narration script
  4. Record the screen while running the test
  5. Generate AI voice narration (if API key is set)
  6. 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

  1. Diff Analysis - Parses git diff to identify UI-relevant file changes (.tsx, .jsx, .css, etc.)
  2. Test Generation - Creates a Playwright test that navigates to affected routes and interacts with changed components
  3. Script Generation - Writes natural-sounding narration synced to test steps
  4. Recording - Runs Playwright with video capture enabled
  5. Narration - Calls ElevenLabs API to generate voice-over audio
  6. 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.