ui-demo
by affaan-mui-demo helps you record polished web app demo videos with Playwright, visible cursor movement, and natural pacing. Use the ui-demo skill for walkthroughs, onboarding clips, feature tours, and tutorial-style recordings. Follow the discover, rehearse, then record workflow for reliable results, especially for prototypes and fast-changing UIs.
This skill scores 68/100, which means it is a usable but somewhat limited listing for directory users. It clearly targets a real workflow—recording polished UI demo videos with Playwright—and gives enough step-by-step guidance to reduce guesswork, but the repo evidence shows a demo-leaning skill with no supporting scripts, references, or install command, so users should expect to read the SKILL.md carefully before adopting it.
- Clear triggerability for demo videos, walkthroughs, screen recordings, and tutorials.
- Strong operational guidance with a three-phase Discover → Rehearse → Record workflow.
- Substantial skill body with concrete Playwright-based instructions and code examples.
- Marked as demo/experimental and includes placeholder markers, so it may be less production-ready than a mature skill.
- No support files or install command are present, which limits adoption confidence and quick setup.
Overview of ui-demo skill
What ui-demo does
The ui-demo skill helps you record polished web app demo videos with Playwright, including visible cursor movement, paced interactions, and a more natural walkthrough feel than a plain screen capture. It is best for product demos, onboarding clips, feature tours, and tutorial-style videos where the goal is to show a working UI clearly.
Who should use it
Use the ui-demo skill if you need a repeatable way to turn a rough product flow into a presentation-ready recording. It fits developers, product teams, and agents that can launch a browser, inspect pages, and execute scripted interactions without needing a full video-editing workflow.
What makes it useful
The main value is process discipline: the skill pushes you to discover the actual UI first, rehearse the flow, then record it. That reduces broken demos caused by wrong selectors, hidden controls, or unrealistic pacing. If you want a ui-demo for Prototypes, this is especially helpful because prototype UIs change quickly and need quick validation before recording.
How to Use ui-demo skill
Install and scope the task
For ui-demo install, add the skill from the repo and then apply it to a single flow, not an entire app. A typical install command is:
npx skills add affaan-m/everything-claude-code --skill ui-demo
Before you start, define the exact recording outcome: which page, which user journey, what the viewer should learn, and whether the clip is for docs, sales, or internal review.
Start with discovery, not recording
The ui-demo usage workflow depends on understanding the live UI first. Open the target page, inspect visible inputs, buttons, menus, and modals, and note any custom controls that do not behave like standard HTML elements. The repo’s guidance is explicit: discover, rehearse, then record.
Good input:
- “Record a 60-second walkthrough of creating a new project, adding one task, and sharing it.”
- “Show the settings flow on staging, focusing on theme switch and invite link.”
Weak input:
- “Make a demo video of the app.”
Read the right files first
For the ui-demo guide, start with SKILL.md and any linked repo instructions that affect browser setup or recording constraints. In this repo, SKILL.md is the primary source, and there are no extra support folders to rely on, so the important job is reading the process sections carefully and adapting them to your app.
Use a rehearsed script
Draft the demo as a sequence of user-intent steps, not as a list of clicks. Include the starting state, the action path, and the expected end state. If the flow has risky moments, such as file uploads, async saves, or modals, rehearse those steps before recording so the final run stays smooth.
ui-demo skill FAQ
Is ui-demo better than a normal prompt?
Yes, when the task is to produce a believable recording rather than just explain a feature. A generic prompt may generate a rough checklist, but the ui-demo skill gives you a workflow that reduces selector mistakes, pacing issues, and unrealistic interactions.
Is ui-demo only for finished products?
No. The skill also works for prototypes, staging builds, and internal tools, which is why ui-demo for Prototypes is a practical use case. The main requirement is that the UI is interactive enough to explore and record reliably.
What can block a good result?
The biggest blockers are unstable interfaces, unclear target journeys, and assumptions about page structure. If the app changes often, provide the current route, stable test data, and exact UI path so the recording does not drift.
Is it beginner-friendly?
Yes, if you can describe a user journey clearly. You do not need video-editing knowledge, but you do need enough product context to say what the demo should prove and what should be left out.
How to Improve ui-demo skill
Give the skill a sharper brief
The best ui-demo usage inputs state the audience, duration, and success criterion. For example: “Create a 45-second stakeholder demo showing how a manager reviews a report and exports CSV, with no error states or setup screens.” That is stronger than asking for a generic walkthrough because it defines pacing and scope.
Provide stable UI context
If the interface has dynamic data, authentication, or role-based views, include the exact starting conditions. Mention account type, route, test record names, and any preloaded state. This matters because the ui-demo skill is most effective when the browser state is predictable.
Iterate after the first recording
Review the first pass for cadence, cursor clarity, and whether the viewer understands the story without narration. Then refine the script by removing extra clicks, shortening dead time, and replacing ambiguous transitions with explicit UI steps. For ui-demo install to pay off, treat the first run as rehearsal data, not the final artifact.
Watch for common failure modes
The most common mistakes are overlong flows, unverified selectors, and demo scripts that try to cover too many features at once. If the video feels busy, narrow the journey to one outcome and make every step support that outcome.