visual-verdict

<Propósito> Usa este skill para comparar capturas de pantalla de interfaz de usuario generadas contra una o más imágenes de referencia y devolver un veredicto estricto en JSON que pueda guiar la siguiente iteración de edición. </Propósito>

<Cuándo_Usar>

• La tarea incluye requisitos de fidelidad visual (diseño, espaciado, tipografía, estilo de componentes).
• Tienes una captura de pantalla generada y al menos una imagen de referencia.
• Necesitas una guía determinista de aprobación/rechazo antes de continuar con las ediciones. </Cuándo_Usar>

<Contrato_de_Salida> Devuelve solo JSON con esta forma exacta:

{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "explicación breve"
}

Reglas:

• score: entero 0-100
• verdict: estado breve (pass, revise o fail)
• category_match: true cuando la captura generada coincide con la categoría/estilo de UI previsto
• differences[]: desajustes visuales concretos (diseño, espaciado, tipografía, colores, jerarquía)
• suggestions[]: próximas ediciones accionables vinculadas a las diferencias
• reasoning: resumen de 1-2 oraciones </Contrato_de_Salida>

<Umbral_y_Bucle>

• El umbral objetivo de aprobación es 90+.
• Si score < 90, continúa editando y vuelve a ejecutar /oh-my-claudecode:visual-verdict antes de cualquier revisión visual adicional.
• No consideres la tarea visual como completada hasta que la siguiente captura de pantalla supere el umbral. </Umbral_y_Bucle>

<Visualización_de_Depuración> Cuando el diagnóstico de desajustes sea difícil:

1. Mantén $visual-verdict como la decisión autoritativa.
2. Usa herramientas de diferencia a nivel de píxel (diferencia de píxeles / superposición de pixelmatch) como una ayuda de depuración secundaria para localizar puntos críticos.
3. Convierte los puntos críticos de diferencia de píxeles en actualizaciones concretas de differences[] y suggestions[]. </Visualización_de_Depuración>

Tarea: {{ARGUMENTS}}