front-activation

• Grupo: Enrutado
• Cuándo se activa: Empezar una tarea de UI, animación o 3D: detecta el perfil de front y la lectura mínima por tarea; efectos concretos del catálogo (CSS moderno, formas y SVG, tipografía cinética, microinteracciones, WebGL avanzado, física e impacto: objetos que caen, pantalla rota, intros y loaders)
• Requiere: ui-ux-pro-max
• Se instala: En los proyectos con perfil de front.

Esta skill es el punto de entrada cuando el proyecto NO tiene el bloque “Front y diseño” generado por sync.ps1 (es decir, cuando Senzu se instaló como plugin o skills globales). Haz esto en orden:

Árbol de front (empieza aquí)

1. ¿Tarea de UI (página, componente, layout, tema)? → 1º ui-ux-pro-max (design system + patrón + componentes).
2. ¿Efecto concreto (marquee, parallax, hover WebGL, blob, gooey, view transitions, microinteracción…)? → references/effects-catalog.md (las recetas propias en references/recipes/: CSS moderno, formas y SVG, tipografía cinética, microinteracciones, WebGL avanzado, física e impacto: objeto que cae, pantalla rota, intro o loader que se rompe, con demos que funcionan en recipes/demos/); si no está: references/effect-sources.md (Codrops/CodePen + protocolo para hacerlo receta).
3. ¿Animación? → árbol F2 de skill-router/references/decision-trees.md.
4. ¿3D? → árbol F3 del mismo archivo. Antes de implementar cualquier efecto, valida el coste con F4.

1. Detecta el stack de front (nunca lo asumas)

Evidencia	Perfil	--stack del buscador (en orden)
senzu/senzu.json con frontProfile	el que indique	frontProfile.stacks
composer.json con inertiajs/inertia-laravel (+ vue en package.json)	Laravel + Inertia + Vue 3	laravel, vue, html-tailwind, shadcn
package.json con next	Next.js (App Router) + React	nextjs, react, shadcn, html-tailwind
package.json con astro	Astro + React islands	astro, react, shadcn, html-tailwind
package.json con vue (sin Inertia)	Vue 3 SPA	vue, html-tailwind, shadcn
svelte / nuxt / angular / react-native / flutter	otros	el stack upstream con ese nombre
Nada concluyente	pregunta al usuario	—

2. Lee la skill que corresponda ANTES de escribir código

