React a Phoenix LiveView

¿Qué hace React a Phoenix LiveView?

Reproduce la interfaz de React solicitada integrándola con la arquitectura de la aplicación de destino. Trata la fuente como referencia visual y de comportamiento; sigue los requisitos explícitos del destino cuando difieran. Descubre las convenciones del código en lugar de asumir un framework de React, sistema CSS, biblioteca de componentes o versión de Phoenix.

Establecer alcance y convenciones

• Lee las instrucciones del repositorio aplicables y la documentación relevante de ambos proyectos. Localiza el punto de entrada de React, la aplicación de destino y la ruta o componente solicitados. Los proyectos pueden ser repositorios separados o compartir un espacio de trabajo.
• Inspecciona los manifiestos y las implementaciones existentes para identificar estilos, componentes, fuentes, temas, assets, enrutamiento, autenticación, acceso a datos e integración de JavaScript. Verifica si existe una ruta, un puerto parcial, un componente o un hook antes de crear uno nuevo.
• Mantén el alcance limitado a la interfaz asignada y al comportamiento requerido. Un mockup estático no requiere nuevas funcionalidades de backend; una migración funcional requiere integraciones reales o brechas explícitamente reveladas.
• Respeta las pruebas y los permisos de herramientas del usuario. La inspección de la fuente, la inspección de referencias, la preparación de previsualizaciones, las pruebas automatizadas y el QA del navegador son actividades distintas; no asumas que todas están autorizadas.

1. Inspeccionar la fuente

Lee css-extraction.md. Rastrea la página, los hijos visualmente significativos, los estilos, las variantes de componentes, los assets y la lógica de estado. Establece:

• Diseño, reglas responsivas, tipografía, temas, imágenes y animación.
• Estilos efectivos después de los valores predeterminados de la biblioteca, las sobrescrituras locales, las props condicionales y la cascada CSS.
• Navegación, formularios, superposiciones, carga, permisos, mutaciones, persistencia y rutas de recuperación relevantes para el alcance.

Registra un mapa de migración compacto: componente fuente → componente destino, dato/acción fuente → contexto/evento destino, token fuente → equivalente destino. Separa el comportamiento observado de las suposiciones y los valores en tiempo de ejecución no resueltos.

Para una solicitud de análisis, entrega los hallazgos y detente. Para una implementación autorizada, menciona brevemente las brechas o desviaciones materiales y continúa. Pregunta solo cuando una elección no resuelta cambie materialmente el alcance, el comportamiento o la fidelidad; no requieras una confirmación separada para decisiones de traducción rutinarias.

2. Implementar en Phoenix

Lee liveview-conventions.md. Reutiliza componentes, diseños, contextos, autorización, tokens, assets y hooks del destino donde reproduzcan el resultado requerido.

• Traduce la salida renderizada y el comportamiento, no la sintaxis de React o los nombres de componentes mecánicamente.
• Preserva los valores visuales, las reglas responsivas, los estados y la semántica. No sustituyas una fuente, icono, componente o animación vagamente similar sin justificación.
• Aplica los requisitos explícitos del destino de manera consistente y explica las desviaciones visibles. Nunca traslades las restricciones de fuente, el proveedor de almacenamiento, la estructura de rutas o los nombres de otro proyecto al puerto.
• Mantén el estado propiedad del servidor en LiveView y contextos; usa CSS o mecanismos existentes del cliente para el comportamiento visual local. Agrega hooks solo para capacidades del navegador que los necesiten.
• Completa los estados aplicables de carga, vacío, validación, pendiente, éxito, fallo, reintento, permiso y recuperación. Preserva la entrada del usuario en caso de fallo y evita que acciones repetidas corrompan datos.

3. Revisar y entregar

Revisa los cambios contra el mapa de migración, incluyendo variantes responsivas/de tema, autorización, manejo de eventos, accesibilidad y limpieza del ciclo de vida. Verifica que los assets requeridos y los componentes referenciados existan.

Usa los comandos de verificación del proyecto y las herramientas en tiempo de ejecución solo cuando esté permitido. Prepara una vista previa en vivo cuando esté autorizado. Nunca afirmes verificación en tiempo de ejecución, visual o de pruebas basada solo en la inspección de la fuente.

Entrega brevemente: qué se portó, desviaciones materiales, mocks o integraciones faltantes, verificación realizada u omitida, y los estados que el usuario debería probar. Si una dependencia bloquea la finalización, identifícala concretamente y completa el trabajo independiente dentro del alcance.