yagyaraj234/skills

Preparación del frontend

Invoca como $frontend-readiness diff, $frontend-readiness pr <URL>, $frontend-readiness release, o $frontend-readiness full.

Usa las reglas de modo, evidencia, veredicto y edición en check-readiness. Cuando se invoca directamente, selecciona un modo allí. Cuando lo invoca check-readiness, mantén su objetivo seleccionado. Evalúa solo las superficies de frontend.

Evalúa las comprobaciones que aplican al objetivo elegido. Marca una excepción dentro del alcance como N/A con una razón. Una sección que no aplica (aplicación no pública para Búsqueda y compartición, sin framework para Convenciones del framework) es una línea N/A, no una por comprobación.

Áreas bloqueantes: flujo o ruta crítica rota, UI de autenticación y permisos, renderizado inseguro de contenido de usuario, secretos filtrados, fallos de accesibilidad en flujos críticos, estados de error o vacío faltantes en superficies basadas en datos, fallos de compilación o pruebas. Otros fallos son de asesoramiento.

Corrección

• Cada ruta dentro del alcance se renderiza mediante navegación directa, recarga, navegación dentro de la aplicación, retroceso y avance.
• Cada flujo crítico completa su camino feliz y conserva la entrada útil en caso de fallo recuperable.
• Los formularios validan la entrada, previenen el envío duplicado, muestran errores procesables y exponen errores a la tecnología de asistencia.
• El estado del cliente, servidor, URL y persistido permanece consistente a través de recargas, cancelaciones, respuestas obsoletas y acciones repetidas.
• La consola no tiene nuevos errores o advertencias; las solicitudes de red fallidas están explicadas.
• Los límites de autenticación y permisos muestran la UI correcta, preservan las rutas de retorno previstas y manejan sesiones caducadas, respuestas prohibidas y cambios de rol.

Cada superficie basada en datos tiene una matriz de estados explícita. Marca un estado como N/A solo cuando no puede ocurrir o no ofrece valor para el usuario.

• Vacío: el resultado exitoso con cero datos explica lo que sucedió y ofrece una acción siguiente útil.
• Cargando: el progreso es claro, el contenido existente útil se mantiene estable y las acciones repetidas se mantienen controladas.
• Esqueleto: cuando el diseño final es predecible y el retraso es perceptible, los marcadores de posición coinciden y evitan cambios de diseño; de lo contrario, registra N/A.
• Parcial: el contenido disponible sigue siendo utilizable mientras las secciones independientes cargan o fallan.
• Error: el mensaje es procesable, la entrada útil se conserva y la reintento o recuperación funciona.

Convenciones del framework

Omite los elementos para frameworks que el proyecto no utiliza; nombra el framework detectado y la versión.

• Las APIs de framework, enrutador y carga de datos coinciden con la versión instalada y las convenciones existentes del proyecto; registra la versión y la fuente de verdad.
• La navegación interna utiliza el componente de enlace del framework detectado, como Link de next/link o @tanstack/react-router; la etiqueta <a> nativa maneja enlaces externos, de descarga, de correo electrónico y telefónicos.
• Los parámetros de ruta, parámetros de búsqueda, redirecciones y navegación utilizan las APIs y hooks del enrutador del framework.
• Los estilos estáticos y dinámicos siguen el sistema de estilos compatible con el framework existente; los valores dinámicos utilizan propiedades personalizadas de CSS a menos que el posicionamiento requerido por la biblioteca necesite estilos en línea.

Interfaz y accesibilidad

• El diseño funciona en cada viewport registrado sin desbordamiento no intencionado. El texto largo, los medios faltantes, los datos lentos y las colecciones grandes siguen siendo utilizables.
• La jerarquía, el espaciado, la tipografía, los colores y la retroalimentación interactiva son consistentes; los controles cubren los estados de hover, foco, activo, deshabilitado, carga y error.
• Las acciones destructivas requieren intención clara y ofrecen recuperación cuando sea práctico.
• Los hitos semánticos, encabezados, controles, etiquetas y nombres accesibles coinciden con el propósito.
• El uso solo con teclado alcanza y opera cada elemento interactivo en orden lógico; el foco permanece visible y se mueve correctamente a través de diálogos, menús, errores y cambios de ruta.
• El texto y la UI esencial cumplen con el objetivo de accesibilidad registrado (WCAG 2.2 AA a menos que se aplique un requisito más estricto); el significado no depende solo del color.
• Las imágenes tienen alternativas apropiadas; los medios decorativos permanecen silenciosos. El zoom, el redimensionamiento de texto, el movimiento reducido y los anuncios requeridos del lector de pantalla preservan el flujo.

