app-store-screenshots

Name: app-store-screenshots
Author: MoizIbnYousaf

27stars5forks

How to install app-store-screenshots?

moizibnyousaf/marketing-cli/app-store-screenshots

$npx -y skills add MoizIbnYousaf/marketing-cli --skill app-store-screenshots

Installs into the current project.

Summary

Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions. Screenshots are advertisements, not documentation — every screenshot sells one idea. Use when building App Store screenshots, generating exportable marketing screenshots

Files · 1

View on GitHub

SKILL.md

1	# App Store Screenshots Generator
2
3	## Overview
4
5	Build a Next.js page that renders iOS App Store screenshots as advertisements (not UI showcases) and exports them via `html-to-image` at Apple's required resolutions. Screenshots are the single most important conversion asset on the App Store.
6
7	## Reads
8
9	- `brand/creative-kit.md` — Brand colors, fonts, logo paths
10	- `brand/voice-profile.md` — Copy tone and personality
11	- `brand/positioning.md` — Positioning angles for headline direction
12
13	## On Activation
14
15	1. Read `brand/creative-kit.md` for colors, fonts, and logo.
16	2. Read `brand/voice-profile.md` for copy tone — this shapes headline style (playful vs. professional vs. minimal).
17	3. Read `brand/positioning.md` for positioning angles — the primary angle informs the hero slide headline direction.
18	4. If brand/ files don't exist, the skill works at zero context. Step 1 gathers everything needed.
19
20	## Core Principle
21
22	Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point.
23
24	## Step 1: Ask the User
25
26	If brand/ files provided answers (colors, fonts, voice tone), confirm them with the user and skip those questions. Only ask what's genuinely unknown. Do not proceed until you have all answers:
27
28	### Required
29
30	1. App screenshots — "Where are your app screenshots? (PNG files of actual device captures)"
31	2. App icon — "Where is your app icon PNG?"
32	3. Brand colors — "What are your brand colors? (accent color, text color, background preference)"
33	4. Font — "What font does your app use? (or what font do you want for the screenshots?)"
34	5. Feature list — "List your app's features in priority order. What's the #1 thing your app does?"
35	6. Number of slides — "How many screenshots do you want? (Apple allows up to 10)"
36	7. Style direction — "What style do you want? Examples: warm/organic, dark/moody, clean/minimal, bold/colorful, gradient-heavy, flat. Share App Store screenshot references if you have any."
37
38	### Optional
39
40	8. iPad screenshots — "Do you also have iPad screenshots? If so, we'll generate iPad App Store screenshots too (recommended for universal apps)."
41	9. Component assets — "Do you have any UI element PNGs (cards, widgets, etc.) you want as floating decorations? If not, that's fine — we'll skip them."
42	10. Additional instructions — "Any specific requirements, constraints, or preferences?"
43
44	### Derived from answers (do NOT ask — decide yourself)
45
46	Based on the user's style direction, brand colors, and app aesthetic, decide:
47	- Background style: gradient direction, colors, whether light or dark base
48	- Decorative elements: blobs, glows, geometric shapes, or none — match the style
49	- Dark vs light slides: how many of each, which features suit dark treatment
50	- Typography treatment: weight, tracking, line height — match the brand personality
51	- Color palette: derive text colors, secondary colors, shadow tints from the brand colors
52
53	IMPORTANT: If the user gives additional instructions at any point during the process, follow them. User instructions always override skill defaults.
54
55	## Step 2: Set Up the Project
56
57	### Detect Package Manager
58
59	Check what's available, use this priority: bun > pnpm > yarn > npm
60
61	```bash
62	# Check in order
63	which bun && echo "use bun" \|\| which pnpm && echo "use pnpm" \|\| which yarn && echo "use yarn" \|\| echo "use npm"
64	```
65
66	### Scaffold (if no existing Next.js project)
67
68	```bash
69	# With bun:
70	bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
71	bun add html-to-image
72
73	# With pnpm:
74	pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
75	pnpm add html-to-image
76
77	# With yarn:
78	yarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
79	yarn add html-to-image
80
81	# With npm:
82	npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
83	npm install html-to-image
84	```
85
86	### Copy the Phone Mockup
87
88	The skill includes a pre-measured iPhone mockup at `

People who liked this also viewed

6 picks

Type

app-store-screenshots

27stars5forks

View on GitHub

How to install app-store-screenshots?

moizibnyousaf/marketing-cli/app-store-screenshots

$npx -y skills add MoizIbnYousaf/marketing-cli --skill app-store-screenshots

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# App Store Screenshots Generator
2
3	## Overview
4
5	Build a Next.js page that renders iOS App Store screenshots as advertisements (not UI showcases) and exports them via `html-to-image` at Apple's required resolutions. Screenshots are the single most important conversion asset on the App Store.
6
7	## Reads
8
9	- `brand/creative-kit.md` — Brand colors, fonts, logo paths
10	- `brand/voice-profile.md` — Copy tone and personality
11	- `brand/positioning.md` — Positioning angles for headline direction
12
13	## On Activation
14
15	1. Read `brand/creative-kit.md` for colors, fonts, and logo.
16	2. Read `brand/voice-profile.md` for copy tone — this shapes headline style (playful vs. professional vs. minimal).
17	3. Read `brand/positioning.md` for positioning angles — the primary angle informs the hero slide headline direction.
18	4. If brand/ files don't exist, the skill works at zero context. Step 1 gathers everything needed.
19
20	## Core Principle
21
22	Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point.
23
24	## Step 1: Ask the User
25
26	If brand/ files provided answers (colors, fonts, voice tone), confirm them with the user and skip those questions. Only ask what's genuinely unknown. Do not proceed until you have all answers:
27
28	### Required
29
30	1. App screenshots — "Where are your app screenshots? (PNG files of actual device captures)"
31	2. App icon — "Where is your app icon PNG?"
32	3. Brand colors — "What are your brand colors? (accent color, text color, background preference)"
33	4. Font — "What font does your app use? (or what font do you want for the screenshots?)"
34	5. Feature list — "List your app's features in priority order. What's the #1 thing your app does?"
35	6. Number of slides — "How many screenshots do you want? (Apple allows up to 10)"
36	7. Style direction — "What style do you want? Examples: warm/organic, dark/moody, clean/minimal, bold/colorful, gradient-heavy, flat. Share App Store screenshot references if you have any."
37
38	### Optional
39
40	8. iPad screenshots — "Do you also have iPad screenshots? If so, we'll generate iPad App Store screenshots too (recommended for universal apps)."
41	9. Component assets — "Do you have any UI element PNGs (cards, widgets, etc.) you want as floating decorations? If not, that's fine — we'll skip them."
42	10. Additional instructions — "Any specific requirements, constraints, or preferences?"
43
44	### Derived from answers (do NOT ask — decide yourself)
45
46	Based on the user's style direction, brand colors, and app aesthetic, decide:
47	- Background style: gradient direction, colors, whether light or dark base
48	- Decorative elements: blobs, glows, geometric shapes, or none — match the style
49	- Dark vs light slides: how many of each, which features suit dark treatment
50	- Typography treatment: weight, tracking, line height — match the brand personality
51	- Color palette: derive text colors, secondary colors, shadow tints from the brand colors
52
53	IMPORTANT: If the user gives additional instructions at any point during the process, follow them. User instructions always override skill defaults.
54
55	## Step 2: Set Up the Project
56
57	### Detect Package Manager
58
59	Check what's available, use this priority: bun > pnpm > yarn > npm
60
61	```bash
62	# Check in order
63	which bun && echo "use bun" \|\| which pnpm && echo "use pnpm" \|\| which yarn && echo "use yarn" \|\| echo "use npm"
64	```
65
66	### Scaffold (if no existing Next.js project)
67
68	```bash
69	# With bun:
70	bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
71	bun add html-to-image
72
73	# With pnpm:
74	pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
75	pnpm add html-to-image
76
77	# With yarn:
78	yarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
79	yarn add html-to-image
80
81	# With npm:
82	npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
83	npm install html-to-image
84	```
85
86	### Copy the Phone Mockup
87
88	The skill includes a pre-measured iPhone mockup at `

People who liked this also viewed

6 picks

Type