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.