michel-ui-demo-recorder

Solid

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.

AI & Automation 303 stars 15 forks Updated today Apache-2.0

Install

View on GitHub

Quality Score: 86/100

Stars 20%
83
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 *...

Details

Author
PackmindHub
Repository
PackmindHub/packmind
Created
10 months ago
Last Updated
today
Language
TypeScript
License
Apache-2.0

Integrates with

Playwright · Testing Model Context Protocol · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

record-demo

Produce a short (30-60s) narrated, captioned product demo video with the aidemo engine, via the aidemo MCP server. Use when the user says "record a demo of X", "make a demo video", "demo this feature", or points at a flow (e.g. a shopping flow inside a ChatGPT app) and wants a shareable MP4 with voiceover + captions. The skill authors a storyboard.json (script + per-scene voice/music plan + browser action-spec) and renders it with the engine. Do NOT use for: live screen-sharing, editing an already-rendered MP4, or demos of native/mobile apps (browser only).

1 Updated today
tandryukha
AI & Automation Listed

playwright-demo-videos

Use when recording a polished UI demo/walkthrough video of a web app with Playwright. Covers cursor and subtitle overlay injection, moveAndClick/typeSlowly helpers, pacing values, video output handling, and recording gotchas.

1 Updated 2 days ago
Mixard
AI & Automation Solid

michel-cli-demo-recorder

Produce proof-of-execution demos of the Packmind CLI (`packmind-cli`) as terminal-styled images (colors and formatting preserved exactly), for embedding in a GitHub PR. Renders a crisp master SVG and rasterizes it to a PNG — the PNG is what you embed, because GitHub does not render SVG in PR/issue bodies. Use this whenever a dev task touches the CLI — new command, changed output, new flag, bug fix in terminal rendering — and the PR would benefit from showing the tool actually running. Trigger it when the user says "record a CLI demo", "show the command output", "add a terminal screenshot to the PR", "prove the CLI works", "capture the CLI", "demo the command", or whenever you finish CLI work and are about to open or update a PR. Default to running this for any PR whose diff includes CLI source, even if the user didn't explicitly ask for a screenshot — a CLI PR without a visual of the output is an incomplete deliverable.

303 Updated today
PackmindHub