criterio: Command for Claude Code

/design-check — auditar contra el contrato

Argumento recibido (puede venir vacío): $ARGUMENTS

gate.mjs te dice qué falló. Tu trabajo es decir por qué importa y cómo se arregla, en el código real de este proyecto. Un exit code pegado sin traducir no le enseña nada a nadie.

---

Paso 1 — Ubica el script y el contrato

Busca scripts/gate.mjs, en este orden:

• .criterio/scripts/gate.mjs
• scripts/gate.mjs

Y busca brand.json en la raíz del proyecto.

Si no hay contrato, no audites nada contra nada. Di:

No hay brand.json en este proyecto, así que no hay contrato contra qué medir. Corre /design-init primero — son 8 preguntas.

Y ofrece correrlo. Un auditor sin contrato solo puede juzgar contra su propio gusto, y eso es justo lo que criterio no hace.

Paso 2 — Corre el gate

node <ruta>/scripts/gate.mjs

Si $ARGUMENTS trae una ruta, pásasela al script para acotar la revisión.

Interpretación del exit code:

• exit 0 — el contrato está limpio
• exit 1 — hay al menos un check en rojo

Paso 3 — Traduce cada fallo

Para cada check en rojo, escribe cuatro cosas. Nunca más, nunca menos:

1. Qué falló, en una frase sin jerga.
2. El valor concreto que lo provocó (el hex, el número, la línea, el archivo).
3. Por qué la regla existe. Una frase. No moralices.
4. El fix, aplicable, con el valor exacto que debería ir.

Formato:

✗ anti-slop / hue restringido
  tokens.colors.primary = #6366F1 → hue 239°
  El rango [235, 285] está bloqueado porque es el indigo por default del corpus
  de entrenamiento: sale gratis y no lo eligió nadie.
  Fix: elige un hue fuera del rango. Si tu archetype es Magician y el morado sí
  es una decisión, declara la excepción explícita en anti_slop.

Guía de traducción por familia de check:

Check	Cómo explicarlo
hue restringido	Es el indigo/morado por default. Excepción legítima solo si el archetype lo justifica y está declarada.
contraste	4.5:1 es el mínimo WCAG AA para texto de cuerpo. Verifica contra el fondo real que le queda encima, no contra el del body.
max_fonts	El problema rara vez es el número. Revisa también si alguna se usó en un contexto que su avoid_for[] prohíbe.
max_radius_values	Regla numérica: máximo 3. Cuando todo tiene el mismo radio, el radio deja de comunicar jerarquía.
props inseguras animadas	width, height, padding, margin, top, left, right, bottom fuerzan reflow en cada frame. El fix casi siempre es transform.
coherencia archetype ↔ ejes	El arquetipo restringe, no decora. Un Sage con hype: 4 es incoherente: o cambias el arquetipo o bajas el eje.
color fuera del contrato	Suele aparecer en hover, bordes y sombras: donde el agente improvisa cuando el contrato no llega. Añádelo a brand.json o cámbialo por un token existente.