match-the-mocklisted

# Match the mock Take a visual target (a mock image, screenshot, or design) and drive a UI to match it using a **see-and-correct loop**: implement → screenshot the running app → compare to the target → fix the diffs → repeat. This is the same workflow as the `/screenshot-iterate` slash command, packaged as a skill so it fires automatically when Kyle hands over a design to match — he doesn't have to remember to invoke it. ## When this skill fires - Kyle provides a mock / design / screenshot and asks to build or match it ("make it look like this", "implement this design", "match this mock"). - Kyle asks to pixel-tune or visually polish an existing screen against a reference. - He drops a Figma link or an image and describes a UI to produce. ## When NOT to use it - No visual target and none obtainable → this loop has nothing to check against; just build normally. - The gap is behavioral/logical, not visual → use the test-first loop instead. - "Is it fun / does it feel right" judgments → that's a human playtest, not a screenshot diff. ## The loop ### 1. Lock the target Look at the provided image. Enumerate the concrete, checkable attributes you'll iterate on: layout & alignment, spacing, colors, typography, component states. If no image is available, ask for one or a precise description before writing code. ### 2. Get eyes on the running app - Make sure the dev server is running and you know the exact URL/route for the view in question. Start it if needed. - Make