ui-demo

Automate UI demonstration video creation with Playwright scripts and cursor overlays.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/contentbugvideoediting/cb-project-assistant --skill ui-demo-contentbugvideoediting
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/contentbugvideoediting/cb-project-assistant/tree/main/services/cb-s-claude/vendor/s-claude/skills-library/ui-demo
Command: npx skills add https://github.com/contentbugvideoediting/cb-project-assistant --skill ui-demo-contentbugvideoediting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing, producing, and sharing UI demonstration videos manually is time-consuming and error-prone. This skill automates the end-to-end process of creating polished Playwright-based demos with consistent pacing, cursor overlays, and clean visuals, reducing manual overhead.

Core Features & Use Cases

  • Automated recording of UI demos using Playwright, including cursor overlay and pacing controls.
  • Reusable workflow templates for onboarding, feature walkthroughs, and tutorials.
  • Suitable for product demos, training materials, and stakeholder presentations.

Quick Start

Run the UI Demo Video Recorder script to begin generating a demonstration video from a target web application.

Frequently Asked Questions about ui-demo

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

FAQPage Schema
How do I automate UI demo video recording with Playwright?

You can automate UI demo video recording by running structured Playwright scripts that discover the UI, rehearse interaction steps, and record a cursor-overlaid video. This skill handles pacing and visuals to produce polished demonstration videos automatically.

What's the best way to create polished UI demonstration videos for product walkthroughs?

Creating polished UI demonstration videos is best handled by automating the process with reusable workflow templates. This skill uses Playwright to generate cursor-overlaid recordings with consistent pacing, suitable for onboarding, feature walkthroughs, and stakeholder presentations.

Can I reuse Playwright scripts for multiple UI demo recordings?

Yes, you can reuse Playwright scripts for multiple UI demo recordings. The skill supports reusable workflow templates and components, allowing you to replicate consistent pacing, cursor overlays, and clean visuals across different product demos and tutorials.

Do I need to manually edit the cursor movement in automated UI demos?

You do not need to manually edit cursor movement in automated UI demos. The skill automatically generates a cursor overlay during the Playwright script execution, ensuring smooth and consistent pacing throughout the demonstration video.

Does this UI demo recorder handle errors during the Playwright recording process?

The UI demo recorder includes error handling and guardrails to manage issues during the Playwright recording process. These built-in controls ensure consistent results and prevent script failures from disrupting the automated video output.

What types of videos can I produce using automated Playwright screen recording?

Using automated Playwright screen recording, you can produce product demos, training materials, onboarding sequences, and stakeholder presentations. The skill automates the end-to-end creation of these UI demonstration videos with consistent pacing and clean visuals.