ui-demo

Automate browser-based screen recording with visible cursor and storytelling pacing.

2|Updated Jun 30, 2026
One-click install
npx skills add https://github.com/Canhada-Labs/ceo-orchestration --skill ui-demo-canhada-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/Canhada-Labs/ceo-orchestration/tree/main/.claude/skills/domains/devrel/skills/ui-demo
Command: npx skills add https://github.com/Canhada-Labs/ceo-orchestration --skill ui-demo-canhada-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of creating polished demo videos of web applications, ensuring a professional presentation with cursor tracking, storytelling flow, and accurate on-screen steps.

Core Features & Use Cases

  • Professional Demo Videos: Produce high-quality videos suitable for documentation, onboarding, or stakeholder showcases.
  • Cursor Tracking & Subtitles: Show user interaction with a visible cursor and on-screen step subtitles for clear guidance.
  • Three-Phase Method: A systematic approach to discovery, rehearsal, and recording to ensure accuracy and efficiency.
  • Use Case: Create a step-by-step tutorial video for a complex web application or showcase a new feature visually to the team.

Quick Start

Record a web application demo with the ui-demo skill by navigating the application and following the provided instructions.

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 screen recording with cursor tracking?

Automate web application screen recording with cursor tracking by using Playwright browser automation to script user interactions. This approach ensures professional, story-driven demo videos with visible cursors and pacing for documentation or feature showcases.

What's the best way to create professional demo videos for web applications?

Creating professional demo videos for web applications is best achieved through an automated three-phase method: discovery, rehearsal, and recording. This ensures accurate on-screen steps, storytelling flow, and visible cursor tracking suitable for stakeholder showcases.

Does Playwright support visible cursor recording for browser automation?

Playwright supports visible cursor recording for browser automation by driving interactive element discovery and precise control. It enables systematic pacing and on-screen subtitles, ensuring accurate, story-driven web application demonstrations for training workflows.

Can I add subtitles and storytelling pacing to web app demo videos?

You can add subtitles and storytelling pacing to web app demo videos by automating the recording process with Playwright. This provides clear on-screen guidance and a structured narrative flow, ideal for complex onboarding tutorials.

Do I need Playwright to automate web application demo video recording?

Playwright is required to automate web application demo video recording. It provides the necessary browser automation capabilities for interactive element discovery, precise control, and story-driven pacing to produce polished feature showcases.