ui-recorder

Claude Code plugin that turns a natural-language request into a polished, branded, narrated UI video demo.

"record a demo of linear.app showing the hero and scrolling to features" → demo.mp4

Status

v0.2.0 — macOS 14+ Apple Silicon. Pipeline:

1. Plan — plan-builder agent inspects the target page (WebFetch + cheerio → optional browser MCP → Playwright dry-run) and produces a verified browse-plan.json with confidence-rated selectors. Zero blind clicks if any tier succeeds.
2. Record — local-headless Playwright session captures recording.mp4 + per-action timing.
3. Narrate — Piper offline TTS (auto-shrink to fit timeline) or use the agent-drafted voiceover.
4. Edit — edit-planner agent builds camera-config.json (segments, keyframes, subtle camera motion).
5. Render — Remotion produces a 1920×1080 @ 60fps MP4 with cursor glow, captions, and 2× playback.

Two confirmation gates (after Plan, after Edit) keep you in control.

Install

/plugin marketplace add procoders/claude-ui-recorder
/plugin install ui-recorder@claude-ui-recorder

First run of any record command triggers setup.sh (~2-3 min, ~1.4 GB):

• npm install in plugin data dir
• Playwright chromium download
• Python venv with piper-tts
• Piper voice en_US-ryan-high download

Usage

In Claude Code:

/ui-recorder:ui-recorder record a demo of linear.app showing the hero and scrolling to features

Or just describe what you want — the skill auto-triggers on phrases like "record a demo of …", "make a video of …", "screen demo".

The skill walks you through:

1. Gate 1 (Plan) — review verified selectors per action; approve / edit / drop / regenerate.
2. Gate 2 (Edit) — review segments, total duration, and camera motion before render.

Output lands at ~/.claude/plugins/data/ui-recorder/workspace/{slug}/demo.mp4.

What's included

Skill

• ui-recorder — orchestrates the 5-stage pipeline.

Agents

• plan-builder — verifies DOM selectors via tiered inspection before recording.
• edit-planner — assembles camera-config.json from recording moments + alignment.

Scripts

• plan-build, record, narrate, render, doctor — invocable via the skill or directly.

Requirements

• macOS 14+ Apple Silicon (M1/M2/M3/M4)
• Node 20+ arm64 (not Rosetta)
• Python 3.9+
• ~1.4 GB disk for first install
• Linux x64 supported in principle but not tested in v0.2.0
• Windows: not supported (bash + arm64-only piper binaries)

Diagnostics

node "${CLAUDE_PLUGIN_ROOT}/scripts/doctor.mjs"

Lists missing deps with the exact setup.sh step that would install them.

What v0.2 does NOT support

• Recorders other than local-headless (no local-headed, steel)
• TTS providers other than Piper (no ElevenLabs)
• Aspect ratios other than 16:9
• Authenticated flows, iframes
• Brand auto-extraction from screenshots

License

MIT — see LICENSE.