replica-build (construcción por réplica)

¿Qué hace replica-build (construcción por réplica)?

Lee replica/recon.md, replica/architecture.md, replica/design/. Actualiza replica/features.csv (la columna clone) y mantiene replica/build-log.md.

Las reglas

• Sala limpia. Cada línea de código se escribe aquí, a partir del mapa de reconocimiento y las especificaciones. Nunca pegues el HTML, CSS, JavaScript, SVGs o imágenes originales, nunca cargues nada desde su dominio o CDN, nunca "ver fuente y adaptar".
• Tus palabras. Escribe cada etiqueta, botón, estado vacío y correo electrónico desde cero. Que un botón haga lo mismo es paridad. Que su frase coincida es copia.
• Solo tokens. Sin valores hexadecimales ni de píxel en bruto en los componentes. Si falta un valor, agrégalo a los tokens.

Paso 1: la carcasa

Enrutamiento para cada pantalla del inventario (las páginas stub están bien), el layout (navegación, cabecera, barra lateral), tokens conectados, las primitivas provenientes de replica-design, y datos semilla para que las pantallas tengan algo real que mostrar. Confirmar.

Paso 2: la rebanada vertical

El bucle principal del mapa de reconocimiento, de extremo a extremo, antes que nada más. Para una aplicación de reservas: crear un tipo de evento, abrir la página pública, reservar un hueco, verlo en el panel de control. Que sea feo está bien. Que funcione es lo que importa. Si replica-backend aún no se ha ejecutado, usa los datos semilla y una capa de datos falsa con las mismas firmas de función, de modo que al sustituirla por la real no cambie ningún código de pantalla.

Paso 3: pantalla por pantalla

Trabaja en el orden de architecture.md. Para cada pantalla:

1. Lee su fila en el mapa de reconocimiento: propósito, componentes, estados, qué flujos pasan por ella.
2. Mira la captura de referencia para el layout y la jerarquía. No para los píxeles.
3. Constrúyela con las primitivas. Datos reales desde la capa de datos.
4. Todos los estados: vacío, carga (esqueletos, no spinners, si el original lo hace), completo, error, sin permisos, contenido largo (un nombre de 60 caracteres), ancho móvil.
5. Básicos, siempre: HTML semántico, etiquetas en los inputs, accesible por teclado, foco visible, imágenes con texto alternativo.
6. Marca las filas correspondientes en features.csv como yes o partial (con una nota).
7. Captura la pantalla con el mismo viewport que la referencia, guárdala en replica/clone-screens/S07.png para replica-diff.
8. Un commit por pantalla: build: S07 página de reserva.

Definición de terminado, por pantalla

• todos los estados del mapa de reconocimiento, más vacío, error y carga
• funciona con 390px y 1440px de ancho
• solo con teclado: se puede completar el flujo
• sin errores de consola
• sin texto fijo copiado del original
• features.csv actualizado
• captura guardada para la comparación

Paso 4: el registro de construcción

replica/build-log.md, una línea por pantalla: ID, fecha, terminado o parcial, qué falta, qué fue más difícil de lo esperado. Cuando una funcionalidad resulte más grande de lo que parecía, indícalo en el registro y en el chat. No entregues en silcio la mitad.

Cuando te quedas atascado en cómo funciona algo

Vuelve al original como usuario: lee su artículo de ayuda, mira su tutorial público, usa la propia cuenta del usuario. No indagues en su código ni en sus llamadas de red. Luego construye tu propia versión del comportamiento.

Resultado

Pantallas construidas, la matriz de funcionalidades actualizada, capturas guardadas y un resumen: pantallas hechas del total, imprescindibles hechas del total, qué viene a continuación. Luego /replica-backend si la capa de datos todavía es falsa, o /replica-test en caso contrario.