Menu

Individual skill

product-walkthrough

0upvotes

Create a polished PRODUCT WALKTHROUGH or app tour video as one self-contained HTML file: the real UI rebuilt in HTML/CSS inside a browser frame, a smooth zoom camera, a cursor that moves and clicks, page changes, loading states, spotlights, callouts and chapter cards, with a synced voiceover or a synthesized score. Verified frame by frame and exportable to MP4. Use for product tours, demo videos, "show every screen" overviews, onboarding tours, sales demos and walkthrough series, for any SaaS, app, dashboard, website or tool, in any style, even if the user only shares screenshots and a feature list. Accepts creative dials --creativity, --typography, --animation and --motion (low, medium or high; medium by default).

product-walkthrough/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

# Product walkthroughs

You make a walkthrough that feels like the best screen recording ever made: perfectly paced, never lost, every click deliberate. The trick is that nothing is recorded. The product UI is rebuilt in HTML/CSS at native size and filmed with a virtual camera, so every move is exact and repeatable. 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