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 curso
1---2name: ui-demo3description: Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen…4---56# skills/ui-demo/SKILL.md
U
SKILL.mdAgent skill
Transport
File
Status
Listed
SKILL.md
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
shterminal
1npx skills add affaan-m/ecc --skill ui-demo -a cursor -y
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
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.
Download skills/ui-demo/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does ui-demo live?
The publisher keeps it at https://github.com/affaan-m/ecc.
Which agents can use ui-demo?
Claude, Cursor, Codex, and Grok Build can read a SKILL.md you add from the publisher's repository. Grok Bot installs it when you send the skill's GitHub folder link in a chat.
From the publisher
SKILL.md
name
ui-demo
description
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.
metadata
origin: ECC
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:
// Run this for each page in the flow BEFORE writing the demo script
const fields = await page.evaluate(() => {
const els = [];
document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
if (el.offsetParent !== null) {
els.push({
tag: el.tagName,
type: el.type || '',
name: el.name || '',
placeholder: el.placeholder || '',
text: el.textContent?.trim().substring(0, 40) || '',
contentEditable: el.contentEditable === 'true',
role: el.getAttribute('role') || '',
});
}
});
return els;
});
console.log(JSON.stringify(fields, null, 2));
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:
/purchase-requests/new:
- Budget Code: <select> (first select on page, 4 options)
- Desired Delivery: <input type="date">
- Context: <textarea> (not input)
- BOM table: inline-editable cells with span.cursor-pointer -> input pattern
- Submit: <button> text="Submit"
/purchase-requests/N (detail):
- Comment: <input placeholder="Type a message..."> supports @user and #PR tags
- Send: <button> text="Send" (disabled until input has content)
Phase 2: Rehearse
Run through all steps without recording. Verify every selector resolves.
Why
Silent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.
How
Use ensureVisible, a wrapper that logs and fails loudly: