subhannaeem/wp-build-complete-website

Construye un sitio web completo de WordPress

Una descripción de entrada, un tema de bloques terminado. Este skill ejecuta los otros skills wp-* en orden. Cada compuerta debe terminar antes de que comience la siguiente.

Compuerta 0: Brief (parada obligatoria)

A partir de la descripción del usuario, escribe SITE_BRIEF.md con:

• Propósito y audiencia, tono de marca, colores y fuentes (sugiere valores predeterminados si no se proporcionan).
• Lista de páginas (predeterminado: Inicio, Acerca de, Servicios o Productos, Blog, Contacto).
• Funcionalidades (formulario de contacto, blog, galería, tienda). Solo lo que el usuario solicitó.
• Suposiciones, numeradas, cada una con su valor predeterminado.

Muéstraselo al usuario y pídele que acepte, rechace o aconseje. Detente y espera.

Compuerta 1: Configuración del proyecto

1. Trabaja en una nueva carpeta (el nombre elegido por el usuario). Nunca toques los archivos de un sitio existente.
2. Crea un tema de bloques: style.css, theme.json, templates/, parts/ (cabecera, pie de página), patterns/, assets/, functions.php.
3. Usa bloques y patrones principales de WordPress. Sin constructor de páginas, sin framework CSS.
4. Prueba local opcional: WordPress Playground o wp-env si está disponible.

Compuerta 2: Sistema de diseño (wp-responsive-fluid-design)

Define colores, escala tipográfica fluida y tokens de espaciado en theme.json. Construye cabecera, pie de página, navegación y menú móvil. Todos los valores provienen de los tokens.

Compuerta 3: Páginas y contenido

Crea plantillas y patrones para cada página del brief. Usa texto de relleno claro (no lorem ipsum cuando se conoce el propósito) e imágenes con texto alt. Usa HTML semántico: un h1 por página.

Compuerta 4: Movimiento (wp-animated-block-theme)

Agrega revelaciones al hacer scroll, efectos hover y de transición de página con CSS primero, luego la API de Interactividad. Todo respeta prefers-reduced-motion; el contenido permanece visible sin JavaScript. Usa wp-gsap-lottie-integration solo si el efecto solicitado lo necesita.

Compuerta 5: Comprobaciones

1. wp-motion-performance-audit: corrige elementos críticos (animación que activa diseño, desplazamiento de diseño, scripts pesados).
2. wp-accessible-ui-review: corrige elementos críticos (foco, contraste, etiquetas, encabezados).
3. Verifica en 360, 768, 1024 y 1440 px: sin desplazamiento horizontal.
4. Valida: php -l en archivos PHP, validez JSON en theme.json.

Compuerta 6: Entrega

Escribe un breve README.md en la carpeta del tema: cómo instalar (comprimir y subir), cómo editar páginas y qué no se verificó (Lighthouse en vivo, dispositivos reales, lector de pantalla, hosting). No afirmes más de lo que se ejecutó. No despliegues, subas ni hagas commit a menos que el usuario lo solicite.

Reglas

• Sin secretos, claves API ni rutas locales absolutas en ningún archivo.
• Solo añade plugins que el usuario haya aprobado; prefiere ninguno.
• Usa contenido de relleno genérico; nunca datos reales personales o de clientes.
• Mantén cada cambio trazable al brief.