ui-demo

Record web application demo videos with Playwright and a cursor overlay.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/sakamoto-family-smile/agent_monorepo --skill ui-demo-sakamoto-family-smile
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/sakamoto-family-smile/agent_monorepo/tree/main/.claude/skills/ecc/ui-demo
Command: npx skills add https://github.com/sakamoto-family-smile/agent_monorepo --skill ui-demo-sakamoto-family-smile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Record polished UI demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.

Core Features & Use Cases

  • Cursor overlay: automatically injects a visible cursor during recordings to enhance viewer orientation.
  • Three-phase workflow: follow Discover -> Rehearse -> Record to ensure high-quality demos.
  • Reusable templates: provide a structured script and pacing guidelines for consistent output across projects.

Quick Start

Use this skill to create a polished, guided demo video of a 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 record a UI demo video with a visible cursor using Playwright?

Recording a UI demo with a visible cursor using Playwright involves injecting a cursor overlay into the video capture. This skill provides pacing guidelines and a structured workflow to ensure polished, guided walkthroughs of web applications.

What is the workflow for creating polished web app walkthrough videos?

Creating polished web app walkthrough videos requires a three-phase workflow: Discover, Rehearse, and Record. This process ensures high-quality demo videos by applying pacing guidelines and storytelling flow to your screen recording.

Can I use Playwright to automate screen recording for onboarding tutorials?

Yes, you can use Playwright to automate screen recording for onboarding tutorials. The skill utilizes Playwright's video recording features to produce demos and tutorials with an injected cursor overlay for clear viewer orientation.

Do I need a specific environment setup to generate demo videos with Playwright?

Generating demo videos with Playwright requires a Playwright-enabled setup and a defined recording plan. This environment is necessary to execute the discovery, rehearsal, and recording phases that produce the final guided video output.

What is the best way to add a cursor overlay to automated web app recordings?

Adding a cursor overlay to automated web app recordings is handled by injecting a visible cursor during the Playwright capture. This approach enhances viewer orientation and applies storytelling flow to create professional demonstration videos.