visual-tester

Name: visual-tester
Author: incubrain

78stars8forks

How to install visual-tester?

incubrain/foundry/visual-tester

$npx -y skills add incubrain/foundry --skill visual-tester

Installs into the current project.

Summary

Perform UI/UX visual reviews and detect layout/styling bugs using annotated snapshots from agent-browser. Use when asked to "review the UI", "check for visual bugs", "screenshot this page", "compare layouts", or "test responsive design".

Files · 1

View on GitHub

SKILL.md

1	# Visual Testing with agent-browser
2
3	Extends the agent-browser skill with visual testing workflows for UI/UX bug detection.
4
5	## Quick Start
6
7	```bash
8	# One-command visual review
9	bash .claude/scripts/visual-review.sh https://localhost:3000
10
11	# Review a specific section
12	bash .claude/scripts/visual-review.sh https://localhost:3000 "#hero"
13	```
14
15	## Visual Review Workflow
16
17	### 1. Full Page Review
18
19	```bash
20	agent-browser --session visual-review open https://localhost:3000
21	agent-browser --session visual-review wait --load networkidle
22	agent-browser --session visual-review screenshot --annotate
23	# Analyze the annotated screenshot for visual issues
24	# Report findings with @eN references
25	agent-browser --session visual-review close
26	```
27
28	### 2. Section-Scoped Review
29
30	```bash
31	agent-browser --session visual-review open https://localhost:3000
32	agent-browser --session visual-review wait --load networkidle
33	agent-browser --session visual-review snapshot -i -s "[data-testid='section-hero']"
34	agent-browser --session visual-review screenshot --annotate
35	agent-browser --session visual-review close
36	```
37
38	### 3. Before/After Comparison
39
40	```bash
41	# Capture baseline
42	agent-browser --session visual-baseline open https://localhost:3000
43	agent-browser --session visual-baseline wait --load networkidle
44	agent-browser --session visual-baseline screenshot baseline.png
45	agent-browser --session visual-baseline close
46
47	# After changes, capture and diff
48	agent-browser --session visual-after open https://localhost:3000
49	agent-browser --session visual-after wait --load networkidle
50	agent-browser --session visual-after diff screenshot --baseline baseline.png
51	agent-browser --session visual-after close
52	```
53
54	### 4. Responsive Testing (Desktop vs Mobile)
55
56	```bash
57	# Desktop capture
58	agent-browser --session desktop open https://localhost:3000
59	agent-browser --session desktop wait --load networkidle
60	agent-browser --session desktop screenshot --annotate
61
62	# Mobile capture (iOS Simulator)
63	agent-browser -p ios --device "iPhone 16 Pro" open https://localhost:3000
64	agent-browser -p ios screenshot mobile.png
65	agent-browser -p ios close
66
67	agent-browser --session desktop close
68	```
69
70	## What to Check
71
72	Use the project's `data-testid` convention to scope reviews:
73
74	\| Section \| Selector \|
75	\|---------\|----------\|
76	\| Hero \| `[data-testid="section-hero"]` \|
77	\| Benefits \| `[data-testid="section-benefits"]` \|
78	\| FAQ \| `[data-testid="section-faq"]` \|
79	\| Convert Form \| `[data-testid="convert-form"]` \|
80	\| Pricing \| `[data-testid="convert-pricing"]` \|
81
82	## Findings Format
83
84	Always report findings in this structure:
85
86	```
87	Visual Review: [page/component]
88
89	Findings:
90	- [CRITICAL] @eN — description of issue
91	- [WARNING] @eN — description of issue
92	- [INFO] @eN — description of issue
93
94	Screenshots: path/to/screenshot.png
95	Recommendation: actionable fix
96	```
97
98	Severity levels:
99	- CRITICAL: Broken layout, missing content, non-functional UI elements
100	- WARNING: Spacing inconsistencies, minor alignment issues, contrast concerns
101	- INFO: Cosmetic suggestions, polish opportunities

People who liked this also viewed

6 picks

Type

visual-tester

78stars8forks

View on GitHub

How to install visual-tester?

incubrain/foundry/visual-tester

$npx -y skills add incubrain/foundry --skill visual-tester

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Visual Testing with agent-browser
2
3	Extends the agent-browser skill with visual testing workflows for UI/UX bug detection.
4
5	## Quick Start
6
7	```bash
8	# One-command visual review
9	bash .claude/scripts/visual-review.sh https://localhost:3000
10
11	# Review a specific section
12	bash .claude/scripts/visual-review.sh https://localhost:3000 "#hero"
13	```
14
15	## Visual Review Workflow
16
17	### 1. Full Page Review
18
19	```bash
20	agent-browser --session visual-review open https://localhost:3000
21	agent-browser --session visual-review wait --load networkidle
22	agent-browser --session visual-review screenshot --annotate
23	# Analyze the annotated screenshot for visual issues
24	# Report findings with @eN references
25	agent-browser --session visual-review close
26	```
27
28	### 2. Section-Scoped Review
29
30	```bash
31	agent-browser --session visual-review open https://localhost:3000
32	agent-browser --session visual-review wait --load networkidle
33	agent-browser --session visual-review snapshot -i -s "[data-testid='section-hero']"
34	agent-browser --session visual-review screenshot --annotate
35	agent-browser --session visual-review close
36	```
37
38	### 3. Before/After Comparison
39
40	```bash
41	# Capture baseline
42	agent-browser --session visual-baseline open https://localhost:3000
43	agent-browser --session visual-baseline wait --load networkidle
44	agent-browser --session visual-baseline screenshot baseline.png
45	agent-browser --session visual-baseline close
46
47	# After changes, capture and diff
48	agent-browser --session visual-after open https://localhost:3000
49	agent-browser --session visual-after wait --load networkidle
50	agent-browser --session visual-after diff screenshot --baseline baseline.png
51	agent-browser --session visual-after close
52	```
53
54	### 4. Responsive Testing (Desktop vs Mobile)
55
56	```bash
57	# Desktop capture
58	agent-browser --session desktop open https://localhost:3000
59	agent-browser --session desktop wait --load networkidle
60	agent-browser --session desktop screenshot --annotate
61
62	# Mobile capture (iOS Simulator)
63	agent-browser -p ios --device "iPhone 16 Pro" open https://localhost:3000
64	agent-browser -p ios screenshot mobile.png
65	agent-browser -p ios close
66
67	agent-browser --session desktop close
68	```
69
70	## What to Check
71
72	Use the project's `data-testid` convention to scope reviews:
73
74	\| Section \| Selector \|
75	\|---------\|----------\|
76	\| Hero \| `[data-testid="section-hero"]` \|
77	\| Benefits \| `[data-testid="section-benefits"]` \|
78	\| FAQ \| `[data-testid="section-faq"]` \|
79	\| Convert Form \| `[data-testid="convert-form"]` \|
80	\| Pricing \| `[data-testid="convert-pricing"]` \|
81
82	## Findings Format
83
84	Always report findings in this structure:
85
86	```
87	Visual Review: [page/component]
88
89	Findings:
90	- [CRITICAL] @eN — description of issue
91	- [WARNING] @eN — description of issue
92	- [INFO] @eN — description of issue
93
94	Screenshots: path/to/screenshot.png
95	Recommendation: actionable fix
96	```
97
98	Severity levels:
99	- CRITICAL: Broken layout, missing content, non-functional UI elements
100	- WARNING: Spacing inconsistencies, minor alignment issues, contrast concerns
101	- INFO: Cosmetic suggestions, polish opportunities

People who liked this also viewed

6 picks

Type