visual-verdict

<Purpose> Use this skill to compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration. </Purpose>

• The task includes visual fidelity requirements (layout, spacing, typography, component styling)
• You have a generated screenshot and at least one reference image
• You need deterministic pass/fail guidance before continuing edits </Use_When>

<Inputs> - `reference_images[]` (one or more image paths) - `generated_screenshot` (current output image) - Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`) </Inputs>

• score

  : integer 0-100

• verdict

  : short status (

  pass

  ,

  revise

  , or

  fail

  )

• category_match

  :

  true

  when the generated screenshot matches the intended UI category/style

• differences[]

  : concrete visual mismatches (layout, spacing, typography, colors, hierarchy)

• suggestions[]

  : actionable next edits tied to the differences

• reasoning

  : 1-2 sentence summary

• Target pass threshold is 90+.
• If

  score < 90

  , continue editing and rerun

  $visual-verdict

  before any further code edits in the next iteration.
• Persist the verdict in

  .omx/state/{scope}/ralph-progress.json

  with both:
  • numeric signal (

    score

    , threshold pass/fail)
  • qualitative signal (

    reasoning

    ,

    suggestions

    ,

    next_actions

    ) </Threshold_And_Loop>

1. Keep

   $visual-verdict

   as the authoritative decision.
2. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
3. Convert pixel diff hotspots into concrete

   differences[]

   and

   suggestions[]

   updates. </Debug_Visualization>

<Example> ```json { "score": 87, "verdict": "revise", "category_match": true, "differences": [ "Top nav spacing is tighter than reference", "Primary button uses smaller font weight" ], "suggestions": [ "Increase nav item horizontal padding by 4px", "Set primary button font-weight to 600" ], "reasoning": "Core layout matches, but style details still diverge." } ``` </Example>