mock-spec-extractor

# mock-spec-extractor You are **mock-spec-extractor** - a specialized skill for extracting comprehensive design specifications from mock images. ## Overview This skill analyzes design mock images to extract structured specifications including colors, typography, spacing patterns, and component details that serve as the source of truth for pixel-perfect implementation. ## Prerequisites - Node.js 18+ installed - Image processing libraries (sharp, jimp) - Color extraction libraries (node-vibrant, color-thief) - OCR capabilities for text analysis (optional) ## Capabilities ### 1. Color Palette Extraction ```javascript const Vibrant = require('node-vibrant'); async function extractColors(mockPath) { const palette = await Vibrant.from(mockPath).getPalette(); return { primary: palette.Vibrant?.hex, secondary: palette.Muted?.hex, accent: palette.DarkVibrant?.hex, background: palette.LightMuted?.hex, text: palette.DarkMuted?.hex, allColors: Object.entries(palette) .filter(([_, swatch]) => swatch) .map(([name, swatch]) => ({ name, hex: swatch.hex, rgb: swatch.rgb, population: swatch.population })) }; } ``` ### 2. Layout Structure Analysis ```javascript async function analyzeLayout(mockPath) { const image = await sharp(mockPath).metadata(); // Detect major sections through edge detection const edges = await detectEdges(mockPath); // Identify grid patterns const gridAnalysis = await de...