القائمة
Create professional demo videos with browser automation (GIF recording), ElevenLabs voiceover generation, and Remotion video composition. Automates the full workflow from script to rendered video.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | mastra-demo |
| description | Create professional demo videos with browser automation (GIF recording), ElevenLabs voiceover generation, and Remotion video composition. Automates the full workflow from script to rendered video. |
Create professional product demo videos by combining:
| Command | Purpose |
|---|---|
/mastra-demo:init <name> | Create new demo project from templates |
/mastra-demo:script | Generate or validate DEMO_SCRIPT.md |
/mastra-demo:record | Record browser actions as GIFs |
/mastra-demo:audio | Generate voiceovers via ElevenLabs |
/mastra-demo:compose | Build Remotion composition |
/mastra-demo:render | Export final video |
/mastra-demo:status | Show progress and next steps |
# 1. Create a new demo project
/mastra-demo:init my-awesome-demo
# 2. Edit DEMO_SCRIPT.md with your content (or generate interactively)
/mastra-demo:script
# 3. Record browser GIFs for each segment
/mastra-demo:record
# 4. Generate voiceovers
/mastra-demo:audio
# 5. Build the video composition
/mastra-demo:compose
# 6. Render the final video
/mastra-demo:render
Demo projects created by this skill have this structure:
my-demo/
├── .env # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # Execution state
├── DEMO_SCRIPT.md # Script with segments
├── package.json # Remotion dependencies
├── public/ # Assets (GIFs, audio)
│ ├── segment-01.gif
│ ├── segment-01.mp3
│ └── ...
├── out/ # Rendered output
│ └── demo.mp4
└── src/
├── Root.tsx
├── DemoVideo.tsx
└── scenes/
DEMO_SCRIPT.md defines your demo:
# Demo: Feature Name
## Narrative
Write the full story as continuous prose first.
This ensures natural flow across segments.
## Settings
fps: 30
voice: Daniel
## Title
text: "Feature Name"
subtitle: "Tagline"
duration: 5s
## Segments
### segment-01-intro
url: http://localhost:4111
voiceover: |
This is the opening narration that connects
naturally to the narrative above.
actions:
- navigate: http://localhost:4111
- wait: 2s
- find: "Sign In button"
- click: found element
## Outro
heading: "Get Started"
command: "npx create-mastra@latest"
links:
- mastra.ai/docs
The key to great demos is narrative flow. Even though we record individual GIFs and audio segments, the voiceover must tell a cohesive story.
Good transitions:
Bad patterns:
Available actions for recording:
| Action | Format | Example |
|---|---|---|
| Navigate | navigate: <url> | navigate: http://localhost:4111 |
| Wait | wait: <time> | wait: 2s |
| Find | find: "<query>" | find: "Sign In button" |
| Click | click: <target> | click: found element |
| Type | type: "<text>" | type: "Hello world" |
| Scroll | scroll: <dir> | scroll: down |
Recommended ElevenLabs settings for professional demos:
For detailed documentation:
references/script-format-reference.md - Complete DEMO_SCRIPT.md formatreferences/gif-recording-reference.md - Browser automation patternsreferences/audio-generation-reference.md - ElevenLabs integrationThe templates/ directory contains Remotion project files: