Agent skill · creative production · affaan-m
ui-demo
Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.
Why this skill is useful
Provides specific Playwright commands and a structured process for creating polished UI demo videos that the AI wouldn't reliably generate on its own.
What it needs
Requires playwright installed locally. About 8k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
UI Demo Video Recorder Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow. When to Use 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 Three-Phase Process Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording. --- Phase 1: Discover Before writing any script, explore the target pages to understand what is actually there. Why You cannot script what you have not seen. Fields may be <input> not <textarea>, dropdowns may be custom components not <select>, and comment boxes may support @mentions or #tags. Assumptions break recordings silently. How Navigate to each page in the flow and dump its interactive elements: What to look for Form fields: Are they <select>, <input>, 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 emoji? Check placeholder text. Required fields: Which fields block form submission? Check required, in labels, and try submitting empty to see validation errors. Dynamic content: Do fields appear after other fields are filled? Button labels: Exact text such as "Submit", "Submit Request", or "Send". Table column headers: For table-driven modals, map each input[type="number"] to its column header instead of assuming all numeric inputs mean the same thing. Output A field map for each page, used to write correct selectors in the script. Example: --- Phase 2: Rehearse Run through all steps without recording. Verify every selector resolves. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/ui-demo--751f33