adamjali/site-forge

Site Forge

<contexto_de_ejecución> La Fase 0 resuelve el modo:

• auto (rápido): Haz tanto como puedas tú mismo. Después de la única puerta de plan/aprobación (Fase 3), ejecuta hasta completar sin preguntar. Usa solo medios que puedas crear tú mismo de forma gratuita (jina; MCP/Higgsfield si están presentes). Si un paso se bloquea, necesita interacción o falla — omítelo, continúa, menciónalo bajo "Omitido / mejorar después" al final. Prioriza el envío.
• completo (mejor calidad): Interactivo. Pregunta cada vez que una elección cambie significativamente el resultado, y usa los mejores medios gratuitos incluso cuando necesiten al usuario (Google/Gemini para imágenes, Veo 3.1 Fast en Flow para video — pásales indicaciones exactas, ellos generan, colocan los archivos). Un paso bloqueado → pídeles que intervengan.

Ambos modos:

• 🟢 Auto: explora el entorno, diseña, escribe código, extrae fotogramas, ejecuta ffmpeg, previsualiza localmente y despliega después de la aprobación.
• 🟡 DOS puertas obligatorias en ambos modos: (1) el plan de la Fase 3 antes de construir, y (2) el despliegue en sí mismo — pregunta inmediatamente antes de cada despliegue, siempre. La aprobación para un despliegue nunca es aprobación para el siguiente. El valor predeterminado es la previsualización local.
• 🔴 Nunca: inventar credenciales/claves falsas; publicar afirmaciones que el usuario haya marcado como no verificadas sin un descargo de responsabilidad; introducir los secretos del usuario en formularios. </contexto_de_ejecución>

0. Elige el PERFIL antes que cualquier otra cosa. Lee references/design-profiles.md y exprésalo en una línea: "Perfil: creative-portfolio. Techo de tamaño de visualización flexible, prohibición de serifa, piso de máscara, mobiliario de conversión. Piso de artesanía sin cambios." El valor predeterminado es local-service; creative-portfolio cubre fotógrafos, diseñadores y artistas; personal-agency es el de Adam. El perfil decide cuáles de las reglas estéticas de Adam están en vigor — el piso de artesanía nunca se flexiona, por lo que el cuerpo de 16px, el contraste 4.5:1, los toques de 44px, el movimiento reducido, el esquema, las dieciséis etiquetas sociales y los encabezados de seguridad se aplican sin importar lo que haga el brief o un sitio de referencia. Equivocarse en esto produce un sitio de oficios con las fotografías de un portafolio.

1. Lee references/page-composition.md primero (es la diferencia entre una página que se siente diseñada y una que se siente vacía), luego invoca frontend-design antes de cualquier marcado (instalado → úsalo; si no, lee references/frontend-design.md — la habilidad completa, incluida palabra por palabra, para que obtengas su guía completa incluso sin conexión).

2. Invoca design-taste-frontend. Expresa su lectura de diseño en una línea ("Leyendo esto como: <tipo de página> para , con un lenguaje de …") y establece los tres diales. Usa los valores predeterminados y preajustes de la habilidad de gusto. La única excepción: su desbloqueo de movimiento perpetuo en MOTION_INTENSITY > 5 permanece desactivado — sin pulso, brillo, flotación, máquina de escribir o bucles infinitos. Omite su sección de pila React/Tailwind en compilaciones estáticas.

3. Impeccable ya se está ejecutando: su gancho se activa en cada escritura. Sus comandos son la puerta de la Fase 7.

Luego usa references/aesthetics.md como ayuda para la derivación de tema/tipo/diseño. Esta es la puerta contra la mediocridad y la mayor palanca de calidad. Comprométete con una dirección audaz y específica para el brief:

• Una estética clara, ejecutada con precisión; una combinación de fuentes distintiva (nunca Inter/Roboto/Arial); una paleta cohesiva como variables CSS.
• La estructura — qué secciones, qué jerarquía, el momento memorable — derivada del brief. No reutilices la forma del último sitio.
• Qué capacidades se ajustan y cuáles dejar fuera (consulta el mapa de Referencias). Un brief simple puede no usar ninguno de los efectos pesados; un sitio emblemático puede usar varios. Escribe un brief de diseño de 3 a 5 líneas para llevar al plan.

El gancho de Impeccable se activa en cada escritura. Resuelve sus hallazgos a medida que aparecen, no en un montón al final — cada uno se corrige o se clasifica explícitamente como un falso positivo con una razón declarada. Nunca suprimas una regla en línea para evitar corregirla; la supresión necesita la confirmación de Adam. Después de ~6 ediciones se silencia para evitar ruido, por lo que la auditoría de la Fase 7 es una puerta separada y estricta.

