web-design-pro-2026 — Orquestador de páginas web (estética 2026 + SEO + AEO + mobile)

Front door obligatorio de toda página web. No duplica a ui-ux-pro-max, ux-senior ni frontend-senior: los encadena y les añade la dirección estética 2026 anti-flat, el SEO técnico, el AEO/GEO y el gate mobile/a11y. Este archivo es un índice; el detalle vive en references/.

⭐ DEFAULT del HERO (aprobado por Cristian 2026-07-15): para el momento héroe de cualquier página con ambición visual, invocar creative-frontend-max y seguir su receta canónica cinematic-hero-2026.md: UN objeto 3D art-directed sobre negro + cámara que viaja con el scroll + video/persona por luma-key, con RESTA. Es el estándar, no una opción. Ver memoria feedback-frontend-cinematic-standard. (No aplica a dashboards internos ni checkout — ahí, calma y usabilidad.)

Cuándo se activa (SIEMPRE en web)

Cualquier trabajo cuyo output se renderiza en un navegador:

• Landing / marketing site / homepage / hero / one-pager / portfolio / blog.
• Web app, SaaS UI, e-commerce, dashboard público.
• Creatividades de publicidad (ad/anuncio) y sus landing pages de tráfico pagado.
• Archivos .html .tsx .jsx .vue .svelte .astro + CSS/Tailwind.
• Verbos: construir, crear, diseñar, mejorar, rediseñar, optimizar SEO/AEO/GEO.

Cubre desktop y mobile en la misma sesión (Google indexa mobile-first — la vista móvil es la que rankea).

Cuándo NO

