Universal demo video creator for skills, agents, plugins, tutorials, CLI commands, and code walkthroughs. Generates scripts, storyboards, VHS terminal recordings, and Remotion video compositions with task-tracked production phases. Use when producing video showcases, marketing content, or terminal recordings.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
demo-producer
license
MIT
compatibility
Claude Code 2.1.220+.
description
Universal demo video creator for skills, agents, plugins, tutorials, CLI commands, and code walkthroughs. Generates scripts, storyboards, VHS terminal recordings, and Remotion video compositions with task-tracked production phases. Use when producing video showcases, marketing content, or terminal recordings.
Wait keyword — supersedes Sleep N with a condition-based wait (Wait "prompt>" blocks until the given string appears). Use Wait over Sleep for any prompt that can appear at variable times.
ScrollUp N / ScrollDown N — explicit scroll steps inside a recorded session; useful for demonstrating TUI apps and long less-style output.
Keep existing Sleep N only for fixed visual pacing where no event is available.
Quick Start
/ork:demo-producer # Interactive mode - asks what to create
/ork:demo-producer skill explore # Create demo for a skill
/ork:demo-producer plugin ork # Create demo for a plugin
/ork:demo-producer tutorial "Building a REST API"# Custom tutorial
/ork:demo-producer --live 4 # Live preview via /ork:dev --live (4-hour public funnel)
--live mode (M127 #1565)
--live N is a thin wrapper around /ork:dev --live N: it boots the dev stack
behind portless --funnel (publicly exposed via Tailscale Funnel), records an
expiry of N hours into .claude/state/live-demos.jsonl, and prints a public
URL plus <iframe> snippet for embedding in customer emails or docs pages.
/ork:doctor warns about live demos older than 24 hours so they don't sprawl.
Tear down with /ork:dev stop. Tailscale CLI must be installed (only required
behind --live — not for static demo recording modes).
CRITICAL: Task Management is MANDATORY (CC 2.1.16)
BEFORE doing ANYTHING else, create tasks to track progress:
# 1. Create main task IMMEDIATELY
TaskCreate(
subject="Demo Producer: {topic}",
description="Creating polished demo video for content showcase",
activeForm="Producing demo for {topic}"
)
# 2. Create subtasks for each production phase
TaskCreate(subject="Content analysis", activeForm="Analyzing content for demo")
TaskCreate(subject="Script & storyboard", activeForm="Generating script and storyboard")
TaskCreate(subject="Record & compose", activeForm="Recording terminal and composing video")
TaskCreate(subject="Final output", activeForm="Rendering final video outputs")
# 3. Set dependencies for sequential phases
TaskUpdate(taskId="3", addBlockedBy=["2"])
TaskUpdate(taskId="4", addBlockedBy=["3"])
TaskUpdate(taskId="5", addBlockedBy=["4"])
# 4. Update status as you progress
TaskUpdate(taskId="2", status="in_progress") # When starting
TaskUpdate(taskId="2", status="completed") # When done
Supported Content Types
Type
Source
Example
skill
skills/{name}/SKILL.md
/ork:demo-producer skill commit
agent
agents/{name}.md
/ork:demo-producer agent debug-investigator
plugin
plugins/{name}/plugin.json
/ork:demo-producer plugin ork
marketplace
Marketplace install flow
/ork:demo-producer marketplace ork
tutorial
Custom description
/ork:demo-producer tutorial "Git workflow"
cli
Any CLI tool
/ork:demo-producer cli "npm create vite"
code
Code walkthrough
/ork:demo-producer code src/api/auth.ts
Interactive Flow
When invoked without arguments, asks 4 questions:
Question 1: Content Type
What type of demo do you want to create?
○ Skill - OrchestKit skill showcase
○ Agent - AI agent demonstration
○ Plugin - Plugin installation/features
○ Tutorial - Custom coding tutorial
○ CLI Tool - Command-line tool demo
○ Code Walkthrough - Explain existing code
Question 2: Format
What format(s) do you need?
☑ Horizontal (16:9) - YouTube, Twitter
☑ Vertical (9:16) - TikTok, Reels, Shorts
☐ Square (1:1) - Instagram, LinkedIn
Question 3: Style
What style fits your content?
○ Quick Demo (6-10s) - Fast showcase, single feature
○ Standard Demo (15-25s) - Full workflow, multiple steps
○ Tutorial (30-60s) - Detailed explanation, code examples
○ Cinematic (60s+) - Story-driven, high polish
○ Scrapbook (15-35s) - Warm paper, fast cuts, social proof collage (Anthropic style)
Question 4: Audio
Audio preferences?
○ Music Only - Subtle ambient background
○ Music + SFX - Background + success sounds
○ Silent - No audio
Pipeline Architecture
Load details: Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/references/demo-pipeline.md") for the full pipeline diagram, generation commands, and output structure.
Four template architectures for different demo styles. Load Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/references/template-system.md") for detailed configuration and the SkillDemoConfig interface.
Template
Use Case
Duration
Key Feature
TriTerminalRace
Complexity comparisons
15-20s
3-panel split, color-coded difficulty
ProgressiveZoom
Tutorials, walkthroughs
20-30s
Zoom transitions, layered reveals
SplitThenMerge
Before/after, transformations
15-25s
Split screen -> unified merge
ScrapbookDemo
Product launches, social proof
15-35s
Warm paper aesthetic, fast cuts
Content type templates (skill, agent, plugin, tutorial, cli, code) are mapped in Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/references/skill-category-mapping.md").
Remotion Composition
Load details: Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/references/remotion-composition.md") for folder structure, adding new compositions, and format variant prefixes.
Compositions organized under Production/ by format (Landscape, Vertical, Square) and skill category.
Customization Options
Visual Themes
Dark mode (default): Dark backgrounds, neon accents
Light mode: Clean whites, subtle shadows
Terminal: Pure terminal aesthetic
Cinematic: High contrast, dramatic lighting
Scrapbook: Warm paper (#F0F0E8), serif typography, fast cuts, mixed media collage
Audio Presets
Ambient: Subtle background, no SFX
Tech: Electronic beats, UI sounds
Corporate: Professional, clean
Energetic: Upbeat, fast-paced
PushNotification on Completion (CC 2.1.110+)
VHS recording and Remotion rendering commonly take 10–45 min per video, and full multi-variant productions (landscape + vertical + square) can exceed an hour. After all output files are written and verified, call PushNotification so the user knows the video is ready for review.
Full rule: Read("${CLAUDE_PLUGIN_ROOT}/skills/chain-patterns/rules/push-notification-on-completion.md").
Best Practices
Keep it focused - One feature/concept per video
Show, don't tell - Demonstrate actual usage
Use real data - Show actual command outputs
Include context - Brief setup before the demo
End with CTA - Always include install command
Terminal Simulation Patterns
Load details: Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/references/terminal-simulation.md") for TypeScript patterns: pinned header + scrolling content, agent color palette, and task spinner animation.
Slop Avoidance
Load details: Read("${CLAUDE_PLUGIN_ROOT}/skills/demo-producer/rules/slop-avoidance.md") for text density rules, timing compression, common slop patterns, and hook styles.
Core rule: If content doesn't earn its screen time, cut it.
