Record Playwright web application demo videos with cursor and subtitle overlays.
npx skills add https://github.com/Maelwalser/claude-config --skill ui-demo
Please help me install this Agent Skill. Skill: ui-demo Source: https://github.com/Maelwalser/claude-config/tree/main/skills/ui-demo Command: npx skills add https://github.com/Maelwalser/claude-config --skill ui-demo
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.
Use the ui-demo skill to record a 1280x720 Playwright demo of the dashboard flow and save the output as demo-feature.webm.
High-intent search queries and answers about installing and using this skill.
Recording a UI demo video with Playwright involves injecting a visible cursor and subtitle bar into the DOM, applying human-like typing delays, and outputting a 1280x720 WebM file. This process uses a structured workflow to map selectors and verify pacing before capturing the final recording.
Playwright demo recordings often have teleporting cursors and broken selectors because interactive elements are not properly mapped or verified beforehand. Applying a rehearsal phase to validate DOM selectors and injecting a simulated cursor overlay ensures natural mouse movement and reliable recording states.
Automating a product walkthrough video for onboarding requires a three-phase workflow: discover interactive controls, rehearse steps to verify selectors, and record. Using helper utilities to inject cursor overlays and control typing delays produces a polished 2-4 minute WebM tutorial.
Yes, Playwright can add subtitle overlays and smooth scrolling to web application recordings by injecting custom DOM elements. Helper utilities like injectSubtitleBar and panElements create contextual subtitles and natural scrolling while capturing the session at 1280x720 resolution.
Playwright video automation supports controlled typing delays for stakeholder demos using the typeSlowly helper utility. This injects human-like pacing into text entry, ensuring the recording captures natural input timing and visible cursor movement for presentation-ready output.
Limitations of using Playwright to record tutorial videos include the need to validate DOM selectors during a rehearsal phase to prevent failed recordings. The output is constrained to WebM format at 1280x720, requiring injected overlays to simulate a visible cursor and natural pacing.
mkalhitti-cloudAutomate end-to-end testing of local web applications with Playwright.
LeooooooowConvert video files to MP4/H.264 or WebM/VP9 with optimized bitrate and resolution.
phoenicisfRecord polished UI demo videos of web applications using Playwright.
vrcmsAutomate web app demo videos with Playwright and UI overlays.
