ui-demo
ui-demo lets you create polished demonstration videos of web applications by recording user interactions with a visible cursor and natural pacing. Ideal for building compelling product walkthroughs, tutorial content, and UI showcases that feel authentic and engaging to viewers.
ui-demo is a tool for creating polished demonstration videos of web applications by recording user interactions with a visible cursor and natural pacing. It's ideal for building compelling product walkthroughs, tutorial content, and UI showcases that feel authentic and engaging to viewers. You can use ui-demo to record demo videos of web apps, create tutorial videos for onboarding and documentation, generate stakeholder presentation videos showcasing features and workflows, and automate screen recording with storytelling flow and professional overlays.
AI-generated summary based on this skill's SKILL.md
Install
affaan-m/ECC/ui-demo · repository language: JavaScript
git clone https://github.com/affaan-m/ECC
cp -r ECC/skills/ui-demo ~/.claude/skills/ui-demoFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is ui-demo used for?
ui-demo is a tool for creating polished demonstration videos of web applications by recording user interactions with a visible cursor and natural pacing. It's ideal for building compelling product walkthroughs, tutorial content, and UI showcases that feel authentic and engaging to viewers. You can use ui-demo to record demo videos of web apps, create tutorial videos for onboarding and documentation, generate stakeholder presentation videos showcasing features and workflows, and automate screen recording with storytelling flow and professional overlays.
Can I record a demo video of a web app with ui-demo?
Yes, ui-demo is specifically designed to record polished demo videos of web applications with visible cursor and natural pacing. The tool captures user interactions and presents them in a way that feels authentic and professional, making it ideal for creating compelling product demonstrations that showcase your application's features and workflows to viewers.
How can ui-demo help me create tutorial videos for my website?
ui-demo enables you to create tutorial and walkthrough videos for onboarding and documentation purposes. By recording your web application's user interactions with a visible cursor and natural pacing, ui-demo helps you produce engaging tutorial content that guides viewers through your application's features and workflows step-by-step, making it easier for users to understand how to use your product.
Does ui-demo support screen recording with cursor overlay?
Yes, ui-demo specializes in screen capture with cursor overlay, allowing you to record web application interactions with a visible cursor that viewers can easily follow. This feature is essential for creating polished UI walkthroughs and demo videos where the cursor movement helps guide viewers through the application's features and functionality in a natural, engaging way.
Can ui-demo generate stakeholder presentation videos?
Absolutely, ui-demo can generate stakeholder presentation videos showcasing features and workflows. The tool automates screen recording with storytelling flow and professional overlays, making it ideal for creating polished, feature-focused videos that effectively communicate your application's capabilities to stakeholders, investors, and other decision-makers.
What license does ui-demo use?
ui-demo is released under the MIT license, which is a permissive open-source license that allows you to use, modify, and distribute the software freely with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
UI Demo Video Recorder
Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.
When to Use
- User asks for a "demo video", "screen recording", "walkthrough", or "tutorial"
- User wants to showcase a feature or workflow visually
- User needs a video for documentation, onboarding, or stakeholder presentation
Three-Phase Process
Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording.
Phase 1: Discover
Before writing any script, explore the target pages to understand what is actually there.
Why
You cannot script what you have not seen. Fields may be <input> not <textarea>, dropdowns may be custom components not <select>, and comment boxes may support @mentions or #tags. Assumptions break recordings
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/ui-demo/SKILL.md