incubrain/visual-tester
skills/visual-tester/SKILL.md
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".
$ install --global
skillsauthnpx skillsauth add incubrain/foundry visual-testerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 8:22 PM7.6s1 file scanned
SKILL.md
- name:
- visual-tester
- description:
- 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".
- allowed-tools:
- Bash(npx agent-browser:*), Bash(agent-browser:*), Bash(bash .claude/scripts/visual-review.sh:*)
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
Related Skills
incubrain/docs-writer
development
VerifiedTrustedCommunity
Creates and edits Dark Sky Conservation policy documentation for Maharashtra government officials and academics. Handles audience-appropriate tone, section-specific content rules (Research/Policy/Pilots), and orchestrates technical validation passes. Use when working on docs/content/ markdown files.
74SKILL.mdUpdated Apr 5, 2026
steipete/skill-creator
testing
VerifiedTrustedCommunity
Create, edit, improve, or audit AgentSkills. Use when creating a new skill from scratch or when asked to improve, review, audit, tidy up, or clean up an existing skill or SKILL.md file. Also use when editing or restructuring a skill directory (moving files to references/ or scripts/, removing stale content, validating against the AgentSkills spec). Triggers on phrases like "create a skill", "author a skill", "tidy up a skill", "improve this skill", "review the skill", "clean up the skill", "audit the skill".
356,423SKILL.mdUpdated Apr 13, 2026
steipete/healthcheck
testing
VerifiedTrustedCommunity
Host security hardening and risk-tolerance configuration for OpenClaw deployments. Use when a user asks for security audits, firewall/SSH/update hardening, risk posture, exposure review, OpenClaw cron scheduling for periodic checks, or version status checks on a machine running OpenClaw (laptop, workstation, Pi, VPS).
356,423SKILL.mdUpdated Apr 13, 2026
openclaw/skill-creator
testing
VerifiedTrustedCommunity
Create, edit, improve, or audit AgentSkills. Use when creating a new skill from scratch or when asked to improve, review, audit, tidy up, or clean up an existing skill or SKILL.md file. Also use when editing or restructuring a skill directory (moving files to references/ or scripts/, removing stale content, validating against the AgentSkills spec). Triggers on phrases like "create a skill", "author a skill", "tidy up a skill", "improve this skill", "review the skill", "clean up the skill", "audit the skill".
353,662SKILL.mdUpdated Apr 10, 2026