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
Decision gist · record as of 2026-07-27
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.
Use it when
- Yes, ui-demo is specifically designed to record polished demo videos of web applications with visible cursor and natural pacing.
- ui-demo enables you to create tutorial and walkthrough videos for onboarding and documentation purposes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
affaan-m/ECC/ui-demo · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/ui-demo/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Record polished demo videos of web applications with visible cursor and natural pacing”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you battle-tested approaches to structuring and scaling Playwright test automation projects. Learn how to write maintainable test code, organize test suites effectively, and apply design patterns that reduce technical debt and improve test reliability across your automation framework.
This skill teaches you how to harness Puppeteer for programmatic browser control, from launching headless instances to navigating pages and extracting data at scale. You'll discover patterns for reliable web scraping, form automation, and performance testing without manual intervention. Perfect for developers building data pipelines or testing complex web applications.
This skill lets you command Chrome directly through code, enabling you to build bots that navigate websites, extract information, and perform repetitive web tasks automatically. Perfect for workflow automation, testing, and data collection at scale.
playwright-recording lets you automatically capture browser sessions and user interactions as video files, perfect for building demo content and technical documentation. Works seamlessly with Claude Code to record complex workflows and generate visual artifacts from your automation scripts.
This skill transforms manual browser navigation into automated Playwright test code by recording your interactions in real time. Watch as clicks, form inputs, and page transitions become production-ready test scripts without writing a single line of code. Perfect for teams building robust browser automation workflows.
This skill enables you to programmatically control web browser operations, from navigating to URLs and clicking elements to filling forms and extracting page content. Integrate browser automation directly into your SkillFed workflows for seamless web interaction and data collection tasks.
More skills playwright-skill (MIT) · studio-e2e-tests (Apache-2.0) · Promo Video (unlicensed)