/website-build - construir un sitio web correctamente
Destilado de la construcción, traducción a cinco idiomas, lanzamiento y endurecimiento de un sitio de marketing real para una empresa de aplicaciones móviles. Cada regla en las referencias proviene de algo que realmente salió mal o costó tiempo. Este archivo es la ruta; las referencias contienen los detalles.
| Abre esto | cuando estés a punto de |
|---|---|
references/01-architecture-pipeline-deploy.md | configurar la estructura de carpetas y la cadena de compilación, elegir librerías, agregar un paso de compilación, desplegar, configurar hosting/CSP/redirecciones, configurar copias de seguridad |
references/02-design-typography-mockups.md | definir tokens y tipografía, manejar fuentes y saltos de línea, hacer maquetas de teléfono, colocar iconos/logos, construir componentes y animaciones |
references/03-i18n-seo-geo.md | traducir, agregar un mercado, escribir meta/JSON-LD, sitemap/robots/llms.txt, hacer GEO, optimizar rendimiento, configurar analítica |
references/04-qa-devices-modes.md | probar cualquier cosa; el entorno, la matriz de dispositivo/ancho/modo, navegadores integrados, accesibilidad, flujos de consentimiento, QA adversarial y en vivo |
references/05-process-content-legal-launch.md | ejecutar el proyecto: roles, aprobaciones, ciclo de retroalimentación, arquitectura de información, hechos, páginas legales, consentimiento, puesta en marcha |
scripts/qa/ | ejecutar el entorno de QA (CDP puro, nada que instalar) y la matriz de WebKit/navegadores integrados (Playwright) |
scripts/backup/snapshot.py | versionar un archivo antes de editarlo, listar versiones, restaurar; o instalarlo como un gancho de PreToolUse |
1. Fases (en orden)
- Brief (
05): objetivo y CTA, mercados/idiomas, lista de páginas, hoja de hechos con fuentes, activos de marca, entidad legal por mercado, seguimiento y consentimiento, hosting, y quién fusiona la versión de producción. - Esqueleto (
01): una carpeta fuente, idioma principal editado a mano, chrome compartido inyectado por bloques marcados idempotentes, compiladores para todo lo demás,_dist(optimizado) y_deploy(hosting) como copias generadas unidireccionales, un bloqueo de compilación, git desde el primer archivo. - Sistema de diseño (
02): tokens por fondo,clamp()con rem más una pequeña pendiente de vw,width/heightreales en imágenes,srcsetabsoluto, subconjuntos de fuentes autoalojadas que cubren todos los diacríticos, un sistema de animación por elemento, seguro con movimiento reducido y JavaScript desactivado. - Imágenes (
02): pantallas de producto reales exportadas por mercado desde la herramienta de diseño (3x PNG -> WebP). Nunca texto superpuesto en imágenes rasterizadas. Corregir logotipos en el archivo, no con modos de fusión. - Texto y hechos (
05): una lista de hechos, un término por concepto, entidad legal por mercado, tratamiento formal/informal por audiencia. - i18n (
03): diccionario más compiladores de coincidencia exacta de texto, tipografía en tiempo de ejecución, hreflang (+ x-default), tablas de datos por mercado, QA de idioma. - SEO (
03): un post-procesador idempotente entre marcadores, un@graphJSON-LD por página, sitemap con lastmod real, robots (rastreadores de IA permitidos intencionadamente), un 404 real. - GEO (
03):llms.txt(+ completo),facts.json, datos de entidad consistentes dentro y fuera del sitio, texto que sobrevive a la extracción sin JS, luego el protocolo de prueba GEO, incluyendo preguntar a los motores de IA reales. - Rendimiento (
03): activos en línea -> archivos con hash, WebP, lazy debajo del pliegue, librerías autoalojadas, administrador de etiquetas diferido, Lighthouse en móvil y escritorio. - Consentimiento, analítica, legal (
03,05): barra de consentimiento, Consent Mode v2 (decidir básico vs avanzado deliberadamente), etiquetas solo después del consentimiento, cada rastreador listado en la política de privacidad, páginas legales requeridas, CSP primero en modo solo informe. - QA (
04): la matriz completa de página x ancho, modos, WebKit y navegadores integrados de redes sociales, teclado/enfoque, escenarios de consentimiento, enlaces/anclajes/cambio de idioma, revisión adversarial, luego teléfonos reales. - Puesta en marcha (
05,01): hacer copia de seguridad del sitio antiguo y DNS, redirigir cada URL antigua (mantener las rutas listadas en tiendas exactas), probar la vista previa contra la línea base, cambiar, ejecutar la lista de verificación en vivo.
2. Reglas estrictas
- Nunca editar a mano archivos generados (versiones de idioma,
_dist,_deploy). Editar la fuente o el compilador, luego recompilar. - Nunca insertar a mano
/<br>en texto que los compiladores de traducción emparejan por texto exacto. Los saltos de línea se hacen en tiempo de ejecución. - Una sesión compila y publica. El bloqueo de compilación verifica su propietario; esperar si está retenido, nunca eliminarlo. Verificar memoria libre antes de una compilación completa.
- Una página que se renderiza no prueba nada: verificar sintaxis de cada script en línea, buscar caracteres de control, ejecutar la matriz completa.
- Cada ronda de retroalimentación se convierte en un paso idempotente en la compilación que falla si su texto objetivo desaparece.
- La producción es fusionada por el propietario. Los cambios de hosting, CSP, consentimiento, seguimiento y legales van primero al revisor técnico en una rama lateral.
- Los hechos viven en una sola lista. Un número que difiere entre dos páginas es un error de confianza y un error de GEO.
- Copias de seguridad: git por sitio con un commit en cada fase;
scripts/backup/snapshot.py(o su gancho) para todo entre commits; copia de seguridad del sitio antiguo y DNS antes de la puesta en marcha. - Volver a probar superposiciones, barras fijas y el menú en la salida compilada y minimizada. Los minificadores pueden eliminar la especificidad de los selectores.
- Probar CSP y consentimiento en los navegadores integrados donde aterrizan tus anuncios, y en páginas que llevan estado (tokens en URLs).
3. QA en una frase
Las rutas son relativas a esta carpeta de skill. node scripts/qa/jscheck.mjs site/_dist primero, luego node scripts/qa/audit.mjs <carpeta-o-url> con QA_WIDTHS=1440x900,1280x800,1024x768,768x1024,430x932,390x844,360x780,320x700, luego anchors.mjs, modes.mjs, console-sweep.mjs, shots.mjs (mira las capturas de pantalla tú mismo), y inapp.mjs para WebKit más los navegadores integrados de Instagram/Facebook/TikTok. Cada script sigue un mismo contrato de código de salida: 0 limpio, 1 hallazgos (incluyendo una página que falla al cargar), 2 uso incorrecto, 3 no se pudo ejecutar (Chrome, axe-core o Playwright faltante). Listas de verificación: 04, secciones "pre-publicación" y "post-despliegue".