Visual Reference Calibration

Use this when the user points to a visual reference and wants a UI to borrow its feel, quality, interaction, surface treatment, motion, or style.

Do not use this merely because a screenshot is attached. If the screenshot only marks a bug, awkward edge, or region to review, treat it as evidence for the existing UI and continue with design-review.

This skill exists because we badly missed the Jhey CodePen portfolio-card task by translating a visual reference into implementation mechanics instead of design judgment.

Core rule

Do not code first.

First identify what the reference is actually contributing, confirm that with the user when ambiguous, then create or inspect a visual target before implementation.

Failure pattern to avoid