Visual Validation — Autonomous Screenshot Verification
SkillDev toolsvisual-validation is a skill that gives your AI the ability to run visual validation as part of its work. It comes from the maggy project, an autonomous AI engineering command center that began as a Claude Code setup kit. Once added, your AI can check visual results on its own as it works through tasks.
Available today. Use it from your connected AI after setup.
No other account needed.
After adding it, ask your AI to use visual validation the next time it works on a task. The skill comes from the maggy project on GitHub if you want to learn more about where it comes from.
Then ask your AI: use the Visual Validation — Autonomous Screenshot Verification skill
What your AI can do with it
- Run visual validation checks
- Check visual results as part of its engineering tasks
- Handle more of the review work itself instead of asking you for every check
What this skill tells your AI
The instructions your AI receives, as published by alinaqi/maggy in skills/visual-validation/SKILL.md and read by ahel’s review.
Philosophy
Every UI change should be visually verified before it ships. Peekaboo captures pixel-accurate screenshots. The system compares before/after and flags visual regressions. No manual "looks good to me" — the machine verifies what the machine built.
Autonomous Flow
static/* files modified (detected by auto-review-hook or E2E testkit)
↓
peekaboo image --mode screen → ~/.maggy/visual-verify/after-{ts}.png
↓
Compare with latest baseline (previous after-*.png)
↓
AI evaluation: Gemini Flash analyzes screenshot for visual regressions
↓
Report: CLEAN or REGRESSION_DETECTED with specific issues
Quick Commands
# Install
brew install steipete/tap/peekaboo
# Capture full system screenshot
peekaboo image --mode screen --retina --path /tmp/screen.png
# Capture specific window
peekaboo image --mode window --app "Google Chrome" --path /tmp/window.png
# Verify Maggy dashboard after code change
peekaboo image --mode window --app "Google Chrome" --path ~/.maggy/visual-verify/after-$(date -u +%Y%m%d-%H%M%S).png
# Compare two screenshots
ls -la ~/.maggy/visual-verify/after-*.png # review before/after pairs
Autonomous Verification Flow (Claude Code)
# After making any static/ file change, Claude should:
1. git add maggy/maggy/static/ && git diff --stat HEAD # check what changed
2. Restart Maggy: lsof -ti :8080 | xargs kill && python3 -m maggy.main &
3. Wait for health: curl -s http://localhost:8080/api/health
4. Capture screenshot: peekaboo image --mode screen --path ~/.maggy/visual-verify/after-$(date -u +%Y%m%d-%H%M%S).png
5. Compare with latest baseline in ~/.maggy/visual-verify/
6. AI evaluation: ~/bin/gemini-api --flash "Analyze this screenshot for visual regressions"
7. Report findings
Maggy Dashboard Verification
# One-shot verification
curl -s http://localhost:8080/api/health && \
peekaboo image --mode screen --path ~/.maggy/visual-verify/verify.png && \
echo "✓ Dashboard verified — screenshot at ~/.maggy/visual-verify/verify.png"
Integration Points
Auto-Review Hook (already wired)
- Detects
static/changes in git diff - Auto-captures Peekaboo screenshot
- Saves before/after pairs in
~/.maggy/visual-verify/
E2E Testkit Plugin
- Visual regression testing as part of
POST /api/testkit/run - Compares screenshots against baselines
- Flags pixel differences above threshold
Build-in-Public Plugin
- Peekaboo screenshots replace AI-generated images
- Real product captures for LinkedIn/X posts
When to Use
| Scenario | Command |
|---|---|
| After static/ change | peekaboo image --mode screen --path ~/.maggy/visual-verify/after.png |
| Before committing UI change | Run verification flow above |
| Reviewing dashboard | Screenshot + AI analysis |
| Build-in-public post | Auto-captured by plugin |
| Cross-browser check | peekaboo image --mode window --app "Safari" |
Signals
- GitHub stars
- 707
- Forks
- 56
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
visual-validation- Source
- github.com/alinaqi/maggy