agentleFS
adamperlisadamperlis/video-skills/skills/ui-tutorial-video/SKILL.md

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.

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
  1. Distinctive:

    Keep panels, overlays, menus, and notifications where the app places them.

    line 22
  2. Distinctive:

    If zooming into a captured screen makes the UI unreadable, capture at higher resolution or build a faithful frame-based port from the app …

    line 26
  3. Distinctive:

    Check stills before rendering and the final video after rendering.

    line 28

≈ “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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.