Si la tarea implica…	Skill	Grupo
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	ui-ux-pro-max (por defecto: empieza aquí)	Front y diseño
Tokens de diseño (primitivos → semánticos → componente), CSS variables, validación de tokens	design-system (si está instalada)	Front y diseño
Componentes shadcn/ui (React o Vue) y utilidades/tema de Tailwind	ui-styling (si está instalada)	Front y diseño
Verificar una UI terminada en navegador real: responsive 375/768/1440, dark mode, consola y accesibilidad (axe); obligatoria antes de dar una vista por hecha	ui-verify	Front y diseño
Generar imágenes IA acordes a la web: producto flotante, heros, fondos, 3D, mockups, texturas (gpt-image en Codex, Nano Banana en Antigravity, script multi-proveedor)	image-gen	Front y diseño
Tendencias y principios de diseño web moderno	modern-web-design (si está instalada)	Front y diseño
Animación declarativa en React/Next con Motion (variants, gestos, layout animations)	motion-framer (si está instalada)	Animación
Animación basada en físicas en React (react-spring)	react-spring-physics (si está instalada)	Animación
Componentes animados prehechos (Magic UI, React Bits)	animated-component-libraries (si está instalada)	Animación
Smooth scroll con Locomotive Scroll	locomotive-scroll (si está instalada)	Animación
Transiciones entre páginas con Barba.js (sitios multipágina)	barba-js (si está instalada)	Animación
Animaciones Lottie (JSON de After Effects)	lottie-animations (si está instalada)	Animación
Reveals simples al hacer scroll (AOS) en landings	scroll-reveal-libraries (si está instalada)	Animación
Animaciones JS ligeras (anime.js) de DOM/SVG	animejs (si está instalada)	Animación
Animación, scroll-driven, parallax, pin/scrub, timelines, transiciones de página, smooth scroll (Lenis)	gsap-scrolltrigger (si está instalada)	Animación
3D declarativo en React/Next (R3F + drei)	react-three-fiber (si está instalada)	3D / WebGL
Gráficos 2D/partículas en canvas con PixiJS	pixijs-2d (si está instalada)	3D / WebGL
Efectos 3D decorativos ligeros (Zdog, Vanta, tilt)	lightweight-3d-effects (si está instalada)	3D / WebGL
Exportar/optimizar modelos de Blender a glTF para web	blender-web-pipeline (si está instalada)	3D / WebGL
Escenas hechas en Spline e integración en web	spline-interactive (si está instalada)	3D / WebGL
Texturizado PBR con Substance 3D para web	substance-3d-texturing (si está instalada)	3D / WebGL
Animaciones interactivas Rive (state machines)	rive-interactive (si está instalada)	3D / WebGL
Juegos/experiencias con PlayCanvas	playcanvas-engine (si está instalada)	3D / WebGL
Combinar Three.js + GSAP + R3F + Motion en experiencias 3D complejas	web3d-integration-patterns (si está instalada)	3D / WebGL
3D con Babylon.js (juegos, escenas complejas)	babylonjs-engine (si está instalada)	3D / WebGL
VR/AR en el navegador (A-Frame, WebXR)	aframe-webxr (si está instalada)	3D / WebGL
3D, WebGL/WebGPU, modelos GLB/GLTF, shaders, partículas, configuradores, heros 3D	threejs-webgl (si está instalada)	3D / WebGL
Presentaciones HTML	slides (si está instalada)	Diseño gráfico y marca
Banners para redes, ads y heros	banner-design (si está instalada)	Diseño gráfico y marca
Logos, iconos, identidad corporativa, mockups (generación con IA)	graphic-design (si está instalada)	Diseño gráfico y marca
Voz de marca, identidad visual, guías de marca	brand (si está instalada)	Diseño gráfico y marca

Si una skill necesaria no está instalada, dilo y propón instalarla (/plugin install bundle-core-3d-animation@senzu o tools/install-skills.ps1 -Bundle …); no improvises esas librerías sin su skill.

2b. Lectura mínima por tarea (no cargues más)

Tarea	Lee solo
Landing / página de marketing	ui-ux-pro-max/SKILL.md §2 flujo + ui-ux-pro-max/references/es/page-patterns.md (patrón) + search.py --design-system
Dashboard / admin / tabla	ui-ux-pro-max/references/es/components-spec.md §Table, §Empty state, §Skeleton + guías --stack
Formulario	components-spec.md §Input, §Form (tu stack) + ui-ux-pro-max/references/es/accessibility.md §Formularios
Componente suelto	components-spec.md (solo ese componente) + tokens de senzu/design-system/*/MASTER.md
Tema / tokens / dark mode	ui-ux-pro-max/references/es/tokens-tailwind.md (sección de tu stack)
Auditoría de UI existente	ui-ux-pro-max/references/es/review-rubric.md
Animación	gsap-scrolltrigger/SKILL.md §1 (tu stack) + un patrón de gsap-scrolltrigger/references/es/scrolltrigger-patterns.md
3D	threejs-webgl/SKILL.md §1 (tu stack) + la referencia ES de esa integración

Protocolo: una skill por tarea; SKILL.upstream.md y referencias por secciones (Read offset/limit o Grep), nunca enteras.

3. 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 con ui-ux-pro-max:

python3 ${CLAUDE_SKILL_DIR}/../ui-ux-pro-max/scripts/search.py "<producto industria keywords>" --design-system -p "<Proyecto>" --persist -o senzu
# Windows: py -3 ...

(En plugin, la skill vive en ${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/.)

4. Reglas duras que aplican siempre

Contraste 4.5:1 · estados hover/focus/active/disabled/loading/empty/error · 375–1440 px sin scroll horizontal · prefers-reduced-motion · iconos SVG (nunca emojis) · tokens semánticos, no valores sueltos · formularios con label visible y error junto al campo · un H1 por vista · imágenes con dimensiones y alt · copy real. Checklist de entrega: ui-ux-pro-max/references/pro-rules.md.