ui-demo

Topics in the source

• UI Demo Video Recorder
• When to Use
• Three-Phase Process
• Phase 1: Discover
• Why
• How
• What to look for
• Output

Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow. User asks for a "demo video", "screen recording", "walkthrough", or "tutorial" User wants to showcase a feature or workflow visually User needs a video for documentation, onboarding, or stakeholder presentation Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording. -- Before writing any script, explore the target pages to understand what is actually there. You cannot script what you have not seen. Fields may be not , dropdowns may be custom components not , and comment boxes may support @mentions or #tags. Assumptions break recordings silently. Navigate to each page in the flow and dump its interactive elements: Form fields: Are they , , custom dropdowns, or comboboxes? Select options: Dump option values AND text. Placeholders often have value="0" or value="" which looks non-empty. Use Array.from(el.options).map(o => ({ value: o.value, text: o.text })). Skip options where text includes "Select" or value is "0". Rich text: Does the comment box support @mentions, #tags, markdown, or

This is an excerpt. Refer to the complete source and its current requirements.