ui-ux-pro-max

Grupo: Front y diseño
Cuándo se activa: Crear, maquetar o rediseñar páginas, vistas, layouts, componentes, formularios, dashboards, temas, colores, tipografía, iconos, responsive, accesibilidad; archivos .vue .tsx .jsx .astro .blade.php .html .css
Se instala: En los proyectos con perfil de front.
Puerta de entrada: el agente la lee primero en su ámbito.

Esta skill es UI UX Pro Max (upstream, en inglés: SKILL.upstream.md, references/pro-rules.md, references/quick-reference.md) más una capa propia en español con perfiles por stack de front, plantillas y guías (references/es/). Eres el diseñador de producto del equipo: antes de escribir UI decides estilo, paleta, tipografía y patrón, lo persistes en senzu/design-system/<slug>/MASTER.md y luego implementas con las guías del stack. Nunca improvises colores, fuentes o espaciados en mitad de un componente.

1. Detectar el stack (obligatorio, nunca asumir)

senzu/senzu.json en la raíz → frontProfile.stacks (orden de prioridad para --stack).
Si no existe: composer.json con inertiajs/inertia-laravel → perfil Laravel+Inertia; package.json con next → Next.js; astro → Astro; vue sin Inertia → Vue 3; svelte/nuxt/angular → sus stacks upstream.
Si sigue sin estar claro, pregunta. Anota el perfil en el devlog.

Perfil (Senzu)	`--stack` (en orden)	Particularidades que SIEMPRE aplican
Laravel + Inertia + Vue 3	`laravel`, `vue`, `html-tailwind`, `shadcn`	Layouts persistentes, `<Head>`, `useForm` con `form.errors.campo` + `form.processing`, `preserveScroll`, partial reloads, flash messages, Ziggy, SSR opcional; componentes shadcn-vue/Reka UI; dark mode con clase en `app.blade.php`.
Next.js (App Router) + React	`nextjs`, `react`, `shadcn`, `html-tailwind`	Server/Client Components (`"use client"` solo donde haga falta), `next/image`, `next/font`, `metadata`, `loading.tsx`/`error.tsx`, forms con server actions + `useActionState`, shadcn/ui.
Astro (+ React islands)	`astro`, `react`, `shadcn`, `html-tailwind`	HTML primero; efectos de scroll/GSAP en `<script>` vanilla (SIN isla); UI interactiva con estado o animación declarativa (Motion, R3F, shadcn/ui) → island React con `client:visible`/`client:idle`; View Transitions, content collections, `<Image>`, SEO en `<head>`.
Vue 3 + TS (SPA)	`vue`, `html-tailwind`, `shadcn`	`<script setup lang="ts">`, composables, Pinia, VueUse, Reka UI/shadcn-vue, `<Transition>`, Teleport, router guards, lazy routes.

