michel-ui-demo-recorderlisted

Record polished UI demo videos and screenshots of a running web app using Playwright MCP — for client deliverables, release notes, feature walkthroughs, or bug repros. Produces an HD WebM video with chapter markers, a mandatory animated cursor overlay, and a mandatory subtitle bar that narrates each step (positioned deliberately so it never masks the UI being demonstrated), plus full-page screenshots at each step. Use this whenever the user asks to "record a demo", "create a screencast", "make a UI walkthrough video", "document this feature with video", "show the client how X works", "capture screenshots of the app", or anything similar — even when the user only says "make a video" or "take screenshots" in the context of a running frontend. Also use it when the user wants to demonstrate a workflow, generate marketing-quality footage of an app, or produce repeatable visual documentation.
PackmindHub/packmind · ★ 292 · AI & Automation · score 85

Install: claude install-skill PackmindHub/packmind

# UI Demo Recorder Produce client-ready UI documentation (HD video + screenshots) from a running web app using the Playwright MCP video tools. ## When to reach for this skill - "Record a demo / walkthrough / screencast / video of the app" - "Take screenshots of the feature working" - "Show the client what X looks like" - "Document this flow visually" - "Make a GIF/video of clicking through Y" The deliverable is always one or more of: - WebM video (1440×900 HD by default), with optional chapter cards - Full-page PNG screenshots at key moments - An animated cursor overlay so viewers can follow what's being clicked (**always present**) - A subtitle bar narrating each step (**always present**) **Non-negotiable:** every video this skill produces MUST carry both the cursor overlay and the subtitle bar. They are injected via `browser_evaluate` (pure DOM), independent of `.mcp.json` — a run that omits them is a defective deliverable, not a stylistic choice. If you cannot inject them, stop and report why rather than shipping a bare recording. ## Why a skill exists for this The Playwright MCP video tools work, but they have several non-obvious gotchas that waste a lot of time if you discover them mid-recording: 1. The video tools live behind an opt-in flag (`--caps=devtools`) and are silently absent if the MCP server wasn't launched with it. 2. There are usually **two different Playwright MCP tool prefixes** in the deferred-tools list (a stock one and a plugin one). They use *