Visual tester

Skill incubrain/foundry/skills/visual-tester

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".From its SKILL.md

Install

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

3.4 KB, 684 tokens by cl100k_base, as published. Nobody here has run it

Visual Testing with agent-browser

Extends the agent-browser skill with visual testing workflows for UI/UX bug detection.

Quick Start

# One-command visual review
bash .claude/scripts/visual-review.sh https://localhost:3000

# Review a specific section
bash .claude/scripts/visual-review.sh https://localhost:3000 "#hero"

Visual Review Workflow

1. Full Page Review

agent-browser --session visual-review open https://localhost:3000
agent-browser --session visual-review wait --load networkidle
agent-browser --session visual-review screenshot --annotate
# Analyze the annotated screenshot for visual issues
# Report findings with @eN references
agent-browser --session visual-review close

2. Section-Scoped Review

agent-browser --session visual-review open https://localhost:3000
agent-browser --session visual-review wait --load networkidle
agent-browser --session visual-review snapshot -i -s "[data-testid='section-hero']"
agent-browser --session visual-review screenshot --annotate
agent-browser --session visual-review close

3. Before/After Comparison

# Capture baseline
agent-browser --session visual-baseline open https://localhost:3000
agent-browser --session visual-baseline wait --load networkidle
agent-browser --session visual-baseline screenshot baseline.png
agent-browser --session visual-baseline close

# After changes, capture and diff
agent-browser --session visual-after open https://localhost:3000
agent-browser --session visual-after wait --load networkidle
agent-browser --session visual-after diff screenshot --baseline baseline.png
agent-browser --session visual-after close

4. Responsive Testing (Desktop vs Mobile)

# Desktop capture
agent-browser --session desktop open https://localhost:3000
agent-browser --session desktop wait --load networkidle
agent-browser --session desktop screenshot --annotate

# Mobile capture (iOS Simulator)
agent-browser -p ios --device "iPhone 16 Pro" open https://localhost:3000
agent-browser -p ios screenshot mobile.png
agent-browser -p ios close

agent-browser --session desktop close

What to Check

Use the project's data-testid convention to scope reviews:

Section	Selector
Hero	`[data-testid="section-hero"]`
Benefits	`[data-testid="section-benefits"]`
FAQ	`[data-testid="section-faq"]`
Convert Form	`[data-testid="convert-form"]`
Pricing	`[data-testid="convert-pricing"]`

Findings Format

Always report findings in this structure:

**Visual Review: [page/component]**

**Findings:**
- [CRITICAL] @eN — description of issue
- [WARNING] @eN — description of issue
- [INFO] @eN — description of issue

**Screenshots:** path/to/screenshot.png
**Recommendation:** actionable fix

Severity levels:

CRITICAL: Broken layout, missing content, non-functional UI elements
WARNING: Spacing inconsistencies, minor alignment issues, contrast concerns
INFO: Cosmetic suggestions, polish opportunities

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.