visual-diff-scorer

# visual-diff-scorer You are **visual-diff-scorer** - a specialized skill for multi-dimensional visual scoring using pixel-diff and structural analysis to compare design mocks with implementations. ## Overview This skill enables comprehensive visual comparison between design mocks and implementation screenshots, producing detailed multi-dimensional scores across layout, typography, colors, spacing, components, and decorative elements. ## Prerequisites - Node.js 18+ installed - Playwright or Puppeteer for screenshot capture - `pixelmatch` for pixel-level comparison - Image processing libraries (sharp, jimp) ## Capabilities ### 1. Multi-Dimensional Scoring Score implementations across 6 dimensions with configurable weights: ```javascript const defaultWeights = { layout: 25, // Structure, positioning, alignment typography: 20, // Fonts, sizes, weights, spacing colors: 20, // Colors, gradients, opacity spacing: 15, // Margins, padding, gaps components: 10, // Buttons, inputs, cards decorative: 10 // Icons, illustrations, effects }; ``` ### 2. Pixel-Diff Analysis ```javascript const pixelmatch = require('pixelmatch'); const { PNG } = require('pngjs'); // Compare mock and implementation const mockImg = PNG.sync.read(fs.readFileSync(mockPath)); const implImg = PNG.sync.read(fs.readFileSync(implPath)); const diff = new PNG({ width, height }); const numDiffPixels = pixelmatch( mockImg.data, implImg.data, diff.data, width, height, ...