marketing-demo

Name: marketing-demo
Author: MoizIbnYousaf

27stars5forks

How to install marketing-demo?

moizibnyousaf/marketing-cli/marketing-demo

$npx -y skills add MoizIbnYousaf/marketing-cli --skill marketing-demo

Installs into the current project.

Summary

Record product demos and walkthroughs for marketing assets. Two modes: quick screenshot-stitch demos via ply + ffmpeg, or polished Remotion compositions. Use when the user mentions product demo, demo video, walkthrough video, feature showcase, screen recording, GIF demo, product

Files · 1

View on GitHub

SKILL.md

1	# /marketing-demo — Product Demo Recorder
2
3	Record product demos for marketing. Two production paths: quick (ply + ffmpeg) for rough demos, polished (Remotion) for branded marketing videos.
4
5	## Reads
6
7	- `brand/creative-kit.md` — Colors, fonts, logo paths for branded overlays
8	- `brand/voice-profile.md` — Tone guidance for text overlays
9	- `brand/stack.md` — Available tools (ply, ffmpeg, remotion)
10
11	## On Activation
12
13	1. Read `brand/creative-kit.md` for colors, fonts, logo paths. If missing, ask for brand colors and logo.
14	2. Read `brand/voice-profile.md` for tone guidance on text overlays. If missing, use clear/neutral tone.
15	3. Read `brand/stack.md` to confirm available tools. If missing, detect tools directly.
16	4. Check tool availability:
17	```bash
18	command -v ply && echo "ply: ready" \|\| echo "ply: missing"
19	command -v ffmpeg && echo "ffmpeg: ready" \|\| echo "ffmpeg: missing"
20	command -v npx && echo "remotion: available" \|\| echo "remotion: unavailable"
21	```
22	5. If `ply` or `ffmpeg` missing, warn and suggest install.
23
24	## Shot Duration Rules
25
26	\| Demo Type \| Duration per Shot \| Notes \|
27	\|-----------\|------------------\|-------\|
28	\| Quick overview \| 0.5-1s \| Fast cuts, build excitement \|
29	\| Feature demo \| 2-3s \| Time to read + comprehend \|
30	\| Walkthrough \| 4-5s \| Instructional pacing \|
31	\| Social clip \| 1-2s \| Attention-grabbing, fast \|
32
33	## Demo Storytelling Principles
34
35	Demos fail when they show the product mechanically instead of telling a story. The viewer needs a reason to keep watching. These principles come from what actually gets engagement on landing pages and social:
36
37	1. Open with the outcome, not the setup. The first 2 seconds decide if someone watches the rest. Show the "after" state — the dashboard with data, the completed design, the result. Setup (login, loading, navigation) earns zero attention.
38	2. One feature = one demo. Trying to cram 5 features into 30 seconds makes all of them forgettable. A focused demo of one feature is worth more than a rushed tour.
39	3. Show the magic moment. Every product has one interaction where users go "oh wow." Find that moment and build the demo around it — it's why people click "try it."
40	4. Add context with text overlays. Social videos autoplay muted. Without text callouts, viewers see UI changing with no idea what's happening or why it matters. Every shot needs a 3-6 word overlay explaining the value.
41	5. Pacing: 2-3 seconds per concept. This feels fast, but viewer attention is brutal. If a shot doesn't earn its screen time with new information, cut it.
42
43	## Step 1: Determine Demo Type
44
45	\| Type \| Duration \| Resolution \| Format \| Use Case \|
46	\|------\|----------\|-----------\|--------\|----------\|
47	\| Hero demo \| 15-30s \| 1280x800 \| MP4 \| Landing page above-fold \|
48	\| Feature highlight \| 5-15s \| 1280x800 \| GIF/MP4 \| Feature section, docs \|
49	\| Full walkthrough \| 60-180s \| 1280x800 \| MP4 \| YouTube, sales deck \|
50	\| Social clip \| 5-15s \| 1080x1080 \| MP4 \| Instagram, Twitter/X \|
51	\| Email GIF \| 3-8s \| 600x400 \| GIF \| Email campaigns \|
52	\| How-to \| 30-90s \| 1280x800 \| MP4 \| Help docs, onboarding \|
53
54	Ask the user which type, or infer from context.
55
56	## Step 2: Plan Shot List
57
58	Before recording, plan each shot:
59
60	```markdown
61	## Shot List
62
63	1. [Action: Navigate to landing page]
64	- URL: https://example.com
65	- Wait: 1s for load
66	- Highlight: Hero section
67
68	2. [Action: Click "Get Started" button]
69	- Wait: transition animation
70	- Highlight: Signup form
71
72	3. [Action: Fill demo data]
73	- Type: demo@example.com
74	- Highlight: Success state
75	```
76
77	Each shot = one `ply` screenshot or interaction sequence.
78
79	## Step 3: Choose Production Mode
80
81	### Mode A: Quick Demo (ply + ffmpeg)
82
83	Fast, rough demos from screenshots stitched into video.
84
85	Capture screenshots:
86	```bash
87	# Navigate and screenshot each shot
88	ply navigate "https://example.com"
89	p

People who liked this also viewed

6 picks

Type

marketing-demo

27stars5forks

View on GitHub

How to install marketing-demo?

moizibnyousaf/marketing-cli/marketing-demo

$npx -y skills add MoizIbnYousaf/marketing-cli --skill marketing-demo

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /marketing-demo — Product Demo Recorder
2
3	Record product demos for marketing. Two production paths: quick (ply + ffmpeg) for rough demos, polished (Remotion) for branded marketing videos.
4
5	## Reads
6
7	- `brand/creative-kit.md` — Colors, fonts, logo paths for branded overlays
8	- `brand/voice-profile.md` — Tone guidance for text overlays
9	- `brand/stack.md` — Available tools (ply, ffmpeg, remotion)
10
11	## On Activation
12
13	1. Read `brand/creative-kit.md` for colors, fonts, logo paths. If missing, ask for brand colors and logo.
14	2. Read `brand/voice-profile.md` for tone guidance on text overlays. If missing, use clear/neutral tone.
15	3. Read `brand/stack.md` to confirm available tools. If missing, detect tools directly.
16	4. Check tool availability:
17	```bash
18	command -v ply && echo "ply: ready" \|\| echo "ply: missing"
19	command -v ffmpeg && echo "ffmpeg: ready" \|\| echo "ffmpeg: missing"
20	command -v npx && echo "remotion: available" \|\| echo "remotion: unavailable"
21	```
22	5. If `ply` or `ffmpeg` missing, warn and suggest install.
23
24	## Shot Duration Rules
25
26	\| Demo Type \| Duration per Shot \| Notes \|
27	\|-----------\|------------------\|-------\|
28	\| Quick overview \| 0.5-1s \| Fast cuts, build excitement \|
29	\| Feature demo \| 2-3s \| Time to read + comprehend \|
30	\| Walkthrough \| 4-5s \| Instructional pacing \|
31	\| Social clip \| 1-2s \| Attention-grabbing, fast \|
32
33	## Demo Storytelling Principles
34
35	Demos fail when they show the product mechanically instead of telling a story. The viewer needs a reason to keep watching. These principles come from what actually gets engagement on landing pages and social:
36
37	1. Open with the outcome, not the setup. The first 2 seconds decide if someone watches the rest. Show the "after" state — the dashboard with data, the completed design, the result. Setup (login, loading, navigation) earns zero attention.
38	2. One feature = one demo. Trying to cram 5 features into 30 seconds makes all of them forgettable. A focused demo of one feature is worth more than a rushed tour.
39	3. Show the magic moment. Every product has one interaction where users go "oh wow." Find that moment and build the demo around it — it's why people click "try it."
40	4. Add context with text overlays. Social videos autoplay muted. Without text callouts, viewers see UI changing with no idea what's happening or why it matters. Every shot needs a 3-6 word overlay explaining the value.
41	5. Pacing: 2-3 seconds per concept. This feels fast, but viewer attention is brutal. If a shot doesn't earn its screen time with new information, cut it.
42
43	## Step 1: Determine Demo Type
44
45	\| Type \| Duration \| Resolution \| Format \| Use Case \|
46	\|------\|----------\|-----------\|--------\|----------\|
47	\| Hero demo \| 15-30s \| 1280x800 \| MP4 \| Landing page above-fold \|
48	\| Feature highlight \| 5-15s \| 1280x800 \| GIF/MP4 \| Feature section, docs \|
49	\| Full walkthrough \| 60-180s \| 1280x800 \| MP4 \| YouTube, sales deck \|
50	\| Social clip \| 5-15s \| 1080x1080 \| MP4 \| Instagram, Twitter/X \|
51	\| Email GIF \| 3-8s \| 600x400 \| GIF \| Email campaigns \|
52	\| How-to \| 30-90s \| 1280x800 \| MP4 \| Help docs, onboarding \|
53
54	Ask the user which type, or infer from context.
55
56	## Step 2: Plan Shot List
57
58	Before recording, plan each shot:
59
60	```markdown
61	## Shot List
62
63	1. [Action: Navigate to landing page]
64	- URL: https://example.com
65	- Wait: 1s for load
66	- Highlight: Hero section
67
68	2. [Action: Click "Get Started" button]
69	- Wait: transition animation
70	- Highlight: Signup form
71
72	3. [Action: Fill demo data]
73	- Type: demo@example.com
74	- Highlight: Success state
75	```
76
77	Each shot = one `ply` screenshot or interaction sequence.
78
79	## Step 3: Choose Production Mode
80
81	### Mode A: Quick Demo (ply + ffmpeg)
82
83	Fast, rough demos from screenshots stitched into video.
84
85	Capture screenshots:
86	```bash
87	# Navigate and screenshot each shot
88	ply navigate "https://example.com"
89	p

People who liked this also viewed

6 picks

Type