screenshot-pipeline

Name: screenshot-pipeline
Author: evan043

60stars6forks

How to install screenshot-pipeline?

evan043/claude-cli-advanced-starter-pack/screenshot-pipeline

$npx -y skills add evan043/claude-cli-advanced-starter-pack --skill screenshot-pipeline

Installs into the current project.

Summary

Automated pipeline for capturing application screenshots, compositing them into device frames, and generating animated GIFs for marketing materials and landing pages.

Files · 1

View on GitHub

SKILL.md

1	# Screenshot Pipeline Skill
2
3	Automated pipeline for capturing application screenshots, compositing them into device frames, and generating animated GIFs for marketing materials and landing pages.
4
5	## Overview
6
7	This skill provides a complete pipeline for generating professional marketing screenshots:
8
9	1. Capture - Use Playwright to screenshot app routes at multiple viewports
10	2. Frame - Composite screenshots into realistic device bezels (MacBook, iPhone, iPad, etc.)
11	3. Generate GIFs - Stitch framed screenshots into smooth animated GIFs
12	4. Output - Organized asset directory ready for landing pages
13
14	## Quick Start
15
16	### 1. Configure the pipeline
17
18	Create a config file (typically at `src/config/landingPage.json` or similar):
19
20	```json
21	{
22	"enabled": true,
23	"routes": [
24	{ "path": "/dashboard", "name": "Dashboard", "waitFor": "[data-testid='dashboard-loaded']" },
25	{ "path": "/features", "name": "Features" },
26	{ "path": "/settings", "name": "Settings" }
27	],
28	"viewports": [
29	{ "name": "desktop", "width": 1440, "height": 900 },
30	{ "name": "mobile", "width": 390, "height": 844 }
31	],
32	"devices": [
33	{ "name": "macbook-pro", "type": "laptop" },
34	{ "name": "iphone-15-pro", "type": "phone" }
35	],
36	"gif": {
37	"frameDelay": 2000,
38	"quality": 10,
39	"maxSize": 5242880
40	},
41	"outputDir": "public/landing-assets",
42	"baseUrl": "http://localhost:5173"
43	}
44	```
45
46	### 2. Install dependencies
47
48	```bash
49	npm install sharp gifencoder canvas
50	```
51
52	### 3. Run the pipeline
53
54	Use the `/landing-page-generator` slash command:
55	```
56	/landing-page-generator pipeline
57	```
58
59	Or run individual steps:
60	```
61	/landing-page-generator capture
62	/landing-page-generator frame
63	/landing-page-generator generate-gifs
64	```
65
66	## Pipeline Steps
67
68	### Step 1: Screenshot Capture
69
70	Uses Playwright MCP to navigate to each route at each viewport size and capture screenshots.
71
72	Process:
73	1. Launch browser via Playwright MCP
74	2. For each route in config:
75	- For each viewport in config:
76	- Navigate to `{baseUrl}{route.path}`
77	- Wait for `route.waitFor` selector (if specified)
78	- Resize viewport to `{viewport.width} x {viewport.height}`
79	- Capture full-page screenshot
80	- Save to `{outputDir}/screenshots/{route.name}-{viewport.name}.png`
81
82	Output structure:
83	```
84	{outputDir}/screenshots/
85	Dashboard-desktop.png
86	Dashboard-mobile.png
87	Features-desktop.png
88	Features-mobile.png
89	Settings-desktop.png
90	Settings-mobile.png
91	```
92
93	### Step 2: Device Frame Compositing
94
95	Uses Sharp to overlay screenshots onto realistic device bezels.
96
97	Process:
98	1. Load device frame template (bezel image with transparent screen area)
99	2. Resize screenshot to match device screen region
100	3. Composite screenshot behind bezel layer
101	4. Output final framed image
102
103	Viewport-to-device mapping:
104	- `desktop` (width >= 1024) → laptop frames (MacBook Pro, etc.)
105	- `mobile` (width < 768) → phone frames (iPhone 15, Galaxy, etc.)
106	- `tablet` (768 <= width < 1024) → tablet frames (iPad, etc.)
107
108	Output structure:
109	```
110	{outputDir}/framed/
111	Dashboard-desktop-macbook-pro.png
112	Dashboard-mobile-iphone-15-pro.png
113	Features-desktop-macbook-pro.png
114	...
115	```
116
117	### Step 3: GIF Generation
118
119	Uses gifencoder + canvas to stitch framed screenshots into animated GIFs.
120
121	Process:
122	1. Group framed screenshots by device type
123	2. For each device group:
124	- Create GIF encoder with device output dimensions
125	- Set frame delay, quality, and repeat settings
126	- Add each framed screenshot as a frame
127	- Write animated GIF file
128	3. Verify file sizes against `maxSize` config
129
130	Output structure:
131	```
132	{outputDir}/gifs/
133	macbook-pro-demo.gif
134	iphone-15-pro-demo.gif
135	```
136
137	## Configuration Reference
138
139	See `references/pipeline-config.md` for the complete configuration schema.
140
141	## Device Frames
142
143	See `references/device-frames.md` for the catalog of available device templates.
144
145	## Viewport Presets
146
147	See `references/viewport-presets.md` for standard viewport configurations.
148
149	## Integration with Landing Page Generator
150
151	This skill is used by the `/landing-page-generator` slash command. The command:
152	1. Reads your pipeline config
153	2. Orchestrates capture → frame → GIF steps
154	3. Generates React components that use the output assets
155	4. Handles deployment
156
157	## Troubleshooting
158
159	### Sharp installation fails
160	Sharp requires native dependencies. On some systems:
161	```bash
162	npm install --platform=linuxmusl sharp # Alpine Linux
163	npm install sharp --ignore-scripts && npx node-gyp rebuild # Manual rebuild
164	```
165
166	### GIFs are too large
167	- Reduce `gif.quality` (lower = smaller, range 1-30)
168	- Reduce number of routes captured
169	- Increase `gif.frameDelay` (fewer perceived frames needed)
170	- Reduce viewport dimensions
171
172	### Screenshots are blank or incomplete
173	- Ensure `waitFor` selectors are correct
174	- Increase navigation timeout
175	- Verify `baseUrl` points to a running dev server
176	- Check that routes require no authentication (or handle auth in pipeline)
177
178	### Canvas installation fails
179	Canvas requires system dependencies:
180	`

People who liked this also viewed

6 picks

Type

screenshot-pipeline

60stars6forks

View on GitHub

How to install screenshot-pipeline?

evan043/claude-cli-advanced-starter-pack/screenshot-pipeline

$npx -y skills add evan043/claude-cli-advanced-starter-pack --skill screenshot-pipeline

Installs into the current project.

Summary

Automated pipeline for capturing application screenshots, compositing them into device frames, and generating animated GIFs for marketing materials and landing pages.

Files · 1

View on GitHub

SKILL.md

1	# Screenshot Pipeline Skill
2
3	Automated pipeline for capturing application screenshots, compositing them into device frames, and generating animated GIFs for marketing materials and landing pages.
4
5	## Overview
6
7	This skill provides a complete pipeline for generating professional marketing screenshots:
8
9	1. Capture - Use Playwright to screenshot app routes at multiple viewports
10	2. Frame - Composite screenshots into realistic device bezels (MacBook, iPhone, iPad, etc.)
11	3. Generate GIFs - Stitch framed screenshots into smooth animated GIFs
12	4. Output - Organized asset directory ready for landing pages
13
14	## Quick Start
15
16	### 1. Configure the pipeline
17
18	Create a config file (typically at `src/config/landingPage.json` or similar):
19
20	```json
21	{
22	"enabled": true,
23	"routes": [
24	{ "path": "/dashboard", "name": "Dashboard", "waitFor": "[data-testid='dashboard-loaded']" },
25	{ "path": "/features", "name": "Features" },
26	{ "path": "/settings", "name": "Settings" }
27	],
28	"viewports": [
29	{ "name": "desktop", "width": 1440, "height": 900 },
30	{ "name": "mobile", "width": 390, "height": 844 }
31	],
32	"devices": [
33	{ "name": "macbook-pro", "type": "laptop" },
34	{ "name": "iphone-15-pro", "type": "phone" }
35	],
36	"gif": {
37	"frameDelay": 2000,
38	"quality": 10,
39	"maxSize": 5242880
40	},
41	"outputDir": "public/landing-assets",
42	"baseUrl": "http://localhost:5173"
43	}
44	```
45
46	### 2. Install dependencies
47
48	```bash
49	npm install sharp gifencoder canvas
50	```
51
52	### 3. Run the pipeline
53
54	Use the `/landing-page-generator` slash command:
55	```
56	/landing-page-generator pipeline
57	```
58
59	Or run individual steps:
60	```
61	/landing-page-generator capture
62	/landing-page-generator frame
63	/landing-page-generator generate-gifs
64	```
65
66	## Pipeline Steps
67
68	### Step 1: Screenshot Capture
69
70	Uses Playwright MCP to navigate to each route at each viewport size and capture screenshots.
71
72	Process:
73	1. Launch browser via Playwright MCP
74	2. For each route in config:
75	- For each viewport in config:
76	- Navigate to `{baseUrl}{route.path}`
77	- Wait for `route.waitFor` selector (if specified)
78	- Resize viewport to `{viewport.width} x {viewport.height}`
79	- Capture full-page screenshot
80	- Save to `{outputDir}/screenshots/{route.name}-{viewport.name}.png`
81
82	Output structure:
83	```
84	{outputDir}/screenshots/
85	Dashboard-desktop.png
86	Dashboard-mobile.png
87	Features-desktop.png
88	Features-mobile.png
89	Settings-desktop.png
90	Settings-mobile.png
91	```
92
93	### Step 2: Device Frame Compositing
94
95	Uses Sharp to overlay screenshots onto realistic device bezels.
96
97	Process:
98	1. Load device frame template (bezel image with transparent screen area)
99	2. Resize screenshot to match device screen region
100	3. Composite screenshot behind bezel layer
101	4. Output final framed image
102
103	Viewport-to-device mapping:
104	- `desktop` (width >= 1024) → laptop frames (MacBook Pro, etc.)
105	- `mobile` (width < 768) → phone frames (iPhone 15, Galaxy, etc.)
106	- `tablet` (768 <= width < 1024) → tablet frames (iPad, etc.)
107
108	Output structure:
109	```
110	{outputDir}/framed/
111	Dashboard-desktop-macbook-pro.png
112	Dashboard-mobile-iphone-15-pro.png
113	Features-desktop-macbook-pro.png
114	...
115	```
116
117	### Step 3: GIF Generation
118
119	Uses gifencoder + canvas to stitch framed screenshots into animated GIFs.
120
121	Process:
122	1. Group framed screenshots by device type
123	2. For each device group:
124	- Create GIF encoder with device output dimensions
125	- Set frame delay, quality, and repeat settings
126	- Add each framed screenshot as a frame
127	- Write animated GIF file
128	3. Verify file sizes against `maxSize` config
129
130	Output structure:
131	```
132	{outputDir}/gifs/
133	macbook-pro-demo.gif
134	iphone-15-pro-demo.gif
135	```
136
137	## Configuration Reference
138
139	See `references/pipeline-config.md` for the complete configuration schema.
140
141	## Device Frames
142
143	See `references/device-frames.md` for the catalog of available device templates.
144
145	## Viewport Presets
146
147	See `references/viewport-presets.md` for standard viewport configurations.
148
149	## Integration with Landing Page Generator
150
151	This skill is used by the `/landing-page-generator` slash command. The command:
152	1. Reads your pipeline config
153	2. Orchestrates capture → frame → GIF steps
154	3. Generates React components that use the output assets
155	4. Handles deployment
156
157	## Troubleshooting
158
159	### Sharp installation fails
160	Sharp requires native dependencies. On some systems:
161	```bash
162	npm install --platform=linuxmusl sharp # Alpine Linux
163	npm install sharp --ignore-scripts && npx node-gyp rebuild # Manual rebuild
164	```
165
166	### GIFs are too large
167	- Reduce `gif.quality` (lower = smaller, range 1-30)
168	- Reduce number of routes captured
169	- Increase `gif.frameDelay` (fewer perceived frames needed)
170	- Reduce viewport dimensions
171
172	### Screenshots are blank or incomplete
173	- Ensure `waitFor` selectors are correct
174	- Increase navigation timeout
175	- Verify `baseUrl` points to a running dev server
176	- Check that routes require no authentication (or handle auth in pipeline)
177
178	### Canvas installation fails
179	Canvas requires system dependencies:
180	`

People who liked this also viewed

6 picks

Type