ui-demo

Record polished UI demo videos of web applications using Playwright.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill ui-demo-phoenicisf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/ui-demo
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill ui-demo-phoenicisf

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

  • Three-phase production workflow: Discover, Rehearse, Record to ensure reliable demos.
  • Cursor overlay and pacing controls to produce professional, reader-friendly walkthroughs.
  • Script templates and usage guidance for reusable UI demo recordings.

Quick Start

Run the demo script to record a polished Playwright-based UI walkthrough 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 demo video with Playwright?▼

You can record a UI demo video with Playwright using an automated recording pipeline that captures screen recordings with an injected cursor overlay. It includes pacing controls and a reusable script to guide the walkthrough workflow.

Can I add a cursor overlay to screen recordings for a web application?▼

Yes, you can add a cursor overlay to screen recordings by using a Playwright-based recording pipeline. The pipeline injects a visible cursor overlay into the video output to create professional, reader-friendly walkthroughs.

What is the best way to automate a walkthrough video for a web app?▼

The best way to automate a walkthrough video is using a three-phase production workflow: Discover, Rehearse, and Record. This approach ensures reliable demos by combining pacing controls with reusable script templates.

Does Playwright support pacing controls for automated demo videos?▼

Playwright supports pacing controls for automated demo videos when paired with a specialized recording pipeline. This setup provides natural pacing and a storytelling flow to make UI walkthroughs more readable.

Do I need a script template to create a Playwright screen recording?▼

You need a script template to create a consistent Playwright screen recording. The template provides reusable usage guidance and defines the recording workflow, ensuring reliable UI demo capture across multiple runs.