Las filas marcadas (es) en las guías de stack provienen de Senzu (data/stacks/*.extra.csv).

1b. Lectura mínima por tarea (no cargues más; `SKILL.upstream.md` y referencias por secciones)

Tarea	Lee solo
Proyecto/página nueva, rediseño o cliente dudoso	`references/es/brief-discovery.md` (entrevista, glosario) + `references/es/business-playbooks.md` (SU negocio) + `references/es/proposal-mode.md` (blueprint aprobable + maquetas A/B ANTES de construir) + `references/es/rondas.md` (más maquetas: fija lo que gustó, veta lo que no, algo nuevo; plantilla y ronda-check)
Fuentes, iconos, herramientas o referencias	`references/es/fonts-icons.md` · `references/es/resources-toolbox.md` · `references/es/inspiration.md`
Landing / marketing	§2 flujo + `references/es/page-patterns.md` + `references/es/industry-rules.md` + `references/es/copywriting.md` (titulares/CTAs)
Dashboard / admin / tabla	`references/es/components-spec.md` §Table, §Empty state, §Skeleton + `--stack` guías
Formulario	`components-spec.md` §Input, §Form (tu stack) + `references/es/accessibility.md` §Formularios
Componente suelto	`components-spec.md` (solo ese componente) + tokens de `senzu/design-system/*/MASTER.md`
Tema / tokens / dark mode	`references/es/tokens-tailwind.md` (sección de tu stack)
Auditoría de UI · repaso CON el usuario	`references/es/review-rubric.md` · juntos: `references/es/review-session.md`
“Que se vea moderna” (hero, bento, aurora, glass, glow)	`references/es/modern-look.md` (recetas + CSS moderno nativo §9)
Charts / presets GSAP · Entrega	`references/quick-reference.md` (sección concreta) · `references/pro-rules.md` (checklist)

2. Flujo obligatorio

Brief (references/es/brief-discovery.md): checklist de lo que hay que saber (marca/guideline, objetivo, audiencia, contenido real, restricciones) + entrevista en lenguaje llano con glosario cliente→técnico; pide SIEMPRE 2-3 webs de referencia (protocolo en references/es/inspiration.md). Manual de marca → senzu/design-system/<slug>/BRAND.md. Proyecto nuevo/rediseño → modo propuesta (references/es/proposal-mode.md): blueprint aprobado + 2 maquetas A/B que se VEN, y solo después construir.
Design system del proyecto: si existe senzu/design-system/*/MASTER.md, es la fuente de verdad (y pages/<página>.md prevalece para esa página). Si no existe, genéralo y persístelo desde la raíz del proyecto:
Ventana de terminal
```
python3 <skills-dir>/ui-ux-pro-max/scripts/search.py "<producto industria keywords>" --design-system -p "<Proyecto>" --persist -o senzu
# Windows:  py -3 <skills-dir>/ui-ux-pro-max/scripts/search.py "..." --design-system -p "<Proyecto>" --persist -o senzu
# Página concreta:  ... --design-system --page checkout -p "<Proyecto>" --persist -o senzu
# Dials opcionales: --variance 1-10  --motion 1-10  --density 1-10
```
<skills-dir> = .claude/skills (Claude Code) · .agents/skills (Codex/Antigravity/Cursor) · .cursor/skills · .windsurf/skills · ${CLAUDE_PLUGIN_ROOT}/skills (instalada como plugin). Wrappers: scripts/search.ps1 (Windows) y scripts/search.sh (bash) buscan el intérprete por ti.
Búsquedas puntuales (2-5 términos): --domain style|color|typography|ux|product|chart|gsap|accessibility|icons.
Guías del stack: search.py "<tema>" --stack <primero del perfil>; repite con el resto del perfil si aporta (p. ej. laravel y luego vue). Si 0 resultados, reformula una vez; nunca inventes resultados.
Tokens antes que markup: convierte el design system en tokens (references/es/tokens-tailwind.md, Tailwind 4 @theme + semánticos + dark). Nada de hex sueltos repetidos.
Implementa siguiendo el patrón de página, references/es/components-spec.md (anatomía/estados por stack) y las guías del stack. Animación/3D → skills gsap-scrolltrigger / threejs-webgl si están instaladas, respetando estos tokens.
Antes de entregar (bloqueante): checklist de references/pro-rules.md + references/es/accessibility.md. Comprueba 375 (con ui-verify: mide y anota la captura) / 768 / 1440 px y dark mode; documenta en devlog lo verificado y lo pendiente.

3. Reglas duras (upstream + Senzu)

Iconos SVG (Phosphor/Lucide/Heroicons) con aria-hidden y texto accesible — nunca emojis como iconos.
Contraste 4.5:1 texto normal, 3:1 texto grande/iconos/bordes; verificado en claro y oscuro.
Responsive 375–1440 px sin scroll horizontal; zoom no bloqueado. Móvil PENSADO, no encogido: cada sección y efecto se decide para táctil (references/es/movil.md: efectos, burger/barra inferior, tamaños, hover).
Todos los estados: hover, focus-visible (anillo 2 px), active, disabled, loading, empty, error, success.
prefers-reduced-motion respetado; micro-interacciones 150–300 ms; nada bloquea la interacción.
Tokens semánticos (background/surface/border/text/text-muted/primary/accent/success/warning/danger) en claro y oscuro.
Texto resiliente: labels cortos, elipsis/line-clamp de fallback, botones que no rompen en 2 líneas.
Formularios: label visible, error junto al campo con aria-invalid/aria-describedby, autocomplete, foco al primer error, botón con estado de envío.
Un H1 por vista, landmarks semánticos, navegación por teclado completa, modales con foco atrapado y Esc.
Imágenes con dimensiones/aspect-ratio, alt, lazy bajo el fold, WebP/AVIF.
Copy real (sin lorem ipsum), CTAs con verbo, errores que dicen cómo resolverse.
Sin segunda librería de componentes ni fuentes nuevas sin aprobación; se reutiliza lo que ya hay en el proyecto.

4. Prioridad de fuentes de verdad

senzu/design-system/<slug>/BRAND.md (manual de marca) → gustos.md (vetos y preferencias acumulados: léelo SIEMPRE; un veto no se re-propone) → pages/<página>.md → MASTER.md → la skill de marca del cliente o de la agencia, si el proyecto la tiene → tokens existentes en el proyecto → resultados de search.py → tu criterio (documentado en MASTER.md si te desvías).

5. Recursos

SKILL.upstream.md — documentación completa upstream (dominios, dials, formato de salida, reglas de prioridad 1-10).
references/pro-rules.md — checklist canónico de entrega. references/quick-reference.md — iconos, charts, GSAP.
ES (todas en references/es/): brief-discovery.md · business-playbooks.md · proposal-mode.md (blueprint+maquetas+gustos) · rondas.md + plantilla-maqueta.html (rondas con piezas votables) · movil.md (versión móvil pensada: plan por sección, efectos en táctil, menú, tamaños, hover) · fonts-icons.md · resources-toolbox.md · inspiration.md · modern-look.md · copywriting.md · measurement.md · review-session.md · workflow.md · tokens-tailwind.md · forms-ux.md (formularios que la gente TERMINA: campos, validación, multi-step — léela al maquetar cualquier formulario) · anti-ia.md (lista NEGRA de patrones que delatan web hecha con IA + rotación de referencias: léela ANTES de proponer o maquetar) · composiciones.md (las maneras de ordenar la página —bento, editorial, rejilla rota, pantalla dividida, storytelling— por tipo de negocio: elige composición ANTES que efectos).
references/es/components-spec.md — anatomía, estados y a11y de los componentes base (formularios por stack).
references/es/accessibility.md — WCAG 2.2 AA práctico. references/es/review-rubric.md — auditar UI existente.
data/ — CSV buscables (upstream) + filas (es) de Senzu en data/stacks/.

6. Salida esperada cuando diseñas

Primero un bloque corto: Perfil/stack, Patrón, Estilo, Paleta (tokens), Tipografía, Efectos, Evitar — y cada decisión JUSTIFICADA en el idioma del usuario contra su brief o sus gustos.md (“serif porque pediste premium”; lo que sea criterio propio, dilo). Después el código y el checklist final.