¿Qué hace design-pass?
Destino: $ARGUMENTS
Toolkit: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · Checklist: ${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. Línea base (antes de tocar código)
Asegúrate de que el servidor de desarrollo esté en ejecución (inícialo en segundo plano si es necesario; nunca ejecutes una compilación de producción), luego:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. Auditoría antes de parchear
- Encuentra todos los componentes que renderiza el destino, y todos los demás lugares que renderizan el mismo patrón (busca nombres de clase y nombres de componente).
- Reutiliza un primitivo existente (botón, tarjeta, modal, encabezado de sección) antes de escribir uno nuevo. Si el mismo marcado aparece 2+ veces, extráelo, luego reestiliza una vez.
- Construye exactamente lo que se pidió. Sin secciones nuevas, insignias, alternadores ni animaciones a menos que se soliciten.
- Usa solo los tokens del proyecto. Si un valor no está en la escala, usa el paso más cercano, o propón un token (consulta
design-ref).
3. Aplica
Trabaja a través de la lista de verificación: jerarquía, una acción principal por vista, la escala de espaciado, la escala tipográfica, estados vacío/cargando/error, y entradas ≥ 16 px en móvil.
4. Verifica
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- Lee las hojas posteriores para cada ancho en modo claro y oscuro. Mira los PNG de diff para detectar cambios no deseados fuera del destino.
- Verificación de escala de grises: vuelve a ejecutar un ancho con
--inject "document.documentElement.style.filter='grayscale(1)'". - Luego el conjunto completo de anchos de
ui-audituna vez, y typecheck + lint (sin compilación). - Si el proyecto mantiene un archivo de Figma sincronizado con el código, actualiza los marcos correspondientes en la misma tarea.
Criterios de salida
- Sin desplazamiento lateral, sin nuevos hallazgos de contraste o axe en comparación con el anterior.
- El diff muestra cambios solo donde se pretendía.
- No hay un nuevo componente que duplique uno existente, y sin UI no solicitada.
- Modo oscuro verificado, o confirmado que el proyecto no tiene.
- Typecheck y lint pasan.
- Un breve resumen para el usuario, más las rutas de 1 a 2 hojas que vale la pena revisar.