From ralph-demo
Generate sprint demo videos using Remotion. Use when the user wants to create a demo video, sprint recap video, presentation video, or any structured video from content like features, screenshots, and bullet points. Trigger on mentions of "demo video", "sprint video", "record a demo", "make a video", or "generate presentation".
How this skill is triggered — by the user, by Claude, or both
Slash command
/ralph-demo:demo-videoThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate sprint demo videos using the Remotion project bundled in this plugin at `${CLAUDE_PLUGIN_ROOT}/remotion/`. This skill walks through collecting content, generating a JSON input file, validating it, previewing, and rendering the final video.
Generate sprint demo videos using the Remotion project bundled in this plugin at ${CLAUDE_PLUGIN_ROOT}/remotion/. This skill walks through collecting content, generating a JSON input file, validating it, previewing, and rendering the final video.
Important: The Remotion project must have its dependencies installed before first use. If node_modules/ doesn't exist in the remotion directory, run cd ${CLAUDE_PLUGIN_ROOT}/remotion && pnpm install first.
If a sprint number was provided as an argument, use it. Otherwise ask:
What sprint number is this for? (or press enter to skip for an ad-hoc video)
Also ask:
Ask the user what they want to demo. For each feature or topic, collect:
Build up the scenes list interactively. Suggest a structure like:
Typical demo video structure:
1. Title slide (auto-generated from sprint info)
2. Feature slides (one per feature demoed)
3. Optional: bullet summary, flow diagram, before/after comparison
4. Outro slide (auto-generated)
Keep asking "Any more features to demo?" until the user says no.
Assemble the collected data into a VideoInput JSON file. The schema supports these scene types:
title - headline, optional subtitle and logofeature - name, description, optional icon and illustrationscreenshot - src path, optional highlights and captionbefore-after - before/after image paths, optional captionbullets - title and items arrayflow - steps array, optional direction and captionoutro - closing text, optional CTA and linksSave to ${CLAUDE_PLUGIN_ROOT}/remotion/inputs/sprint-{N}.json (or ${CLAUDE_PLUGIN_ROOT}/remotion/inputs/{date}-demo.json for ad-hoc videos).
Run the test suite to confirm the JSON is valid:
cd ${CLAUDE_PLUGIN_ROOT}/remotion && pnpm test
If tests fail, fix the JSON and re-run.
Offer to launch Remotion Studio for preview:
cd ${CLAUDE_PLUGIN_ROOT}/remotion && npx remotion studio
Tell the user: "Remotion Studio is running. Open the browser to preview your video. The compositions available are: sprint-demo (16:9), social-square (1:1), social-reel (9:16), and presentation (16:9). Close the studio when you're happy with the preview."
Ask: "Would you like to make any changes?"
If yes, modify the JSON file based on feedback and return to Step 4.
Ask which format(s) to render:
sprint-demo - 1920x1080 (default)social-square - 1080x1080social-reel - 1080x1920presentation - 1920x1080Render the selected format (replace {COMPOSITION} with the chosen composition ID):
cd ${CLAUDE_PLUGIN_ROOT}/remotion && npx remotion render {COMPOSITION} --props inputs/sprint-{N}.json --output out/sprint-{N}-{COMPOSITION}.mp4
Offer batch rendering to additional formats if desired.
Report the output file location and offer to render additional formats.
energetic (default) - Dark background, vibrant accents, spring animations, speed 1.3x| Type | Required Fields | Optional Fields |
|---|---|---|
| title | headline | subtitle, logo, durationSeconds |
| feature | name, description | icon, illustration, durationSeconds |
| screenshot | src | highlights, caption, zoom, durationSeconds |
| before-after | before, after | caption, transition, durationSeconds |
| bullets | title, items | icon, durationSeconds |
| flow | steps (min 2) | direction, caption, durationSeconds |
| outro | text | cta, links, durationSeconds |
{
"sprint": 42,
"date": "2026-03-12",
"team": "Platform Team",
"theme": "energetic",
"format": "16:9",
"scenes": [
{ "type": "title", "headline": "Sprint 42 Demo", "subtitle": "Pipeline Improvements" },
{ "type": "feature", "name": "Batch Processing", "description": "10x faster", "icon": "⚡" },
{ "type": "bullets", "title": "Highlights", "items": ["10x throughput", "40% less config"] },
{ "type": "outro", "text": "Questions? Reach out in #platform-team" }
]
}
npx claudepluginhub cdubiel08/ralph-hero --plugin ralph-demoAuto-generates product demo videos. Analyzes codebase, plans scenes, and generates video via Remotion. Requires explicit `/generate-video` command or parent workflow invocation.
Generates 30-45 second promo video scripts and shot-by-shot storyboards from project PRD. Detects Remotion or Montage-tool for compatible configs.
Generates MP4 walkthrough videos from app screenshots or live sites using Remotion. Adds smooth transitions, zoom effects, text overlays, progress bars, optional voiceover narration for demos, showcases, docs.