ui-demo

Automate web app demo videos with Playwright and UI overlays.

1|Updated Apr 6, 2026

Search Tags:#automation #playwright #screen capture #video recording #walkthrough #ui demo

Ready to run

npx skills add https://github.com/vrcms/everything-qwen-code --skill ui-demo-vrcms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/vrcms/everything-qwen-code/tree/main/.qwen/skills/ui-demo
Command: npx skills add https://github.com/vrcms/everything-qwen-code --skill ui-demo-vrcms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

This skill solves the challenge of creating consistent, high-quality, and professional-looking screen recordings for web applications without manual effort or inconsistent pacing.

Core Features & Use Cases

Automated Recording: Uses Playwright to record web workflows with a professional cursor overlay and subtitle bar.
Structured Storytelling: Implements a three-phase process (Discover, Rehearse, Record) to ensure recordings are error-free and visually polished.
Use Case: Generate a polished walkthrough video for a new feature release or onboarding tutorial by defining a sequence of actions that the AI executes and records automatically.

Quick Start

Use the ui-demo skill to record a walkthrough of the user registration flow starting from the login page.

Frequently Asked Questions about ui-demo

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

FAQPage Schema

How do I automate web app screen recording for feature walkthroughs?▼

Automating web app screen recording involves using Playwright to drive browser actions while capturing video with injected cursor and subtitle elements. This skill structures the process into Discover, Rehearse, and Record phases to ensure consistent pacing for documentation and onboarding.

What is the best way to create professional UI demo videos without manual screen capture?▼

Creating professional UI demo videos without manual capture is best achieved through browser automation. This skill uses Playwright to execute defined action sequences automatically, injecting custom UI overlays like cursors and subtitle bars to produce visually polished recordings.

Do I need Playwright to generate automated browser walkthrough videos?▼

Yes, you need Playwright to generate automated browser walkthrough videos. It is a required dependency for this skill because it handles the underlying browser automation and video capture required to execute the defined action sequences and inject custom UI overlays.

Can I add subtitle overlays to automated web application recordings?▼

Yes, you can add subtitle overlays to automated web application recordings. During the automated Playwright capture process, the skill injects a custom subtitle bar along with a professional cursor overlay to enhance the visual quality of the final video.

How does the Discover, Rehearse, Record process work for UI documentation videos?▼

The Discover, Rehearse, Record process structures UI documentation video creation into three phases. Discover defines the workflow, Rehearse validates the actions for errors, and Record captures the final automated Playwright screen recording with custom UI overlays.

Are automated Playwright screen recordings suitable for stakeholder presentations?▼

Yes, automated Playwright screen recordings are suitable for stakeholder presentations. The skill produces high-quality, consistent video outputs by automating browser workflows and injecting professional UI overlays, ensuring polished visual storytelling for stakeholders.