skills.rest
llmh333
llmh333COMMUNITY
Explore all skills by this author →
GitHub

ui-demo

Record web application walkthroughs as WebM with cursor and subtitle overlays.

Updated Sep 13, 2025
Search Tags:#playwright#screen recording#automation scripting#web tutorial#ui demo#cursor overlay#webm video
One-click install
npx skills add https://github.com/llmh333/employee_management_spring --skill ui-demo-llmh333
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/llmh333/employee_management_spring/tree/main/.gemini/skills/ui-demo
Command: npx skills add https://github.com/llmh333/employee_management_spring --skill ui-demo-llmh333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the friction of manually recording inconsistent walkthrough videos by providing a repeatable, production-grade process for capturing a polished web UI demo.

Core Features & Use Cases

  • Phased demo workflow: Guides you through Discover, Rehearse, then Record to avoid silent selector failures and ensure the script matches the real UI.
  • Playwright video capture with UX extras: Records WebM with a visible cursor overlay and a subtitle bar for clear step-by-step storytelling.
  • Robust interaction helpers: Uses reliable patterns for selector verification, smooth cursor movement, and visible slow typing to make the demo feel natural and professional.
  • When to use: Create tutorial walkthroughs, feature demos, onboarding videos, or documentation screen recordings for web applications.

Quick Start

Ask the AI to generate a Playwright-based demo script for your requested workflow so it runs in rehearsal mode first and then records a WebM with cursor and step subtitles.

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 application walkthroughs to create a UI demo video?▼

You can automate web application walkthroughs by using Playwright to script interactions, validate selectors, and capture deterministic WebM screen recordings with cursor and subtitle overlays.

What is the best way to add a cursor overlay and subtitles to a screen recording?▼

Adding a cursor overlay and subtitles to a screen recording is handled by Playwright video capture helpers, which simulate smooth cursor movement and display a subtitle bar during WebM output.

How does the Discover Rehearse Record process improve web tutorial automation?▼

The Discover Rehearse Record process improves web tutorial automation by validating UI selectors first, rehearsing the script to prevent silent failures, and then recording a polished WebM video.

Can I use Playwright to show natural pacing and slow typing in a web tutorial video?▼

Yes, Playwright can show natural pacing and visible slow typing in a web tutorial video by applying interaction helpers that enforce deliberate delays and smooth cursor movement.

Does this approach require manual editing for feature walkthroughs and onboarding videos?▼

No, this approach eliminates manual editing friction for feature walkthroughs and onboarding videos by generating production-grade WebM output with step-by-step storytelling automatically.

Why do my automated UI demo recordings fail silently during dashboard navigation?▼

Automated UI demo recordings fail silently during dashboard navigation when selectors are not validated, which the Discover phase prevents by verifying UI elements before recording.

Related Skills

Explore More Design & Creative Skills→
aisa-groupaisa-group
90

webapp-testing

Automate Playwright browser testing for local web applications.

Official
Intermediate
digitalsambadigitalsamba
1.9k

ffmpeg

Automates FFmpeg media processing to convert, resize, compress, and extract audio for Remotion projects.

Official
Advanced
myuspmyusp

edge-tts

Convert scripted text into per-scene narration audio with SRT subtitles using Edge TTS.

Community
Advanced
hwj123hwjhwj123hwj
4

wizard

Guide users through interactive bash procedures with configurable stages.

Community
Intermediate