michel-ui-demo-recorder
SolidRecord 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.
Install
Quality Score: 86/100
Skill Content
Details
- Author
- PackmindHub
- Repository
- PackmindHub/packmind
- Created
- 1 years ago
- Last Updated
- today
- Language
- TypeScript
- License
- Apache-2.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
demo-recorder
Discover a frontend app's key features, plan demo scenarios with the user, and record narrated demo videos using Playwright — per-feature video clips plus a timestamped narration script ready for TTS voiceover. Use this whenever the user wants demo videos, screen recordings, a product tour, feature walkthrough videos, marketing/sales recordings of an app, "record the app", "make a demo", "showcase the features", or "visual e2e tests" whose real goal is watchable output — even if they phrase it as testing rather than recording.
screen-recorder
Records short videos of specific page sections using Playwright's `recordVideo` API, plays scripted interactions (hover, click, focus, scroll, keypress), crops the output to a target element via `ffmpeg`, and saves a `.webm` (or `.mp4` / `.gif`) artifact to `.agent/recordings/`. Use when a still screenshot cannot prove the change — verifying a View Transition, a Motion `layout` morph, a hover stagger, a scroll-driven timeline, an `@starting-style` entry, or any multi-frame interaction. Called by the `animations` skill to validate a generated animation, by the `ux` skill to capture an interaction the `pr-reviewer` cannot read from code, and by the `pr-reviewer` agent to produce a local clip it can inspect on motion-heavy diffs. Triggers on "record this interaction", "capture this animation", "video of this section", "validate the transition visually", "screen recording", "/screen-recorder".
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).