Página única vs. varias páginas. Una página simple se envía como un único index.html. Un brief con audiencias distintas o profundidad real (un sitio de negocios con secciones de paciente / médico / precios / acerca de, un sitio de marketing con una página de Ciencia) justifica un conjunto de varias páginas en su lugar — archivos separados *.html que comparten una misma interfaz. Sin un paso de compilación, los bloques compartidos se copian manualmente, por lo que la deriva es un error real: mantén el <head> (incluyendo el fragmento de tema sin FOUC), la navegación, el pie de página y las etiquetas <script> idénticos byte a byte en cada página, y verifícalos mediante hash antes del despliegue — una página que diverge silenciosamente (diferentes fuentes, un interruptor faltante, un enlace muerto) es el fallo clásico. Dale a cada página su propio canonical/og:url autorreferencial + <title>/descripción, emite un sitemap.xml + robots.txt, y noindex cualquier página de maqueta privada/de aplicación. Si el número de páginas o el tamaño del bloque compartido hace que la copia manual sea frágil, un pequeño paso de inclusión (concatenación de Node, o Eleventy/Astro) es un compromiso justo — pero solo cuando el brief lo justifique; por defecto, sin compilación.

Luego tres puertas mecánicas, todas las cuales han detectado defectos reales enviados:

python3 <skill>/scripts/audit-seo.py        # SEO, SEO local, seguridad. salir 1 en ALTO
python3 <skill>/scripts/check-crops.py      # object-fit:cover descartando el sujeto
python3 <skill>/scripts/colour-system.py    # un tratamiento por fotografía, en todo el sitio

Y haz clic en cada elemento interactivo en un navegador real, afirmando un cambio de estado. Un FAQ, una barra de filtros y un panel de mapa se han enviado con marcado completo, CSS completo y sin ningún controlador: nada parece roto en el código fuente. Usa document.elementFromPoint en el centro del propio control, no .click(), que omite la prueba de aciertos y pasa en un control que está completamente enterrado.

Si algo se siente entrecortado, RASTREA, no lo muestrees. performance_start_trace luego desplázate luego performance_analyze_insight("ForcedReflow") nombra la función problemática por archivo y línea. El muestreo de velocidad de fotogramas tiene una variación de más o menos diez puntos y te enviará tras lo incorrecto. Consulta scroll-performance.md.

Puerta de la pila de diseño — estricta, antes del despliegue, sin excepciones:

1. /impeccable critique (revisión de UX) luego /impeccable audit (a11y, rendimiento, responsivo).
2. Cada hallazgo corregido, o clasificado como falso positivo con una razón declarada. Nunca suprimir en línea. La supresión necesita la confirmación de Adam.
3. Ejecuta la lista de verificación previa al vuelo de la propia habilidad de gusto (su Sección 14).
4. Busca en el CSS animaciones infinite y box-shadow teñidos, y neutraliza ambos. Esto detecta la única configuración de la habilidad de gusto que anulamos deliberadamente.

El valor predeterminado es LOCAL. Previsualiza con python3 -m http.server 8080 en el directorio de compilación e itera allí. No despliegues a menos que el usuario lo solicite en ese momento — una URL en vivo solo está justificada para un cliente que paga o una demostración programada, y cada despliegue cuesta créditos de Netlify (38 despliegues en un sitio agotaron una asignación mensual y forzaron una actualización de pago). Agrupa todas las correcciones pendientes en UN despliegue por ronda de revisión.

La prueba de calidad móvil se difiere al primer despliegue real — no se puede hacer localmente y el navegador de automatización no puede emular una ventana gráfica móvil real. Planea una prueba móvil dedicada en el momento de la demostración en lugar de pretender que se verificó antes.

NUNCA despliegues la raíz del proyecto. .netlifyignore NO es respetado por netlify deploy --dir, y desplegar una raíz una vez publicó la DIRECCIÓN DEL DOMICILIO de un cliente y una CONTRASEÑA de rastreador en toda la flota. Construye un directorio de publicación explícito y verifica la superficie activa, cada vez:

python3 scripts/make-dist.py .        # publica solo archivos web, retiene .py/.md/package.json
netlify deploy --prod --dir dist
scripts/verify-published.sh <host> [nombre-de-la-calle-del-propietario]   # debe imprimir "limpio"; salida no cero = fuga

Cuando el usuario apruebe, despliega con scripts/deploy-netlify.sh (references/deploy.md) — Netlify es lo único instalado al final; habilita Forms (ignore_html_forms) + el enlace de notificación si hay un formulario. Luego configura Cloudflare Web Analytics de forma predeterminada (el usuario generalmente lo quiere): solicita un token de baliza para el nombre de host desplegado, inyecta el fragmento antes de </body> SIN SRI (Cloudflare lo rota — la excepción documentada), y redespliega. En auto, preséntalo como un elemento "necesita al usuario" con el nombre de host exacto. Detalles en references/deploy.md. Informa la URL en vivo, lo que se usó y (en auto) la lista de Omitido / mejorar después.

Mapa de referencia

…

[truncado para la traducción]