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.
npx skills add mturac/everything-openai-codex --skill ui-demo --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: ```javascript // 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
- When to Use
- Three-Phase Process
- Phase 1: Discover
- Why
- How
- What to look for
- Output
- Phase 2: Rehearse
- Rehearsal script structure
- When rehearsal fails
- Phase 3: Record
- Recording Principles
- Script Template
- Checklist Before Recording
Phase 2: Rehearse node demo-script.cjs --rehearse Phase 3: Record node demo-script.cjs
What does the ui-demo skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill ui-demo --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.