visual-review

Name: visual-review
Author: dsifry

361stars51forks

How to install visual-review?

dsifry/metaswarm/visual-review

$npx -y skills add dsifry/metaswarm --skill visual-review

Installs into the current project.

Summary

Take screenshots of web pages and UI using Playwright for visual review and iteration

Files · 1

View on GitHub

SKILL.md

1	# Visual Review
2
3	## Purpose
4
5	Agents cannot see rendered web pages, presentations, or UI. This skill bridges that gap by using Playwright to capture screenshots of web pages (local files, localhost servers, or deployed URLs) so agents can visually inspect their work, identify layout issues, and iterate.
6
7	This is especially useful for:
8	- Reveal.js presentations — capture each slide individually
9	- Web UIs — verify layout, styling, and responsiveness
10	- Landing pages — check visual design matches intent
11	- Email templates — verify rendering
12
13	## Prerequisites
14
15	This skill requires Playwright to be available. Before first use, check and install if needed:
16
17	```bash
18	# Check if Playwright is available
19	npx playwright --version 2>/dev/null
20
21	# If not available, install it (one-time setup)
22	npx playwright install chromium
23	```
24
25	Important: Only the `chromium` browser is needed. Do not install all browsers — it wastes disk space and time.
26
27	If `npx playwright` fails entirely, the user may need to install it:
28	```bash
29	npm install -g playwright
30	npx playwright install chromium
31	```
32
33	## Workflow
34
35	### Phase 1: Setup
36
37	1. Verify Playwright is available — run `npx playwright --version`
38	2. If not installed — run `npx playwright install chromium` and inform the user
39	3. Create output directory — `mkdir -p /tmp/visual-review`
40	4. Determine the target — local file path, localhost URL, or deployed URL
41
42	### Phase 2: Capture Screenshots
43
44	#### For a single page:
45
46	```bash
47	npx playwright screenshot \
48	--browser chromium \
49	--viewport-size "1456,816" \
50	--wait-for-timeout 3000 \
51	"<URL_OR_FILE_PATH>" \
52	/tmp/visual-review/page.png
53	```
54
55	Parameters:
56	- `--viewport-size "1456,816"` — 16:9 aspect ratio, good for presentations
57	- `--wait-for-timeout 3000` — wait 3 seconds for fonts, images, and animations to settle
58	- Use `file:///absolute/path/to/file.html` for local files
59	- Use full URLs for deployed sites
60
61	#### For Reveal.js presentations (multiple slides):
62
63	Capture each slide by appending the slide hash to the URL:
64
65	```bash
66	# Capture all slides (adjust count as needed)
67	for i in $(seq 0 15); do
68	npx playwright screenshot \
69	--browser chromium \
70	--viewport-size "1456,816" \
71	--wait-for-timeout 2000 \
72	"<BASE_URL>#/$i" \
73	"/tmp/visual-review/slide-$i.png"
74	done
75	```
76
77	Tip: To capture slides with all fragments visible, add `?fragments=true` or use JavaScript injection via a Playwright script. The simpler approach is to accept that fragment-heavy slides will appear in their initial (pre-click) state.
78
79	#### For responsive testing:
80
81	```bash
82	# Mobile
83	npx playwright screenshot --viewport-size "390,844" "<URL>" /tmp/visual-review/mobile.png
84
85	# Tablet
86	npx playwright screenshot --viewport-size "768,1024" "<URL>" /tmp/visual-review/tablet.png
87
88	# Desktop wide
89	npx playwright screenshot --viewport-size "1920,1080" "<URL>" /tmp/visual-review/desktop.png
90	```
91
92	### Phase 3: Show and Review Screenshots
93
94	Use the Read tool to analyze each screenshot:
95
96	```
97	Read /tmp/visual-review/slide-0.png
98	Read /tmp/visual-review/slide-1.png
99	...
100	```
101
102	Showing screenshots to the user: The agent can see screenshots via Read, but the user cannot. When the user wants to see what you see — or when you want to discuss a visual issue together — there are two approaches depending on the environment:
103
104	Local machine (has a display):
105
106	```bash
107	# Open a specific screenshot
108	open /tmp/visual-review/slide-2.png
109
110	# Open all screenshots at once
111	open /tmp/visual-review/slide-*.png
112	```
113
114	Remote/headless machine (SSH, tmux, etc.):
115
116	Serve the screenshots directory over HTTP so the user can view them in their local browser:
117
118	```bash
119	# Start a simple file server (runs in background)
120	# Use a high port (>10000) to avoid conflicts with dev tools
121	python3 -m http.server 18080 --directory /tmp/visual-review &
122
123	# User can now browse to:
124	# http://<hostname>:18080/
125	# http://<hostname>:18080/slide-2.png
126	# etc.
127	```
128
129	Pick any open high-numbered port (18080, 19090, etc.) — low ports like 8080 are often taken by dev tools. This serves the entire `/tmp/visual-review/` directory with an auto-generated file listing. The user can click through all screenshots in their browser. Stop the server when done:
130
131	```bash
132	# Stop the background server
133	kill %1
134	# Or find and kill by port
135	lsof -ti:18080 \| xargs kill
136	```
137
138	Use whichever approach fits the environment. This is useful when collaborating on visual issues, when the user asks what something looks like, or when you want confirmation on a subjective design choice.
139
140	For each screenshot, evaluate:
141	- Layout — Is content centered/aligned as intended?
142	- Typography — Are headings, body text, and code r

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

visual-review

