Las skills que uso todos los días

Revisa una pantalla, un flujo, una rama o un PR pasando por todas las skills de interfaz, y devuelve un veredicto, ordenado, con archivo y línea en cada hallazgo.

El acabado con valores exactos: radio concéntrico, sombra en lugar de borde, contorno de imagen, alineación óptica, presión en 0.96, cambio de ícono, entradas, salidas y gestos.

Cómo se renderiza el texto: elegir y cargar fuentes, la escala, el interlineado, el ajuste con balance y pretty, números tabulares, truncado y puntuación.

El sistema de color: rampas en OKLCH, tokens por función, conversión de formato, gamut, contraste medido en el par que realmente se renderiza y tema oscuro.

Teclado y foco, nombre accesible, semántica, formularios, lector de pantalla, área táctil y movimiento reducido, según WCAG 2.2.

Agrupación, alineación, orden de lectura, breakpoints que salen del contenido y espacio para el texto traducido, para que el layout aguante ser redimensionado, traducido o espejado.

El texto de la interfaz: etiquetas que nombran la acción, errores que dicen qué hacer, estados vacíos que enseñan y confirmaciones que nombran la consecuencia.

Tres versiones realmente distintas de un componente, en un eje que tú nombras, detrás de un selector en la página real. Alternas y promueves la que gane.

Explica cómo se hizo una interfaz, un efecto o una animación de otro sitio, separando lo medido de lo deducido, y cierra con la receta que se lleva a tu proyecto.

Renderiza un componente bajo todo escenario que lo alcanza en producción, texto enorme, cero elementos, 320px, RTL, en una página temporal, y marca lo que se rompió.

Un banco de trabajo con cada estado de un componente, cargando, vacío, error, plan y permiso, con datos de prueba y un selector por teclado, para trabajar uno a la vez.

Construye a partir de un enlace de Figma o una captura, con los tokens y componentes del proyecto, y compara lado a lado antes de darlo por terminado.

Una entrevista dura antes de construir, una pregunta a la vez, hasta que no quede decisión abierta.

1. ¿Quién puede cancelar: la persona, soporte, o los dos?
   Recomiendo los dos, con motivo obligatorio para soporte.

Proyecto nuevo: stack con justificación escrita, seguridad desde el día uno, infraestructura reproducible y el ciclo de feedback antes del primer commit.

Stack       Next.js + Postgres, porque…
Seguridad   headers, secrets fuera del repo, CI con auditoría
Ciclo       lint + tipos + tests antes del 1er commit

Rojo, verde, refactoriza, una porción vertical a la vez.

✗ prorates a mid-cycle upgrade      rojo, por la razón correcta
✓ prorates a mid-cycle upgrade      verde, lo mínimo
↺ extrae daysLeft()                 refactoriza, sigue verde

Bugs difíciles y regresiones de rendimiento, en seis fases con un control entre ellas: reproducir, aislar, minimizar, explicar, corregir, bloquear.

Fase 1  Reproducido: 2 entregas con 40ms de diferencia
Fase 3  Mínimo: sin lock en la clave de idempotencia
Control  test en rojo antes del fix, verde después

El diff en dos ejes que no se contaminan, estándar y spec, en subagentes paralelos.

Estándar  2 hallazgos   catch genérico en billing.ts:88
Spec      1 hallazgo    falta el reembolso parcial del issue

Auditoría en todas las capas, seguridad primero, a partir de un mínimo innegociable de diez puntos, con el fix específico en cada hallazgo.

[CRÍTICO] query sin límite en payouts.ts:41
[ALTO]    retry sin backoff en el gateway
Veredicto corrige antes

Cinco checks obligatorios, flujos reales de punta a punta, casos límite, y lo que debería estar testeado y no lo está.

✓ build, tipos, lint, tests, flujo feliz
✗ cupón vencido en medio del checkout: 500
Gap: ningún test cubre cambio de moneda

Auditoría en tres niveles, y el tercero encadena hallazgos medios hasta volverlos críticos.

Cadena: ID secuencial + ruta sin chequeo de dueño + email en la respuesta
        = cualquiera lista todos los clientes [CRÍTICO]

Un control de seguridad, reproducibilidad desde un clon limpio, y los checks de cada modelo de distribución.

✓ un clon limpio compila y arranca
✗ a .env.example le falta STRIPE_WEBHOOK_SECRET
✓ migraciones reversibles, healthcheck real

El enrutador sobre todas las demás. Describe la situación y te dice qué skill la resuelve, y por qué.

/break: renderiza la tarjeta con el peor contenido en una página
y dice qué skill es dueña de cada rotura.