Superficie de skills

Cuando se toma una decisión arquitectónica no trivial que futuros agentes deberían entender.

Ejemplo: registra por qué elegiste server actions en lugar de route handlers.

Después de cambios estructurales que afectan documentación, ADRs o controles de calidad.

Ejemplo: actualiza el ADR cuando cambia el límite de un componente.

Cuando se diseña la estructura de componentes, la gestión de estado o los límites entre servidor y cliente.

Ejemplo: decide si una página sigue siendo server-first o necesita una client island.

Cuando se crean componentes reutilizables o se refactorizan componentes con proliferación de props booleanas.

Ejemplo: divide una card en Card, CardHeader y CardBody en lugar de sumar props booleanas.

Cuando se agregan, personalizan o diagnostican componentes shadcn.

Ejemplo: compón un formulario con primitives de shadcn antes de escribir UI propia.

Cuando se optimizan renderizado, tamaño de bundle o patrones de carga de datos.

Ejemplo: memoiza solo cuando el profiling muestre un costo real de render.

Cuando se escriben tests E2E, se depuran tests inestables o se configura infraestructura de testing.

Ejemplo: cubre un cambio de locale con selectores estables y aserciones claras.

Cuando se automatizan interacciones de navegador o se depuran tests de Playwright.

Ejemplo: reproduce un bug ejecutando un flujo acotado desde la CLI.

Antes de dar una funcionalidad por terminada: ejecuta lint, typecheck, format y tests.

Ejemplo: corre lint, typecheck, format y tests antes de cerrar una tarea.

Antes de los commits para detectar problemas de mantenibilidad temprano.

Ejemplo: revisa una página antes del commit para detectar trabajo de cliente innecesario.

Cuando aparece comportamiento inesperado, fallos de tests o bugs difíciles de aislar.

Ejemplo: reduce un test fallido aislando una suposición por vez.

Al finalizar una tarea: asegura que la evidencia coincida con las afirmaciones.

Ejemplo: ejecuta el comando de verificación antes de decir que el fix terminó.

Cuando se escriben o depuran tests de Vitest, mocks o snapshots.

Ejemplo: prueba comportamiento async de la UI con await y aserciones precisas.

Cuando se implementa lógica de tipos compleja o utilidades de tipos reutilizables.

Ejemplo: modela una unión discriminada para una skill entry.

Cuando el proyecto migra a Cache Components y necesita decidir entre opt-outs temporales o refactors en sitio.

Ejemplo: habilitar `cacheComponents`, correr el codemod de adopción y limpiar rutas top-down.

Cuando una ruta ya adoptó Cache Components y querés mejorar qué contenido aparece en la shell o durante la navegación.

Ejemplo: comparar capturas antes/después para confirmar que una Suspense boundary dejó más contenido estático visible.

Cuando un cambio de Next.js necesita confirmar errores de framework, consola, red, rutas y comportamiento visible en navegador.

Ejemplo: cruzar `/_next/mcp` con una sesión de navegador para validar que una página compila y se comporta como se espera.