ui-demo

What problem does it solve?

Recording consistent, professional UI demo videos is error-prone because selectors break, cursors teleport, timing is off, and recordings capture unexpected states. This Skill provides a structured three-phase workflow—Discover, Rehearse, Record—plus helper routines to map interactive elements, verify selectors, inject a visible cursor and subtitle bar, and apply human-like pacing so recordings are reliable and presentation-ready.

Core Features & Use Cases

• Three-Phase Workflow: Discover the real DOM and interactive controls, rehearse every step to validate selectors, then record only after verification.
• Helper Utilities: injectCursor, injectSubtitleBar, ensureVisible, moveAndClick, typeSlowly, panElements to create natural mouse movement, visible typing, smooth scrolling, and contextual subtitles.
• Recording Output: Produces WebM videos at 1280x720 with visible cursor overlays, controlled pauses, and reusable script templates.
• Use Case: Create a 2–4 minute product walkthrough to onboard users, demo a new feature for stakeholders, or produce tutorial videos for documentation.

Quick Start

Use the ui-demo skill to record a 1280x720 Playwright demo of the dashboard flow and save the output as demo-feature.webm.