skills.rest
himanshu231204
himanshu231204COMMUNITY
Explore all skills by this author →
Website𝕏@openagentdevGitHub

ui-demo

Record polished UI demo videos using Playwright and a Discover-Rehearse-Record workflow.

2|Updated May 11, 2026
Search Tags:#browser automation#playwright#tutorial#video recording#walkthrough#ui demo
One-click install
npx skills add https://github.com/himanshu231204/AI_Research_agent --skill ui-demo-himanshu231204
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-demo
Source: https://github.com/himanshu231204/AI_Research_agent/tree/main/.opencode/skills/ui-demo
Command: npx skills add https://github.com/himanshu231204/AI_Research_agent --skill ui-demo-himanshu231204

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious, error-prone work of manually recording, editing, and polishing UI demo videos, saving hours of post-production effort and ensuring professional, consistent output for every recording.

Core Features & Use Cases

  • Three-Phase Guided Workflow: Follow Discover (map actual UI elements), Rehearse (validate all selectors), and Record (capture polished video) steps to avoid broken demos and ensure the recording matches the real application.
  • Professional Video Enhancements: Includes automatic custom cursor overlay, smooth scrolling, natural typing pacing, and dynamic subtitles for a viewer-friendly, polished final product.
  • Use Case: Need to create a stakeholder walkthrough of your research agent's task creation flow? Use this Skill to record a step-by-step demo with visible cursor movements and clear subtitles, no manual video editing required.

Quick Start

Use the ui-demo skill to record a polished walkthrough video of your web application's core user workflow, including login, key actions, and result viewing steps.

Frequently Asked Questions about ui-demo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate UI demo video recording for web applications without manual editing?▼

Automated UI demo recording uses Playwright browser automation to capture walkthroughs with built-in cursor overlays, subtitles, and natural pacing, eliminating post-production editing. A three-phase Discover-Rehearse-Record workflow validates selectors beforehand to ensure consistent, professional video output.

How does the Discover-Rehearse-Record workflow prevent broken UI walkthrough recordings?▼

The Discover-Rehearse-Record workflow prevents broken UI walkthroughs by mapping actual UI elements first, then validating all Playwright selectors in a rehearsal phase before executing the final video recording. This three-step process ensures the automation matches the real application state.

Do I need Playwright installed to record browser automation walkthroughs?▼

Yes, Playwright is required as the underlying browser automation framework for recording walkthroughs. It drives the web application interactions, enabling the Skill to capture video, apply cursor overlays, and generate subtitles during the recording phase.

What is the best way to create stakeholder presentation videos of web tool workflows?▼

The best way to create stakeholder presentation videos is using automated browser walkthroughs that record step-by-step workflows with smooth scrolling, visible cursor movements, and dynamic subtitles. This approach ensures polished, viewer-friendly tutorials without requiring manual video editing.

Can I add custom cursor overlays and subtitles to automated web application tutorials?▼

Yes, automated web application tutorials include built-in custom cursor overlays, dynamic subtitles, smooth scrolling, and natural typing pacing. These professional video enhancements are applied automatically during the Playwright browser automation recording phase.

Why do my automated UI walkthrough videos fail when application selectors change?▼

Automated UI walkthrough videos fail when selectors change because the browser automation cannot locate the target elements. The Rehearse phase validates all selectors against the actual application before recording, preventing broken demos caused by UI updates.

Related Skills

Explore More Content & Communication Skills→
adolfosalasgomez3011adolfosalasgomez3011

webapp-testing

Automate local web application testing with Playwright scripts.

Community
Intermediate
drhazemibclcdrhazemibclc

feature-video

Record a feature walkthrough video and append it to the PR description.

Community
Advanced
llmh333llmh333

ui-demo

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

Community
Advanced
phoenicisfphoenicisf

ui-demo

Record polished UI demo videos of web applications using Playwright.

Community
Advanced