361stars51forks

View on GitHub

How to install visual-review?

dsifry/metaswarm/visual-review

$npx -y skills add dsifry/metaswarm --skill visual-review

Installs into the current project.

Summary

Take screenshots of web pages and UI using Playwright for visual review and iteration

Files · 1

View on GitHub

SKILL.md

1	# Visual Review
2
3	## Purpose
4
5	Agents cannot see rendered web pages, presentations, or UI. This skill bridges that gap by using Playwright to capture screenshots of web pages (local files, localhost servers, or deployed URLs) so agents can visually inspect their work, identify layout issues, and iterate.
6
7	This is especially useful for:
8	- Reveal.js presentations — capture each slide individually
9	- Web UIs — verify layout, styling, and responsiveness
10	- Landing pages — check visual design matches intent
11	- Email templates — verify rendering
12
13	## Prerequisites
14
15	This skill requires Playwright to be available. Before first use, check and install if needed:
16
17	```bash
18	# Check if Playwright is available
19	npx playwright --version 2>/dev/null
20
21	# If not available, install it (one-time setup)
22	npx playwright install chromium
23	```
24
25	Important: Only the `chromium` browser is needed. Do not install all browsers — it wastes disk space and time.
26
27	If `npx playwright` fails entirely, the user may need to install it:
28	```bash
29	npm install -g playwright
30	npx playwright install chromium
31	```
32
33	## Workflow
34
35	### Phase 1: Setup
36
37	1. Verify Playwright is available — run `npx playwright --version`
38	2. If not installed — run `npx playwright install chromium` and inform the user
39	3. Create output directory — `mkdir -p /tmp/visual-review`
40	4. Determine the target — local file path, localhost URL, or deployed URL
41
42	### Phase 2: Capture Screenshots
43
44	#### For a single page:
45
46	```bash
47	npx playwright screenshot \
48	--browser chromium \
49	--viewport-size "1456,816" \
50	--wait-for-timeout 3000 \
51	"<URL_OR_FILE_PATH>" \
52	/tmp/visual-review/page.png
53	```
54
55	Parameters:
56	- `--viewport-size "1456,816"` — 16:9 aspect ratio, good for presentations
57	- `--wait-for-timeout 3000` — wait 3 seconds for fonts, images, and animations to settle
58	- Use `file:///absolute/path/to/file.html` for local files
59	- Use full URLs for deployed sites
60
61	#### For Reveal.js presentations (multiple slides):
62
63	Capture each slide by appending the slide hash to the URL:
64
65	```bash
66	# Capture all slides (adjust count as needed)
67	for i in $(seq 0 15); do
68	npx playwright screenshot \
69	--browser chromium \
70	--viewport-size "1456,816" \
71	--wait-for-timeout 2000 \
72	"<BASE_URL>#/$i" \
73	"/tmp/visual-review/slide-$i.png"
74	done
75	```
76
77	Tip: To capture slides with all fragments visible, add `?fragments=true` or use JavaScript injection via a Playwright script. The simpler approach is to accept that fragment-heavy slides will appear in their initial (pre-click) state.
78
79	#### For responsive testing:
80
81	```bash
82	# Mobile
83	npx playwright screenshot --viewport-size "390,844" "<URL>" /tmp/visual-review/mobile.png
84
85	# Tablet
86	npx playwright screenshot --viewport-size "768,1024" "<URL>" /tmp/visual-review/tablet.png
87
88	# Desktop wide
89	npx playwright screenshot --viewport-size "1920,1080" "<URL>" /tmp/visual-review/desktop.png
90	```
91
92	### Phase 3: Show and Review Screenshots
93
94	Use the Read tool to analyze each screenshot:
95
96	```
97	Read /tmp/visual-review/slide-0.png
98	Read /tmp/visual-review/slide-1.png
99	...
100	```
101
102	Showing screenshots to the user: The agent can see screenshots via Read, but the user cannot. When the user wants to see what you see — or when you want to discuss a visual issue together — there are two approaches depending on the environment:
103
104	Local machine (has a display):
105
106	```bash
107	# Open a specific screenshot
108	open /tmp/visual-review/slide-2.png
109
110	# Open all screenshots at once
111	open /tmp/visual-review/slide-*.png
112	```
113
114	Remote/headless machine (SSH, tmux, etc.):
115
116	Serve the screenshots directory over HTTP so the user can view them in their local browser:
117
118	```bash
119	# Start a simple file server (runs in background)
120	# Use a high port (>10000) to avoid conflicts with dev tools
121	python3 -m http.server 18080 --directory /tmp/visual-review &
122
123	# User can now browse to:
124	# http://<hostname>:18080/
125	# http://<hostname>:18080/slide-2.png
126	# etc.
127	```
128
129	Pick any open high-numbered port (18080, 19090, etc.) — low ports like 8080 are often taken by dev tools. This serves the entire `/tmp/visual-review/` directory with an auto-generated file listing. The user can click through all screenshots in their browser. Stop the server when done:
130
131	```bash
132	# Stop the background server
133	kill %1
134	# Or find and kill by port
135	lsof -ti:18080 \| xargs kill
136	```
137
138	Use whichever approach fits the environment. This is useful when collaborating on visual issues, when the user asks what something looks like, or when you want confirmation on a subjective design choice.
139
140	For each screenshot, evaluate:
141	- Layout — Is content centered/aligned as intended?
142	- Typography — Are headings, body text, and code r

People who liked this also viewed

6 picks

Type