ui-demo

The `ui-demo` skill is designed to help users create professional and polished UI demo videos of web applications using Playwright. It addresses the challenge of accurately capturing workflows and interactive elements in web apps, ensuring that recorded videos are both informative and visually appealing. By injecting a visible cursor and following natural pacing, the skill enhances storytelling, making complex web interactions easier to understand and follow.

This skill offers a structured three-phase process: Discover, Rehearse, and Record. In the Discover phase, it identifies and maps interactive elements on each page, such as input fields, buttons, dropdowns, and rich text areas. The Rehearse phase allows users to test and verify that all selectors and interactions function as expected, preventing errors in the final recording. Finally, the Record phase captures the demo with smooth transitions, visible cursor movements, and professional pacing. These features ensure that the output WebM videos are suitable for documentation, onboarding, or presentations.

Target users include product managers, developers, technical writers, and anyone who needs to showcase web application features or workflows visually. Use cases range from creating tutorial videos for new software features to walkthroughs for stakeholders, demonstrating form interactions, or capturing dynamic content in web applications. This skill streamlines the video creation process while maintaining accuracy and professionalism.