Implement a UI screen, page, or component to match a reference image — mockup, screenshot, or photographic render — with visual fidelity that survives the target's aspect ratio, while keeping every rendered value and every affordance honest: real data and working features only, never mockup values transcribed into code, placeholders fabricated to fill the layout, or stubbed controls that look real but do nothing.
TRIGGER when: user hands you a design image, mockup, screenshot, photographic reference, Figma frame, or exported comp and asks to build, implement, match, recreate, or "make it look like" it.
SKIP: originating a visual direction with no reference image (use the frontend-design skill); pure copy or content edits; backend-only work with no screen to match.
2026-07-10