visual-verdict

# 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 | Description | |-----------|--------|-------------| | Layout accuracy | 0.25 | Positioning, spacing, alignment of all elements | | Typography | 0.15 | Font family, size, weight, line-height, letter-spacing | | Color accuracy | 0.15 | Background, text, border, shadow, gradient colors | | Responsi...