Regla proporcional (REGLA #1): página grande/marca visible = todo el pipeline; tweak de copy o un botón = solo el gate anti-flat + a11y.

WORKFLOW obligatorio (orquesta, no reimplementa)

Paso 1 — Sistema de diseño base con ui-ux-pro-max (SIEMPRE primero). Saca paleta, tipografía y estilo candidato antes de escribir una línea de UI. Comando exacto:

python "C:/Users/ASUS/.claude/skills/ui-ux-pro-max/scripts/search.py" \
  "<tipo de sitio + industria + tono>" --design-system -p "<Nombre Proyecto>"
# Persistir como fuente de verdad del repo:
python "C:/Users/ASUS/.claude/skills/ui-ux-pro-max/scripts/search.py" \
  "<...>" --design-system --persist -p "<Nombre Proyecto>" --page "<home|pricing|...>"

Genera design-system/<slug>/MASTER.md. Esa es la base tonal; este skill NO reinventa la paleta.

Paso 2 — Aplicar dirección 2026 anti-flat (este skill). Sobre esa base, forzar: neutral calmo + UN acento saturado + textura visible; dark-mode-first con neutro tintado (zinc, no negro puro); depth por elevación en capas; una capa de textura/grain/aurora; una o dos micro-animaciones con propósito. Ver references/design-2026.md + recetas copy-paste en references/anti-flat-recipes.md.

Paso 3 — Delegar el rol. Estructura/flujo/jerarquía → ux-senior. Implementación en el framework → frontend-senior. SEO técnico en Next/Angular → conocimiento de references/seo-technical-2026.md. Este skill es el director: define el qué estético y de descubrimiento; ellos ejecutan el cómo.

Herramientas de arranque de componentes/animación (usar, no reemplazar el criterio):

• 21st.dev MCP (mcp__*21st*, registrado a nivel usuario) — descubrir/adaptar componentes React+Tailwind animados (heroes parallax, cards 3D, reveals). Siempre re-tematizar con el MASTER.md de ui-ux-pro-max y pasar por los gates; nunca pegar crudo. Detalle en references/scroll-3d-depth-2026.md §6.
• motion (antes framer-motion, v12+, import ... from "motion/react"; el paquete viejo sirve igual) — animación e interacción en React/Next. Estándar para scroll-linked/parallax/tilt. Solo animar transform/opacity.
• Profundidad 3D en scroll (estándar permanente): cada página con marca visible aplica parallax por capas + perspectiva discreta (sensación "más en 3D") — barato, GPU, gateado por prefers-reduced-motion. Recetas en references/scroll-3d-depth-2026.md. NO en dashboards/tablas/checkout.

Orden no negociable: ui-ux-pro-max (base) → dirección 2026 (este skill) → ux/frontend-senior (ejecución) → gates. Saltar el Paso 1 produce paletas inventadas incoherentes.

Anti-flat forcing function (GATE — la página NO está lista sin esto)

Una página que no cumple los 5 se ve AI-slop. Es un gate binario, no una sugerencia.

Los "tells" del AI-slop a invertir uno por uno (fuente: State of AI landing pages / críticas 2026):

Contra-jugada legítima si "todos" convergen en bento pulido: anti-grid / neo-brutalismo deliberado (dif. 2026, medium-confidence).

Referencias — cuándo abrir cada archivo

Cargar bajo demanda, no todo de una:

PRE-DELIVERY GATE (consolidado — la página NO está "hecha" hasta pasar todo)

Verificación renderizada obligatoria: correr /gstack-qa (Chromium real) o el browser preview y mirar el resultado. "Compila" ≠ "funciona" ≠ "se ve bien". Probar en móvil throttled (Slow 4G + CPU throttle), no solo desktop.

Estética (anti-flat forcing function)

• Los 5 puntos del gate anti-flat cumplidos; NO es hero-centrado+3-cards.
• Paleta derivada del MASTER.md de ui-ux-pro-max (no inventada). Un acento, textura visible, dark-first.

SEO técnico

• Un H1 lógico único + jerarquía de headings ordenada; HTML semántico.
• <title>/description/canonical self-referencing absoluto/OG (1 imagen 1200×630) server-rendered (Next: generateMetadata; Angular: provideClientHydration() + meta por ruta).
• Contenido SSR/SSG/ISR (no CSR-only — invisible a crawlers AI que no ejecutan JS).
• sitemap.xml (solo URLs canónicas 200) + robots.txt; JSON-LD solo de tipos que aún dan rich results (Organization, Article/BlogPosting, Product, LocalBusiness, Breadcrumb). NO FAQPage/HowTo (ya no dan rich result — revalida estado en Search Central).
• Imágenes AVIF→WebP→JPEG, width/height siempre, lazy salvo la LCP.

AEO/GEO

• Cada sección abre con respuesta directa auto-contenida 40-80 palabras (≈44% de las citas LLM salen del primer 30% de la página).
• Estructura RAG-friendly: H2/H3, listas numeradas, tablas, estadísticas/citas (levers verificados; keyword-stuffing no sirve — GEO paper Aggarwal et al., KDD '24).
• Entidad nombrada explícitamente; freshness/fecha visible.

Mobile-first & performance (p75 real users)

• LCP < 2.5s · INP < 200ms · CLS < 0.1. LCP con fetchpriority="high" en una imagen, nunca lazy.
• Touch targets ≥24×24px (WCAG 2.5.8), 44-48px en móvil; inputs 16px (evita zoom iOS); body ≥16px, line-height ≥1.5, medida 45-75ch.
• clamp() fluido (rem min/max), container queries sobre breakpoints; env(safe-area-inset-*) + viewport-fit=cover.
• Budget JS ≤300-400KB gz; hydration mínima (RSC/islands). Long tasks partidas con scheduler.yield().

Accesibilidad (WCAG 2.2 AA) & conversión

• Contraste 4.5:1 texto / 3:1 UI y large text; :focus-visible ≥2px, ≥3:1; nunca outline:none sin reemplazo.
• prefers-reduced-motion respetado en TODO motion (obligatorio, no polish).
• Si hay 3D/parallax en scroll: solo transform/opacity (GPU), fallback estático legible, INP<200ms/CLS<0.1 se mantienen en móvil throttled, contenido nunca depende del scroll para verse. Detalle: references/scroll-3d-depth-2026.md.
• Focus no obstruido por sticky/cookie (2.4.11); alternativa no-drag (2.5.7); auth sin puzzle cognitivo + permite paste (3.3.8).
• Forms: labels visibles persistentes, error en texto (no solo color), autocomplete. HTML nativo > ARIA.
• CRO: un CTA primario claro (repetido en páginas largas), message-match H1↔anuncio, cookie banner con "Reject all" tan fácil como "Accept all" (exposición legal EU DSA/UCPD/EAA, no solo ética).

Nota de honestidad

Este skill codifica conocimiento investigado y verificado (trends 2026, CSS moderno, SEO/AEO, mobile, a11y). No sustituye al gusto: la decisión final de si una página se ve premium exige mirar el render, iterar y ajustar. Si tras el gate el resultado es solo "competente", nómbralo así y propón 1-3 mejoras concretas — no cierres con "quedó perfecto".