Visual Verify
SkillDev toolsProve a visual change by looking at the rendered surface — screenshot it and compare to the reference before saying done. Use after any UI, layout, theme, or color change, or when the user says it still looks wrong or doesn't match.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Visual Verify skill
What this skill tells your AI
The instructions your AI receives, as published by outthislife/brooklyn-skills in skills/visual-verify/SKILL.md and read by ahel’s review.
Never report a visual, layout, or theme change as done based on the diff or a passing test. Look at the running surface.
Steps
- Run the actual surface (dev server, app, TUI/GUI, Storybook — whatever shows this UI). Don't start one the user already has running.
- Capture what it looks like — screenshot it, or tell the user exactly how to see it.
- Compare against the reference: the design (Figma/mock), the sibling surface it should match, or the before state. Name the specific things you checked (color values, spacing, border, active state, contrast).
- If it doesn't match, keep the debug logging and iterate. Only say "done" once it visibly matches.
Don't
- Claim a theme/color change works because the token math looks right — verify the rendered value.
- Delete instrumentation while the visual is still wrong.
- Trust unit tests as proof a UI renders correctly.
Signals
- GitHub stars
- 192
- Forks
- 6
- Last commit
- Aug 2026
Advanced
- Catalog kind
- skill
- Gateway key
visual-verify- Source
- github.com/outthislife/brooklyn-skills