Polished UI Demo Recorder

•
215k
•

Records high-quality, professional web application walkthroughs and tutorial videos using Playwright with natural cursor movement and subtitles.

The ui-demo skill automates the creation of polished web application demonstrations by orchestrating a rigorous three-phase process: Discover, Rehearse, and Record. It enhances standard Playwright recordings by injecting a visible cursor overlay, adding synchronized subtitles, and implementing natural pacing to ensure every video feels professional and human-like. This skill is ideal for developers needing to generate high-fidelity documentation, onboarding videos, or stakeholder presentations without the manual overhead of traditional screen recording software.

Key Features

01Rigorous three-phase workflow (Discover, Rehearse, Record) to eliminate recording errors.
02Automatic selector verification during rehearsal to ensure flawless execution.
03Dynamic subtitle injection for clear, step-by-step storytelling and context.
04214,597 GitHub stars
05Intelligent pacing controls with human-like typing speeds and smooth scrolling.
06Custom SVG cursor overlay for natural, high-visibility mouse movements.

Use Cases

01Recording reproducible UI bug reports or workflow validations for engineering teams.
02Creating professional-looking feature demos for stakeholder presentations or social media.
03Generating automated walkthroughs for product documentation or user onboarding.