ui-tutorial-video
Skill18 starsChanged 47 days agoMITView on GitHub
Make a step-by-step video showing how a real software feature works. Use for onboarding, help videos, walkthroughs, and narrated interface tutorials.
In this repository10 other files it gives its agents.
- brand-filmSkill
- brand-grid-videoSkill
- creator-videoSkill
- feature-videoSkill
- narrated-product-filmSkill
- silent-product-demoSkill
- social-video-hooksSkill
- ui-component-clipSkill
- video-brand-systemSkill
- video-thumbnailsSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 22
Keep panels, overlays, menus, and notifications where the app places them.
- Distinctive: line 26
If zooming into a captured screen makes the UI unreadable, capture at higher resolution or build a faithful frame-based port from the app …
- Distinctive: line 28
Check stills before rendering and the final video after rendering.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
UI tutorial video
Teach the real path a person takes through the feature. The viewer should see how to start it, what to do next, and what success looks like.
Verify the flow
Inspect the current app and its help text. Write down the trigger, each required decision, the resulting state, and any choice that changes the outcome. Use the UI's actual words and placement. If a privacy or billing setting is part of the flow, describe exactly what that setting changes.
Script what happens
Open with the problem or desired result, show the feature paying it off, then explain the steps over the action. Use one short spoken line or caption per decision. Plain action labels work better than decorative step numbers: “CHOOSE A FILE”, “PRESS RECORD”, “REVIEW THE RESULT”.
Plan a shot for each step with time, screen state, pointer position, camera focus, and narration. A continuous screen and smooth camera can help the viewer keep their bearings. Cut only when a transition removes waiting or shows a new place more clearly.
Show the actual interface
- Keep panels, overlays, menus, and notifications where the app places them.
- Show the trigger and resulting overlay together when both are needed to understand the action.
- Move the pointer to the exact target, hold it through the press, and verify the UI responds.
- Frame the subject without covering it with captions, arrows, or decorative effects.
- If zooming into a captured screen makes the UI unreadable, capture at higher resolution or build a faithful frame-based port from the app source.
Check stills before rendering and the final video after rendering. Confirm every click, label, and shortcut against the current app, inspect each aspect ratio, and verify that the narration describes the state visible at that moment.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

