ui-demo

Automate UI demo video recording with Playwright and a visible cursor overlay.

86|21|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/Jamkris/everything-gemini-code --skill ui-demo-jamkris
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/Jamkris/everything-gemini-code/tree/main/skills/ui-demo
Command: npx skills add https://github.com/Jamkris/everything-gemini-code --skill ui-demo-jamkris

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Record polished UI demo videos using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.

Core Features & Use Cases

  • Automated UI demo recording with Playwright, including a visible cursor overlay for instructional clarity.
  • Three-phase workflow: Discover -> Rehearse -> Record to ensure script fidelity and rehearsal checks before capture.
  • Output delivers WebM videos with smooth pacing and optional overlays for documentation, onboarding, and feature walkthroughs.

Quick Start

Run the demo script to start recording a UI walkthrough video with a visible cursor overlay.

Frequently Asked Questions about ui-demo

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

FAQPage Schema
How do I record a UI walkthrough video with a visible cursor overlay?

You can record a UI walkthrough video with a visible cursor overlay by using Playwright's video recording combined with an injected cursor. This approach adds natural pacing and storytelling flow for instructional clarity in web application demos.

What is the best way to automate product onboarding videos for web applications?

Automating product onboarding videos is best handled through a three-phase workflow: Discover, Rehearse, and Record. This process ensures script fidelity and rehearsal checks before capturing WebM videos with smooth pacing and optional overlays.

Does Playwright support automated demo recording with storytelling pacing?

Playwright supports automated demo recording by capturing video output while injecting a visible cursor overlay. The recording process applies storytelling pacing and configurable overlays to ensure consistent, repeatable walkthroughs for product teams and educators.

Can I create repeatable UI tutorials for developers without manual screen recording?

Yes, you can create repeatable UI tutorials without manual screen recording by automating the capture with Playwright. The workflow delivers consistent WebM videos featuring a visible cursor overlay and natural pacing for documentation and feature walkthroughs.

What format does Playwright output for UI demo videos?

Playwright outputs WebM videos for UI demo recordings. These videos include smooth pacing, an injected visible cursor overlay for instructional clarity, and optional overlays suitable for onboarding and feature documentation.

How do I ensure script fidelity before capturing a UI walkthrough video?

To ensure script fidelity before capturing a UI walkthrough video, use a Rehearse phase before recording. This three-phase workflow validates the script and performs rehearsal checks to guarantee consistent output before the final capture.