What does this skill do?

The UI Skill Demo Recorder automates the recording of web application demo videos using Playwright, injecting a visible SVG cursor and a subtitle bar, and applying a natural pace with logical pauses to create professional tutorials and presentations. The process is divided into three mandatory phases: discovering interactive elements, testing selectors, and the final recording with simulated human interactions.

UI Discovery
Browse the target pages and extract actual interactive elements (input, select, button) using `page.evaluate` without assuming the field type.
Tester Test
Run the script with the --rehearse flag and use the ensureVisible function to verify that all selectors resolve correctly.
Recording with Cursor and Subtitles
It displays an SVG cursor that moves naturally and a semi-transparent caption bar that explains each step of the process.
Onboarding Materials
Create reusable audiovisual content for documentation, user onboarding, and presentations to stakeholders.

Usage examples

🎬 Login and Dashboard Demo
Record a demo video of the login flow and dashboard for my app at localhost:3000.
📚 Registration Tutorial
Create an automated tutorial that shows, step by step, how to register a new user in the app.
📊 Presentation to Stakeholders
Create a screen recording of the administration panel for a presentation to stakeholders.
🎭 Dress rehearsal
Test the selectors on the registration page using --rehearse before recording the final video.

Features

SVG Cursor Injection A visible arrow cursor that moves naturally without teleportation, with a shadow and smooth transitions.
Automatic subtitles A semi-transparent bar at the bottom that explains each step of the workflow with an opacity transition.
Discovery of Elements Extract actual UI selectors using `page.evaluate` instead of assuming the field type of each element.
Human Simulation The `moveAndClick` and `typeSlowly` functions simulate visible clicks and character-by-character typing with logical pauses.
Output in .webm 1280x720 Video in .webm format with a resolution of 1280x720, saved in a predictable location for easy retrieval.

Frequently asked questions

Yes. The skill uses Playwright with Chromium for recording. Install it with `npm install playwright` and `npx playwright install chromium`.
In .webm format with a resolution of 1280x720. The file is copied to a specified location with a predictable name for easy retrieval.
Yes. Edit the main script to adapt the workflow, selectors, and captions to your specific application.
Yes, as long as it's accessible from the browser and the selectors resolve correctly. Use the rehearsal phase with --rehearse to verify before recording.
Demos UI Recorder — Demo Videos with Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.