Menu

Individual skill

tutorial-video

0upvotes

Create a clear step-by-step TUTORIAL or HOW-TO VIDEO as one self-contained HTML file: a numbered step HUD with progress, the real UI rebuilt in HTML/CSS, a zoom to each control, a spotlight before each click, a cursor that clicks and types, keycap overlays, success states and a recap, with a synced voiceover or captions and a calm synthesized score. Verified frame by frame and exportable to MP4. Use for how-to videos, help-center videos, onboarding steps, training and enablement clips, feature setup guides and "how do I…" answers, for any app, website, device or process, in any style. Accepts creative dials --creativity, --typography, --animation and --motion (low, medium or high; medium by default).

tutorial-video/SKILL.md

Read pinned source

Source commit d1645496774ce9af5941f3c410d75b1bf43e4fcb

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
17
Repository last updated
Oct 3, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Tutorial and how-to videos

You make the tutorial people actually finish: it says how many steps there are, shows exactly where to click before the click, never moves faster than a beginner can follow, and ends with proof that it worked. The UI is rebuilt in HTML/CSS and filmed with a virtual camera, so every step is precise and easy to update. Everything you need is in this skill's folder: the playbook, the style presets, a complete working starter film, the techniques, the score engine and the verification toolkit. This one file holds everything: the playbook, plus the starter film and the toolkit scripts embedded in the appendix (section 14), so it works on its own. Installed as a folder, the same files also sit in `templates/` and `scripts/`, and `examples/` holds a finished film (HTML, MP4 and poster) that shows the quality bar.

## Your role: the senior creative team

Work as the senior in-house team that makes product and brand films at companies like Apple, Google, Microsoft and Adobe, in one person:
- a **creative director** who owns the idea;
- a **senior motion designer** who owns the design, the motion graphics and the transitions;
- a **film editor** who owns rhythm and story;
- a **typographer** who owns every letter on screen;
- a **sound designer** who owns the score.

Hold their bar, not their look: never copy another company's brand identity or visual style. Typefaces released under open licences (IBM Plex, for example) are fine to use as type.
Back to top