clawic/skills

Reglas de Desarrollo de Sitios Web

Rendimiento

• Las imágenes son la causa #1 de sitios lentos: usa WebP/AVIF, lazy-load en contenido bajo el pliegue y establece ancho/alto explícito para evitar cambios de layout
• El CSS que bloquea el renderizado retrasa la primera pintura: incluye CSS crítico en línea en <head> y aplaza el resto
• Los scripts de terceros (analíticas, widgets de chat) suelen añadir 500ms+: cárgalos con async o defer y audítalos regularmente
• Las fuentes causan parpadeo de texto invisible (FOIT): usa font-display: swap y precarga fuentes críticas
• Mide con Lighthouse en modo incógnito: las extensiones sesgan los resultados

Móvil Primero

• Empieza el CSS con estilos móviles y agrega complejidad con media queries de min-width: es más fácil escalar hacia arriba que recortar
• Los objetivos táctiles necesitan un mínimo de 44x44px: los dedos son imprecisos, los botones pequeños frustran a los usuarios
• Prueba en dispositivos reales, no solo en DevTools del navegador: la simulación de limitaciones no captura el lag real
• El desplazamiento horizontal es un error crítico: prueba cada página con un ancho mínimo de 320px
• La etiqueta meta viewport es obligatoria: <meta name="viewport" content="width=device-width, initial-scale=1">

Accesibilidad

• Cada <img> necesita texto alt: alt="" para imágenes decorativas, texto descriptivo para las significativas
• Relación de contraste de color mínima 4.5:1 para texto del cuerpo: usa el comprobador de contraste de WebAIM
• Los campos de formulario deben tener elementos <label> asociados: los placeholders por sí solos no son accesibles
• La navegación por teclado debe funcionar: prueba cada elemento interactivo con la tecla Tab
• Los lectores de pantalla anuncian la jerarquía de encabezados: usa H1-H6 en orden lógico, nunca saltes niveles

Estructura HTML

• Solo un <h1> por página: es el título de la página, no una herramienta de estilo
• Usa elementos semánticos: <nav>, <main>, <article>, <aside>, <footer>: comunican estructura a navegadores y tecnología de asistencia
• <button> para acciones, <a> para navegación: no uses divs con manejadores de clic
• Los enlaces externos deben tener rel="noopener": previene vulnerabilidades de seguridad con target="_blank"
• Valida el HTML: el marcado roto causa renderizado impredecible en diferentes navegadores

Patrones CSS

• Evita !important: rompe la cascada y dificulta la depuración. Mejora la especificidad en su lugar
• Usa unidades relativas (rem, em, %) en lugar de px fijos para texto: respeta las preferencias de tamaño de fuente del usuario
• Las propiedades personalizadas CSS (variables) reducen la repetición: define colores y espaciado una vez, úsalos en todas partes
• Flexbox para diseños 1D, Grid para 2D: no fuerces uno a hacer el trabajo del otro
• Prueba sin cargar CSS: el contenido aún debe ser legible en HTML simple

Errores Comunes

• La falta de favicon causa spam de 404 en los registros del servidor: incluye siempre uno, incluso un PNG simple
• No establecer <html lang="es"> rompe la pronunciación de los lectores de pantalla
• Enlaces con http:// hardcodeado se rompen en sitios HTTPS: usa // relativo al protocolo o siempre https://
• Asumir que JavaScript está disponible: el contenido principal debe funcionar sin JS (mejora progresiva)
• Olvidar estilos de impresión: añade @media print para páginas que los usuarios puedan imprimir (recibos, artículos)

Antes del Lanzamiento

• Prueba que todos los formularios realmente envíen datos: los formularios de contacto rotos pierden clientes potenciales silenciosamente
• Verifica que exista una página 404 y sea útil: la página 404 predeterminada del servidor se ve poco profesional
• Confirma las vistas previas de redes sociales con etiquetas Open Graph: prueba en los depuradores de Facebook/Twitter
• Envía el sitemap a Google Search Console: acelera la indexación
• Configura monitoreo de tiempo de actividad: entérate cuando tu sitio se caiga antes de que los usuarios te lo digan