skill-router

• Grupo: Enrutado
• Cuándo se activa: Empezar cualquier tarea no trivial: decide qué skill y sección leer (tabla de activación + protocolo de carga)
• Se instala: Siempre: viene en todos los proyectos.
• Puerta de entrada: el agente la lee primero en su ámbito.

Protocolo de carga de contexto (obligatorio)

1. Una skill por tarea (dos como máximo si la tarea cruza UI + lógica). Lee su SKILL.md; no leas otras “por si acaso”.
2. Dentro de la skill, sigue su tabla “Lectura mínima por tarea”: lee solo esa sección/referencia.
3. SKILL.upstream.md y references/ se leen por secciones (Read con offset/limit o Grep sobre el mapa de líneas), nunca enteros.
4. No releas lo ya leído en la sesión; anota en tu razonamiento qué skill/sección usaste.
5. Al terminar la parte especializada, vuelve al contexto del proyecto (CLAUDE.md/AGENTS.md, senzu/design-system/*/MASTER.md).
6. Si una skill necesaria no está instalada, dilo y propón instalarla (sync.ps1 -Skills …, -Bundle …, /plugin install …); no improvises esa librería.

1. Detecta el stack (nunca lo asumas)

senzu/senzu.json (stack, frontProfile) → si no existe: composer.json (laravel/framework, inertiajs/inertia-laravel), package.json (next, astro, vue, react), pyproject.toml (fastapi, langgraph). Si no está claro, pregunta.

Árbol de decisión (empieza aquí)

Árboles completos (global, B1/B2 backend, F2 animación, F3 3D, F4 presupuesto de efectos): references/decision-trees.md.

1. ¿Existe senzu/plan/PLAN.md? → sigue la tarjeta doing (o primera todo) con project-planner §references/task-protocol.md.
2. ¿Proyecto o feature nueva? → project-planner.
3. ¿Produce UI/estilos/página? → ui-ux-pro-max PRIMERO; después la especialista (animación F2, 3D F3).
4. ¿Animación/scroll? → árbol F2 · ¿3D/WebGL? → árbol F3 (valida el coste con F4).
5. ¿Lógica/endpoint/tests/seguridad/rendimiento? → code-quality (por síntoma: árbol B2).
6. ¿Módulo con dominio rico? → árbol B1 (¿capas simples o DDD?).
7. ¿Cerrar tarea o commitear? → devlog.

2. Tabla de activación (lee el SKILL.md indicado ANTES de actuar)

Si la tarea implica…	Skill	Grupo
Empezar cualquier tarea no trivial: decide qué skill y sección leer (tabla de activación + protocolo de carga)	skill-router (por defecto: empieza aquí)	Enrutado
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)	front-activation	Enrutado
Instalar o actualizar Senzu completo en el proyecto (/instalar): todo, por categorías o a medida	instalar-proyecto	Enrutado
Arrancar un proyecto o feature, planificar, “¿qué hacemos ahora?”, siguiente tarea; y SIEMPRE que exista plan/PLAN.md (se sigue el plan)	project-planner (por defecto: empieza aquí)	Planificación
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
Algo falla o no funciona (tests en rojo, excepción, error 500, resultado incorrecto): método reproducir, test que falla, hipótesis, acotar y arreglar la causa	depurar	Calidad de código
Auditar backend y arquitectura con pruebas (herramientas por stack, evidencia por hallazgo, informe), deuda técnica, código legado, dependencias circulares y refactor seguro con tests de caracterización	backend-audit	Calidad de código
Escribir o refactorizar lógica, crear tests, manejar errores/logs, seguridad, rendimiento, diseñar endpoints/APIs, revisar o abrir un PR	code-quality	Calidad de código
Módulo con reglas de negocio ricas, varios contextos, refactor de arquitectura desde MVC, “¿cómo estructuro esto?” (empieza por su checklist “¿hace falta?”)	ddd-hexagonal (si está instalada)	Arquitectura
Maquetar o arreglar emails HTML (transaccionales y newsletters): react-email/MJML/plantillas del framework, compatibilidad Gmail/Outlook, dark mode, texto plano y pruebas antes de enviar	email-html	Marketing y SEO
Posicionar y medir la web: SEO on-page y local, keywords, Search Console, GA4, Google Tag Manager (contenedor, dataLayer, Consent Mode) y MCPs de analítica para operar con agentes	marketing-seo	Marketing y SEO
Desplegar y operar en producción cualquier stack: Netlify/Vercel/Forge/VPS, Docker, CI/CD con GitHub Actions, secretos por entorno, colas y cron en prod, backups con restore probado, monitorización e incidentes	deploy-ops	Operaciones y despliegue
Terminar un paso relevante o commitear (siempre); preguntas sobre el pasado del proyecto (memoria y buscador)	devlog	Documentación

3. Reglas que aplican sin leer nada más

Contraste 4.5:1 y estados completos en UI · prefers-reduced-motion · tipado estricto · validar en el borde · tests del comportamiento · autorización en cada acción sensible · sin git push ni operaciones destructivas sin aprobación · devlog antes de commitear.