visual-verdict
Screenshot comparison QA for frontend development. Takes a screenshot of the current implementation, scores it across multiple visual dimensions, and returns a structured PASS/REVISE/FAIL verdict with concrete fixes. Use when implementing UI from a design reference or verifying visual correctness.
npx skills add vibeeval/vibecosystem --skill visual-verdict --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Visual Verdict — Screenshot QA Skill Pixel-imprecise human eyes miss visual bugs. This skill provides structured, scored visual review using screenshots, returning actionable verdicts rather than vague impressions. ## When to Activate - After a frontend-dev agent implements a UI component or page - When cloning an external website (pairs with clone-website skill) - After CSS changes to verify no visual regressions - When a designer provides a Figma export or reference screenshot - Before marking any UI task as complete ## How It Works ``` 1. Take screenshot of current implementation 2. Load reference (design mockup, Figma export, or previous version) 3. Score against 6 dimensions (0-100 each) 4. Compute weighted total score 5. Issue verdict: PASS (90+) / REVISE (60-89) / FAIL (<60) 6. List concrete mismatches with file + line fix hints 7. Loop: frontend-dev fixes → new screenshot → rescore → repeat until PASS ``` ## Prerequisites - browser-use MCP installed and active (`~/.mcp.json`) - Reference image available (Figma PNG export, screenshot, or URL) - Implementation running (local dev server or deployed URL) ## Scoring Dimensions ### Dimension Weights | Dimension | Weight | Descr
- When to Activate
- How It Works
- Prerequisites
- Scoring Dimensions
- Dimension Weights
- Weighted Score Formula
- Scoring Each Dimension (0-100)
- Verdict Thresholds
- Verdict Output Format
- Screenshot Workflow with browser-use MCP
- Taking the Current Implementation Screenshot
- Loading the Reference
- Responsive Testing Breakpoints
- Integration with frontend-dev Agent
cp /tmp/verdict-current-{timestamp}.png \What does the visual-verdict skill do?
Screenshot comparison QA for frontend development. Takes a screenshot of the current implementation, scores it across multiple visual dimensions, and returns a structured PASS/REVISE/FAIL verdict with concrete fixes. Use when implementing UI from a design reference or verifying visual correctness.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill visual-verdict --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.