Skip to content
BeClaude

claude-code-demo-creator

New
11GitHub TrendingGeneralby fltman

Claude Code subagent that turns a running app into a narrated demo video — screenshots per feature, ElevenLabs voice-over, ffmpeg assembly. Includes a /demo-video slash command.

Summary

This skill turns a running app into a narrated demo video by capturing screenshots per feature, generating voice-over via ElevenLabs, and assembling the final video with ffmpeg.

  • It's useful for developers who need to quickly create polished product demos, bug reports, or onboarding walkthroughs without manual video editing.

Install & Usage

1
Create the agents directory
mkdir -p .claude/agents
2
Save the agent file

Add the configuration to .claude/agents/claude-code-demo-creator.md

3
Invoke with @agent-name
@claude-code-demo-creator

Use Cases

Generate a narrated walkthrough of a new feature for a stakeholder presentation.
Create a bug reproduction video with step-by-step screenshots and voice explanation.
Produce an onboarding demo for new users showing key app workflows.
Automatically assemble a release demo video from a live development server.
Record a narrated UI tour for a pull request to visually explain changes.
Build a quick tutorial video for internal team training on a new module.

Usage Examples

1

/claude-code-demo-creator record my running app at http://localhost:3000, capture the login and dashboard features, and generate a narrated demo video.

2

Use claude-code-demo-creator to take screenshots of the checkout flow, add ElevenLabs voice-over explaining each step, and output an mp4.

3

/claude-code-demo-creator demo --url http://localhost:8080 --features 'search, results, detail' --voice 'en-US-JennyNeural' --output demo.mp4

View source on GitHub
agent

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is claude-code-demo-creator?

This skill turns a running app into a narrated demo video by capturing screenshots per feature, generating voice-over via ElevenLabs, and assembling the final video with ffmpeg. It's useful for developers who need to quickly create polished product demos, bug reports, or onboarding walkthroughs without manual video editing.

How to install claude-code-demo-creator?

To install claude-code-demo-creator: create the agents directory (mkdir -p .claude/agents), then add the config to .claude/agents/claude-code-demo-creator.md. Finally, @claude-code-demo-creator in Claude Code.

What is claude-code-demo-creator best for?

claude-code-demo-creator is a agent categorized under General. It is designed for: agent. Created by fltman.

What can I use claude-code-demo-creator for?

claude-code-demo-creator is useful for: Generate a narrated walkthrough of a new feature for a stakeholder presentation.; Create a bug reproduction video with step-by-step screenshots and voice explanation.; Produce an onboarding demo for new users showing key app workflows.; Automatically assemble a release demo video from a live development server.; Record a narrated UI tour for a pull request to visually explain changes.; Build a quick tutorial video for internal team training on a new module..