/demo-producer

name: demo-producer
license: MIT
compatibility: "Claude Code 2.1.277+."
description: "Demo videos for skills, plugins, CLIs and code walkthroughs: scripts, storyboards, VHS terminal recordings, Remotion. Use when producing a showcase or marketing video."
argument-hint: "[topic-or-feature]"
user-invocable: false
allowed-tools: "AskUserQuestion Bash Read Write Edit Grep Glob Agent TaskCreate TaskUpdate PushNotification"
context: inherit
targets:
  - tool: "vhs"
    version: ">=0.11.0"
  - library: "remotion"
    version: ">=4.0.448"
effort: low
model: haiku
metadata:
  category: document-asset-creation
  version: "1.1.0"
  author: "OrchestKit"
  complexity: "low"
  tags: "demo, video, marketing, vhs, remotion, terminal, showcase, tutorial"

Demo Producer

Universal demo video creation for any content type.

> **Tool versions (2026-Q2):** VHS >= 0.11, Remotion >= 4.0.448. VHS 0.11 added: > > - **`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

demo-producer                    # Interactive mode - asks what to create
demo-producer skill explore      # Create demo for a skill
demo-producer plugin ork     # Create demo for a plugin
demo-producer tutorial "Building a REST API"  # Custom tutorial
demo-producer --live 4           # Live preview via dev --live (4-hour public funnel)

--live mode (M127 #1565)

`--live N` is a thin wrapper around `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.

demo-producer --live 4

# Internally runs:
dev --live 4
# → public URL: https://app.your-tailnet.ts.net
#   iframe: <iframe src="..." />
#   expires: 2026-05-03T20:00Z

`doctor` warns about live demos older than 24 hours so they don't sprawl. Tear down with `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 | `demo-producer skill commit` | | `agent` | agents/{name}.md | `demo-producer agent debug-investigator` | | `plugin` | plugins/{name}/plugin.json | `demo-producer plugin ork` | | `marketplace` | Marketplace install flow | `demo-producer marketplace ork` | | `tutorial` | Custom description | `demo-producer tutorial "Git workflow"` | | `cli` | Any CLI tool | `demo-producer cli "npm create vite"` | | `code` | Code walkthrough | `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)
○ Code-drawn (15-40s) - Every frame drawn by a storyboard page; skills, agents, gates as moving pictures

Question 4: Audio

Audio preferences?

○ Music Only - Subtle ambient background
○ Music + SFX - Background + success sounds
○ Silent - No audio

Pipeline Architecture

> Load details: `Read("references/demo-pipeline.md")` for the full pipeline diagram, generation commands, and output structure.

Content Detector -> Content Analyzer -> Script Generator -> Terminal Script -> VHS Recorder -> Remotion Composer -> Final Outputs (horizontal/vertical/square).

Code-drawn mode

> Load details: `Read("references/code-drawn-mode.md")` for the contract, the pipeline and what the compare can and cannot catch.

The storyboard page is the renderer: `drawFrame(g, t)` draws every frame, the owner approves the page, and the same code renders the film. Freeze the approved page in `approved-design/`, then:

python3 scripts/code-drawn/make-film.py storyboard/index.html