What problem does it solve? Turning a screenshot or design mockup into working code usually involves tedious manual measurement of colors, spacing, and typography, often resulting in implementations that only vaguely resemble the original. This Skill provides a structured three-phase workflow (analyze, build, validate) to reproduce a UI from an image with pixel-perfect accuracy. ## Core Features & Use Cases - Systematic Visual Analysis: Extracts exact hex colors, typography scales, spacing systems, and a full component inventory from the reference image before any code is written. - Fidelity-First Construction Rules: Enforces exact layout, color, typography, component, and content matching, including hover, focus, and scroll interaction states. - Validation Checklist & Iteration: Compares the rendered output against the source image with an 11-point visual checklist and guidance for fixing common mismatches. - Use Case: A user pastes a Dribbble shot of a dark-themed dashboard and asks to recreate it. The Skill extracts the layered dark backgrounds, accent colors, and card structure, then builds a matching React component and verifies it against the checklist. ## Quick Start Recreate the UI from this attached screenshot as a pixel-perfect component in my project.
