ui-demo

Record web application demo videos with Playwright using a visible cursor overlay.

4|7|Updated Apr 9, 2026
One-click install
npx skills add https://github.com/arbisoft/ai-skillforge --skill ui-demo-arbisoft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/arbisoft/ai-skillforge/tree/main/Claude/skills/ui-demo
Command: npx skills add https://github.com/arbisoft/ai-skillforge --skill ui-demo-arbisoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Record polished UI demo videos of web applications using Playwright's video recording with a visible cursor overlay, natural pacing, and a storytelling flow to improve clarity and engagement.

Core Features & Use Cases

  • Three-phase workflow: Discover, Rehearse, Record to ensure reliable recordings.
  • Cursor overlay and pacing to produce professional, viewer-friendly demos.
  • Use cases include demos, walkthroughs, tutorials, onboarding materials, and stakeholder presentations.

Quick Start

Run the Playwright-based demo script on the target web app and follow the three-phase flow to generate a ready-to-share demo video.

Frequently Asked Questions about ui-demo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate recording UI demo videos for web applications?

Playwright automates UI demo video recording by executing a three-phase workflow: Discover, Rehearse, and Record. This process captures web applications with deterministic timing, a visible cursor overlay, and storytelling pacing to produce professional walkthroughs.

What is the best way to add a cursor overlay to Playwright screen recordings?

The best way to add a cursor overlay is using an automated Playwright demo recording workflow that injects a visible cursor during the recording phase. This creates professional, viewer-friendly demos with natural pacing for tutorials and onboarding materials.

Do I need Playwright installed to record automated UI walkthroughs?

Yes, Playwright is required to record automated UI walkthroughs. You need Playwright installed, a target web application URL, and a minimal orchestrating script to execute the deterministic recording phases across desktop and responsive layouts.

Can I use automated demo video recording for responsive web layouts?

Yes, automated UI demo video recording applies to both desktop and responsive layouts. The Playwright-based workflow captures feature showcases and onboarding materials across different viewport sizes using deterministic timing and storytelling pacing.

How does the three-phase Discover Rehearse Record workflow ensure reliable demo recordings?

The three-phase workflow ensures reliable demo recordings by discovering elements, rehearsing interactions, and then recording with deterministic timing. This structured approach prevents flakiness and produces consistent, polished UI demo videos for stakeholder presentations.