Records agent-driven browser sessions as captioned, trimmed WebM demo videos.
npx skills add https://github.com/dxos/dxos --skill recording-demos
Please help me install this Agent Skill. Skill: recording-demos Source: https://github.com/dxos/dxos/tree/main/.agents/skills/recording-demos Command: npx skills add https://github.com/dxos/dxos --skill recording-demos
Demonstrating a feature in a running app requires driving the UI step by step and capturing the result, but Playwright specs fix every step up front and cannot perform steps that have no underlying operation. This Skill lets an agent drive the real app one gesture at a time, record the session as a captioned video, and trim the dead air so the output is ready to share.
.mdl QA flow such as the chess plugin walkthrough, caption each step from the spec, trim the 13-minute raw recording down to its minutes of motion, and attach the resulting WebM and screenshots to a PR.Ask the agent to start the composer app, launch the recording driver, walk through the feature's steps with captions, then trim and send the finished demo video.
High-intent search queries and answers about installing and using this skill.
Start the app, launch driver.mjs with a port, target URL, and output directory, then issue one HTTP op per gesture such as click, fill, or drag. Call the stop op to close the recording context, which is what writes the WebM video file.
Use a Playwright spec for repeatable regression tests with assertions that run in CI. Recording a demo suits flows where the next gesture depends on what rendered, steps have no runtime operation behind them, or the output is a video for a human to watch.
Run trim-static.mjs with --report first to see motion versus still time, then re-run with --max-static and --caption-hold to cap each pause. It compares frames on a strided Y-plane sample so small moving objects like dragged pieces are not mistaken for stillness.
The ffmpeg build bundled with Playwright is stripped and lacks rawvideo, PNG decoding, and the select/concat filters, so frames cannot be fed back into it. Install a full ffmpeg via apt-get or point FFMPEG_PATH at a complete build.
A video cannot be embedded in a PR body because the proxy escapes video tags and GitHub's sanitizer strips them. Publish the WebM to shared artifact hosting and link it, or commit a contact sheet of frames and embed a SHA-pinned raw image URL.
Drop targets built on pragmatic-drag-and-drop only arm after observing movement, so a single synthetic jump or dragTo never fires canDrop. The driver's drag op moves in stepped increments, and the target element must be large enough, such as a full board rather than a small card.
compozyRecord choreographed browser demo videos with Playwright, cursor overlay, and camera zooms.
nicolehaugenEmbeds Playwright screenshots into GitHub PR descriptions.
divad12Automate browser-based end-to-end UI testing with Playwright MCP and report PASS/FAIL/CONCERN per scenario.
cosmicstack-labsWrite stable end-to-end tests for web apps using Playwright and Cypress.