kennedys0/taste-engine — enrutador de estilos visuales y SEO

Taste Engine — enrutador de estilos

Un proceso universal, muchas estéticas independientes — con antisuciedad, SEO condicional público y movimiento alineado con el estilo. Taste Engine controla cuándo preguntar, qué paquete de estilo seleccionado cargar y cómo aplicarlo. El motor en sí no tiene una estética propia. Los paquetes de estilo en styles/*.md contienen las instrucciones de diseño reales.

Fidelidad del material (estilos seleccionados) — contrato a nivel de captura de pantalla

Las estéticas visuales seleccionadas deben ser reconocibles desde la interfaz renderizada, no solo mencionadas en encabezados o nombres de variables CSS. Cuando se selecciona glassmorphism, carga styles/glassmorphism.md y aplica su obligatorio control de fidelidad del material de vidrio: paneles reales visibles y esmerilados/tintados que filtran luz de fondo diferenciada, reflejos/bordes legibles y un respaldo accesible. Un héroe azul marino plano con un CTA azul no es Glassmorphism. Usa tests/glassmorphism-visual.md para comprobaciones de aceptación y examples/glassmorphism/frosted-surfaces.css como receta inicial. No apliques esta verificación específica de vidrio a otros estilos; cada estética conserva sus propios requisitos.

Excepción de degradado específica para Glassmorphism

Cuando se selecciona Glassmorphism, los fondos de degradado CSS intencionados, campos de luz ambiental y formas de color suave controladas están explícitamente permitidos porque hacen visible el esmerilado translúcido y la profundidad. No los elimines para satisfacer advertencias generales antisuciedad sobre degradados. Lee styles/glassmorphism.md («Excepción explícita de fondo degradado») y valida que la primera ventana muestre un panel real filtrando su fondo diferenciado. Esta exención se aplica solo al material seleccionado y nunca anula la usabilidad, veracidad, accesibilidad o restricciones del usuario.

Invocación automática: el contrato de cero comandos

• Esta es una habilidad activada por tarea, no un flujo solo de comandos de barra. Los agentes instalados que admitan Habilidades de Agente autónomas deben descubrir los metadatos anteriores en solicitudes de portafolio, sitio web, aplicación, dashboard, página de aterrizaje y rediseño de UI, incluso cuando el usuario nunca dice «taste-engine».
• Una vez invocada, aplica el Contrato de Invocación Automática antes de cualquier código de UI. La plataforma real decide si la habilidad se invoca; este archivo no puede crear un enlace a nivel de sistema operativo ni garantizar el cumplimiento en todos los hosts.
• Selección de estilo implícita: «crea un sitio de portafolio» → haz UNA pregunta de estilo concisa, luego termina el turno. Nunca preguntes al usuario sobre detalles no relacionados en el mismo turno.
• Selección de estilo explícita: «crea un sitio de portafolio en estilo esqueomorfismo» → normaliza el error tipográfico a skeuomorphism, lee styles/skeuomorphism.md y construye. No ejecutes el menú de preguntas.
• Proyecto establecido: una configuración de proyecto aprobada o una marca/estilo documentada tiene prioridad sobre los valores predeterminados genéricos para trabajo incremental; no interrumpas con un menú.
• Sin trabajo de frontend: implementación de API, depuración de lógica de negocio, migración de base de datos, infraestructura, tareas solo de escritura → no inicies el selector de estilo.

Compañero de ingeniería — condicional y consciente del framework

Una vez que la pregunta de estilo visual está resuelta (o se omite para sistemas existentes/trabajo no visual), aplica el Enrutador de Ingeniería. Cada UI web recibe el control universal Calidad de Interfaz Web; React/Next añade Rendimiento React y opcionalmente Composición React solo cuando la pila y la tarea lo justifican. El trabajo en React Native/Expo añade Móvil Nativo, no SEO web. La navegación con movimiento puede usar Transiciones de Vista después de comprobaciones de compatibilidad, o Anime.js opcional cuando sea realmente útil. Las tareas de escritura de documentación añaden Escritura de Documentación sin selector de estilo visual.

Estas son integraciones originales locales, no complementos de Vercel importados. Resumen prácticas de ingeniería aprendidas de investigación ascendente. Nunca asumas complementos ascendentes instalados, nunca requieras React, nunca despliegues sin intención explícita de despliegue, y no permitas que la guía técnica anule la estética del usuario. El pre-vuelo central, héroe de pantalla completa, SEO, antisuciedad y movimiento consciente del estilo permanecen sin cambios. Consulta pruebas de enrutamiento de ingeniería.

Héroe de pantalla completa — obligatorio cuando sea relevante

Después de la selección de estilo, para cualquier nuevo portafolio público, página de aterrizaje o página de inicio con un héroe, carga Contrato de Héroe de Pantalla Completa. Por defecto, usa una composición de encabezado + héroe de una pantalla visible: usa min-height: 100svh seguro para móviles (con respaldo 100vh) y resta la altura real del encabezado en flujo normal, o usa un héroe de altura completa cuando el encabezado se superpone a él. No apliques 100vh a ciegas: las alturas fijas pueden recortar texto y ventanas móviles cambiadas por la barra de herramientas. Mantén el contenido y CTA utilizables en pantallas estrechas/cortas; permite el crecimiento natural y el desplazamiento con zoom/texto grande. Sigue la guía ## Composición del héroe (primer viewport completo) del estilo seleccionado y los controles compartidos de antisuciedad. No inventes imágenes, insignias, estadísticas falsas o movimiento en bucle solo para llenar la pantalla.

Esta regla no fuerza un héroe de marketing en dashboards privados, formularios, espacios de trabajo de aplicaciones o ediciones incrementales que no crean/rediseñan el héroe. Una elección explícita del usuario por un héroe compacto o sin héroe prevalece. No se necesita una pregunta adicional de selección de estilo cuando el estilo ya está establecido.

Motor de movimiento Anime.js v4 — opcional y consciente del estilo

Para solicitudes explícitas de microinteracciones de UI, o al construir un estilo seleccionado que se beneficia genuinamente de movimiento adicional, carga el Adaptador de Motor de Movimiento y la guía ## Movimiento del estilo elegido. El movimiento nunca se convierte en un nuevo selector estético y nunca requiere una segunda entrevista. Una solicitud como «Añade microinteracción en este dashboard» conserva el estilo del proyecto existente y funciona sin una pregunta de estilo. Si el proyecto no tiene un lenguaje de diseño seleccionado y el usuario está construyendo nueva UI, el pre-vuelo original de una pregunta sigue siendo obligatorio.

Sin instalaciones automáticas de dependencias. Inspecciona primero la pila existente. Prefiere capacidades CSS/nativas del navegador para transiciones simples; solo considera Anime.js v4 cuando simplifique significativamente el movimiento coordinado o se haya solicitado explícitamente. Para React/Next, usa createScope() + limpieza del ciclo de vida; para usuarios que prefieren movimiento reducido, desactiva efectos no esenciales mientras mantienes las interacciones funcionales. No fuerces rebotes, bucles o escalonamiento gratuito. El mapeo de estilos está en styles/motion-profiles.json; la receta para React en examples/react/anime-v4-press.jsx. Las aplicaciones nativas/no web deben usar sus APIs de movimiento de plataforma en su lugar.

SEO entre estilos: automático y condicional

El SEO no es una elección de estilo. Para un sitio web público nuevo o sustancialmente rediseñado (portafolio, página de aterrizaje, blog, sitio web comercial público, documentación pública o páginas de producto públicas), carga la Integración SEO y, cuando sea necesario, las recetas de implementación SEO después de la selección de estilo visual. Aplica SEO técnico + contenido antisuciedad a cada estilo elegido, sin preguntar «¿quieres SEO?» como segunda pregunta. El SEO nunca cambia la estética material seleccionada.

• Estilo explícito: «Construye un portafolio Esqueomorfismo» → lee styles/skeuomorphism.md + references/seo.md, sin pregunta de estilo, luego implementa.
• Estilo faltante: «Construye un sitio de portafolio» → haz exactamente una pregunta de estilo y detente. Después de la respuesta, carga estilo + SEO e implementa. No omitas el pre-vuelo solo para escribir metadatos.
• Solo SEO: «Audita el SEO de mi sitio web» / «corrige las URLs canónicas y el sitemap» → lee el módulo SEO inmediatamente, sin entrevista de estilo visual y sin rediseño no solicitado.
• Aplicación privada/interna: preserva la confidencialidad e indexabilidad existente; no generes sitemap público ni reveles rutas privadas. Las tareas de backend/móvil nativo están fuera del alcance del SEO web ordinario.
• Dominio desconocido: no fabriques URLs en vivo, autoría, datos estructurados, reseñas o contenido de página; implementa semántica/título de manera segura e informa lo que queda pendiente.

SEO y estilo comparten los controles FLOOR / REFLEX / FINISH; la privacidad, el contenido veraz, la accesibilidad y el comportamiento funcional tienen prioridad sobre la estética y las preferencias de búsqueda. Consulta escenarios de aceptación SEO. La habilidad independiente opcional taste-seo es para instalaciones solo de SEO; los usuarios del enrutador no necesitan instalarla por separado.

Requisito estricto: pre-vuelo antes de la nueva implementación visual

Para tareas que introducen o rediseñan sustancialmente la UI visual, no escribas código de UI, generes maquetas de interfaz ni cambies tokens de diseño hasta que la dirección visual esté resuelta.

1. Examina la solicitud actual del usuario, la marca/sistema de diseño del producto existente y una configuración de estilo de proyecto explícitamente aprobada.
2. Si un estilo ya está explícitamente seleccionado (por ejemplo, «dashboard brutalista»), no preguntes de nuevo. Confírmalo en una línea corta si es útil y carga ese paquete de estilo.
3. Si el proyecto existente tiene un estilo claramente establecido y el usuario solicita cambios incrementales, consérvalo; no interrumpas con una nueva elección. Una solicitud de rediseño puede anular el estilo establecido.
4. De lo contrario, haz exactamente una pregunta concisa de selección de estilo y detente. Ofrece 6 opciones contrastantes y «Más estilos / Personalizado / Enviar referencia». No selecciones un estilo en silencio, comiences a codificar mientras esperas una respuesta ni hagas una entrevista de múltiples preguntas.
5. Cuando el usuario responda, resuelve el ID de estilo a través del registro, lee solo el(los) paquete(s) seleccionado(s), deriva tokens/decisiones específicos del proyecto y luego ejecuta. Un adjetivo o referencia proporcionado por el usuario puede requerir interpretar las características del estilo en lugar de forzar un preajuste.
6. Si un ejecutor de herramientas no puede pausar para la entrada del usuario, informa la selección no resuelta y no fabriques consentimiento. Una instrucción explícita para usar un valor predeterminado autónomo de mejor esfuerzo puede autorizar un estilo provisional; márcalo como provisional y reversible.

Pregunta obligatoria de primera vez (ejemplo en indonesio)

Antes de empezar a diseñar, ¿qué estilo visual te gustaría?

1. Claymorphism — suave, táctil, profundidad sutil
2. Glassmorphism — transparente, en capas, moderno
3. Brutalism — tipografía audaz, cuadrícula cruda, alto contraste
4. Neo-brutalism — colores llamativos, bordes y sombras duras
5. Minimalism — limpio, simple, enfoque en el contenido
6. Swiss / Editorial — cuadrícula de precisión, tipografía dominante O escribe otros, personalizado, o envía una referencia.

Adáptate al idioma del usuario. Mantenlo como una sola pregunta; describe las diferencias sin declarar una «mejor». Para menús largos, primero presenta los seis más una forma de ver las opciones restantes. Si el usuario quiere ejemplos, muestra opciones antes de seleccionar. Si el usuario solicita un selector interactivo y el agente lo admite, presenta las mismas opciones como controles de UI.

Paquetes de estilo disponibles

Lee styles/registry.json al coincidir IDs, alias, errores ortográficos comunes y descripciones. Normaliza la puntuación, guiones y mayúsculas/minúsculas; respeta las menciones de estilo negadas («no glassmorphism») y el contexto. Cuando esté disponible, python3 scripts/style_probe.py --prompt "..." puede proporcionar una sugerencia de estilo determinista; la interpretación semántica y el contexto del proyecto aún prevalecen. No invoques una habilidad de estilo independiente por su nombre: lee el archivo local styles/<id>.md seleccionado, que es parte de este enrutador instalado. Paquetes integrados:

ID	Dirección	Archivo a cargar una vez seleccionado
claymorphism	Esculpido táctil	paquete de estilo
glassmorphism	En capas translúcido	paquete de estilo
brutalism	Estructurado crudo	paquete de estilo
neo-brutalism	Audaz juguetón	paquete de estilo
minimalism	Claridad restringida	paquete de estilo
swiss-editorial	Cuadrícula tipográfica	paquete de estilo
bento	Mosaicos modulares	paquete de estilo
skeuomorphism	Metáfora de control físico	paquete de estilo
retro-terminal	Estética de consola	paquete de estilo
enterprise	Flujo de trabajo/datos primero	paquete de estilo

Personalizado es de primera clase: si la estética elegida no está en el registro, recopila una referencia breve o restricciones, luego crea una definición de estilo provisional específica del proyecto usando las mismas dimensiones. Nunca etiquetes erróneamente el estilo como un paquete no presente. No requieras acceso a internet externo para elegir.

Estados del enrutador

• needs-selection: Trabajo visual nuevo; sin dirección elegida/confirmada. Haz una pregunta de estilo y detente.
• ready: Estilo o marca existente explícitamente establecido; carga el paquete relevante e implementa.
• refine: Cambio pequeño en UI existente; conserva el estilo, modifica solo los tokens/componentes necesarios.
• custom: El usuario elige una combinación, da capturas de pantalla o solicita un estilo no especificado; mapea a las mismas dimensiones de diseño y confirma solo la ambigüedad consecuente.
• non-visual: Backend, pruebas, documentación, correcciones de errores sin decisión visual; omite la selección de diseño por completo.

Reglas detalladas de enrutamiento, combinaciones y conflictos: enrutador de estilos. Para descubrimiento autónomo, alias de estilo, limitaciones del host y transcripciones de ejemplo exactas, consulta invocación automática.

Aplicación del estilo después de la selección

1. Extrae requisitos: producto, audiencia, dispositivo, framework, marca existente, gustos/disgustos explícitos, accesibilidad, rendimiento.
2. Carga solo el paquete seleccionado (más referencias compartidas según sea necesario). No mezcles reglas aleatorias de paquetes no seleccionados.
   • Estilo ≠ anatomía: deriva el flujo del producto y el contenido de la página de los objetivos reales del usuario, mientras que el paquete seleccionado determina el material visual. Antes de codificar...