Resiliencia, privacidad y seguridad

• El contenido controlado por el usuario se renderiza de forma segura; los secretos y las decisiones privilegiadas permanecen en el lado del servidor.
• Los enlaces externos, redirecciones, subidas, almacenamiento y APIs del navegador validan la entrada no confiable. Las pestañas externas utilizan un comportamiento seguro de opener cuando corresponda.
• El comportamiento fuera de línea y de tiempo de espera evita la pérdida de datos.
• La UI de error omite información interna sensible mientras los registros conservan suficiente contexto de diagnóstico.
• Los productos de autenticación o datos personales exponen páginas públicas de Términos y Privacidad desde la autenticación y la navegación persistente; el contenido coincide con el comportamiento real.
• Las cookies, defensas CSRF, encabezados de seguridad de respuesta, redirecciones y política de caché se verifican cuando la aplicación los controla.
• La analítica, el seguimiento de errores y el consentimiento respetan los requisitos de privacidad y no exponen datos personales o secretos.
• Los indicadores de características tienen un valor verificado para el entorno objetivo y, para cambios riesgosos, una ruta de reversión o desactivación documentada.

Rendimiento y activos

• Las rutas representativas se miden a partir de una compilación de producción en el entorno registrado utilizando TTFB, LCP, INP, CLS, el primer contenido útil y el tiempo de la interacción principal.
• Cada ruta dentro del alcance muestra contenido útil o un fallo procesable y acepta su interacción principal dentro del presupuesto registrado; cinco segundos es el valor predeterminado solo cuando no existe un presupuesto de producto más estricto.
• La salida de la compilación de producción, los fragmentos de ruta y la cascada de red no contienen costos grandes no explicados.
• Las optimizaciones de rendimiento cambiadas tienen un beneficio medido y preservan el comportamiento del teclado, foco, lector de pantalla y fuera de línea cuando corresponda.
• Los efectos liberan oyentes, suscripciones, observadores, solicitudes pendientes, trabajadores, temporizadores, marcos de animación y trabajo debounced o throttled cuando las dependencias cambian o los componentes se desmontan.
• Las imágenes utilizan la optimización del framework disponible, dimensiones responsivas y sizes, formatos modernos, compresión, relaciones de aspecto estables y prioridad eager/lazy correcta. El video y las fuentes tienen una entrega, fallback y comportamiento de precarga deliberados.
• Los scripts de terceros, en línea y bloqueantes tienen un propósito explícito y prioridad de carga.

Búsqueda y compartición

Aplica solo a rutas públicas o compartibles; las aplicaciones solo con autenticación necesitan solo la comprobación de no indexación.

• Cada ruta define metadatos de título y descripción apropiados. Las rutas públicas indexables establecen intención canónica y de robots a través de las APIs del framework; los entornos que no son de producción y protegidos no se indexan accidentalmente.
• Las rutas compartibles resuelven los metadatos de Open Graph y sociales a valores absolutos y rastreables. Las imágenes OG devuelven el tipo de contenido, dimensiones y texto alternativo correctos; las etiquetas renderizadas y una vista previa real de compartición se verifican.
• Para una puerta de release, Lighthouse se ejecuta contra las rutas de producción desplegadas en perfiles móvil y de escritorio registrados; se registran los resultados y regresiones de Rendimiento, Accesibilidad, Mejores Prácticas y SEO.

Ingeniería y despliegue

• El formateador, lint, typecheck, pruebas y compilación de producción pasan o tienen un fallo de referencia explícito.
• La lógica cambiada tiene la comprobación de regresión automatizada más pequeña y útil.
• Las variables de entorno, indicadores de características, URLs de API, soporte del navegador y cuentas de prueba coinciden con el entorno objetivo.
• El seguimiento de errores, favicons e iconos de instalación funcionan donde el producto los requiere.
• Para una puerta de release o cambio que afecta al despliegue, los activos, rutas, APIs, autenticación, encabezados, redirecciones y comportamiento de caché desplegados se verifican en el entorno objetivo.