Screen Demo Creator

Screen demo

by openfilm · MIT license · ★ 975 on GitHub

Turn a screen recording into a polished product demo or tutorial: the view follows the action, dead time is gone, every step is easy to see, and the product looks as good as it is. Use when the person gives a screen recording (or a…

---
name: screen-demo
description: Turn a screen recording into a polished product demo or tutorial: the view follows the action, dead time is gone, every step is easy to see, and the product looks as good as it is. Use when the person gives a screen recording (or a product to capture) and asks for a demo, walkthrough, tutorial, feature video or how-to (录屏演示, 产品演示, 教程, 操作视频, 功能介绍).
---

# Screen demo

Make the demo that shows this product at its best and is effortless to follow: the viewer always knows where to look,
sees each step land, never waits, and could do the same in the product today.

## What has to be true

- **The real product.** Its own screens, actions and results, from the person's recording or captured from the live
  product; never a redrawn interface or a result that did not happen. Where it must be simpler, crop and zoom into the
  real thing.
- **Clear where to look**, at the size it will be watched: the action, its text and its result readable on that
  screen, a phone too when the demo is vertical.
- **Nothing private in any frame**: keys, tokens, passwords, emails, names, customer data, notifications, other tabs

Overview

Make the demo that shows this product at its best and is effortless to follow: the viewer always knows where to look, sees each step land, never waits, and could do the same in the product today.

Manual install (npx, ZIP)

Claude Codenpx skills add openfilm/openfilm --skill screen-demo -g -a claude-code

Claude Code (degit)npx degit openfilm/openfilm/packages/openfilm/skills/screen-demo#main ~/.claude/skills/screen-demo

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md2.2 KB

Read SKILL.md here

openfilm/main1 file shown

SKILL.md2.2 KB

Browse every file on GitHub↗

SKILL.md

Show the full text36 lines

screen-demo/SKILL.md36 lines · 2.2 KB

PreviewCode

Outline

RawView on GitHub

Screen demo

Make the demo that shows this product at its best and is effortless to follow: the viewer always knows where to look, sees each step land, never waits, and could do the same in the product today.

What has to be true

The real product. Its own screens, actions and results, from the person's recording or captured from the live product; never a redrawn interface or a result that did not happen. Where it must be simpler, crop and zoom into the real thing.
Clear where to look, at the size it will be watched: the action, its text and its result readable on that screen, a phone too when the demo is vertical.
Nothing private in any frame: keys, tokens, passwords, emails, names, customer data, notifications, other tabs and bookmarks are hidden, or that part is recorded again.
Honest time. Waiting can go; where speed is what the product sells, the real time stays or the speed-up is shown.
It holds up next to the best product demos you know. Watch the whole film as a viewer would, and keep refining until it does.

What you have

The recording, cut by its in and out points and sped up with speed, never re-encoded; a page can also play it, silent, with its time set from t, so the picture can move over it. A voice from npx openfilm get tts, music and sound from get, your own built-in tools, services the person has keys for, and anything you can make pictures and motion with.

With the person

What they ask for comes before anything here. The recording or the product (its address, and an account to show it with), who the demo is for, and the one thing it must show. Ask without holding up the work. When done, tell them in a few lines what it shows, what you sped up or left out, and what you hid.

1	---
2	name: screen-demo
3	description: Turn a screen recording into a polished product demo or tutorial: the view follows the action, dead time is gone, every step is easy to see, and the product looks as good as it is. Use when the person gives a screen recording (or a product to capture) and asks for a demo, walkthrough, tutorial, feature video or how-to (录屏演示, 产品演示, 教程, 操作视频, 功能介绍).
4	---
5
6	# Screen demo
7
8	Make the demo that shows this product at its best and is effortless to follow: the viewer always knows where to look,
9	sees each step land, never waits, and could do the same in the product today.
10
11	## What has to be true
12
13	- The real product. Its own screens, actions and results, from the person's recording or captured from the live
14	product; never a redrawn interface or a result that did not happen. Where it must be simpler, crop and zoom into the
15	real thing.
16	- Clear where to look, at the size it will be watched: the action, its text and its result readable on that
17	screen, a phone too when the demo is vertical.
18	- Nothing private in any frame: keys, tokens, passwords, emails, names, customer data, notifications, other tabs
19	and bookmarks are hidden, or that part is recorded again.
20	- Honest time. Waiting can go; where speed is what the product sells, the real time stays or the speed-up is shown.
21	- It holds up next to the best product demos you know. Watch the whole film as a viewer would, and keep refining
22	until it does.
23
24	## What you have
25
26	The recording, cut by its in and out points and sped up with `speed`, never re-encoded; a page can also play it,
27	silent, with its time set from t, so the picture can move over it. A voice from `npx openfilm get tts`, music and
28	sound from `get`, your own built-in tools, services the person has keys for, and anything you can make pictures and
29	motion with.
30
31	## With the person
32
33	What they ask for comes before anything here. The recording or the product (its address, and an account to show it
34	with), who the demo is for, and the one thing it must show. Ask without holding up the work. When done, tell them in a
35	few lines what it shows, what you sped up or left out, and what you hid.
36