interaction-design

Visión general de la skill interaction-design

Qué hace la skill interaction-design

La skill interaction-design ayuda a un agente a diseñar e implementar motion de interfaz, microinteracciones, transiciones y estados de feedback que hacen que las interfaces se entiendan mejor y respondan con más claridad. Encaja mejor cuando el trabajo no es solo “haz que se anime”, sino “haz que la interfaz comunique estado, intención y cambio mediante el movimiento”.

Quién debería instalar esta skill

Esta interaction-design skill encaja bien para diseñadores de UI, frontend engineers y equipos de producto que trabajan en superficies de producto pulidas: botones, estados de carga, modales, toasts, scroll reveals, drag-and-drop, estados hover y transiciones entre páginas. Es especialmente útil si ya sabes qué funcionalidad quieres, pero necesitas una mejor estructura para timing, easing y patrones de interacción.

El trabajo real que resuelve

La mayoría de usuarios adopta interaction-design para resolver un problema práctico: los prompts genéricos suelen producir animaciones vistosas pero arbitrarias. Esta skill orienta al agente hacia motion con propósito para feedback, orientación, foco y continuidad. Por eso resulta más útil para UI Design en producción que una petición vaga como “añade animaciones atractivas”.

Qué la diferencia de un prompt genérico de UI

Su valor principal está en las restricciones. La skill aporta guía de timing, patrones de easing y referencias concretas de implementación en lugar de dejar que el modelo improvise. También incluye archivos de referencia cargados de ejemplos para librerías de animación, patrones de microinteracción y animaciones con scroll, lo que reduce de forma real la improvisación durante la implementación.

Qué revisar antes de instalarla

Instala esta skill si buscas guía lista para implementar y ejemplos de patrones. Sáltatela si tu necesidad va más hacia estrategia visual amplia, gobernanza de design systems o auditoría completa de accesibilidad. El repositorio destaca sobre todo en comportamiento interactivo y patrones de implementación frontend, especialmente en ejemplos orientados a React.

Cómo usar la skill interaction-design

Contexto de instalación y puesta en marcha de interaction-design

El SKILL.md original no incluye un comando CLI de instalación, así que usa tu flujo habitual de skills para el repositorio wshobson/agents y después activa interaction-design desde plugins/ui-design/skills/interaction-design. Antes del primer uso, lee:

• SKILL.md
• references/animation-libraries.md
• references/microinteraction-patterns.md
• references/scroll-animations.md

Si solo vas a revisar un archivo de apoyo por encima, empieza por references/microinteraction-patterns.md, porque es el que más se parece al trabajo habitual de producto.

Cuándo conviene invocar interaction-design

Usa interaction-design cuando estés:

• añadiendo estados de carga, éxito, error o deshabilitado
• haciendo que dropdowns, modales, tabs o drawers se entiendan mejor
• refinando feedback de hover, focus, press y gestos
• implementando transiciones de página o de componentes
• añadiendo reveals activados por scroll o indicadores de progreso
• decidiendo entre transiciones CSS y una librería de animación en JS

Es menos útil para wireframes estáticos o exploración puramente estética de marca.

Qué inputs necesita la skill

La calidad del interaction-design usage depende mucho de lo específico que sea el input. Conviene aportar:

• nombre del componente o del flujo
• acción del usuario que inicia la interacción
• estados antes y después
• plataforma o framework
• restricciones de motion, rendimiento y accesibilidad
• si necesitas solo concepto, solo código o ambas cosas

Un input débil:

• “Add nice animations to this dashboard.”

Un input más sólido:

• “Use the interaction-design skill to improve a React settings panel. I need hover, pressed, saving, success, and error states for a save button; a 250ms drawer transition; and motion that feels calm, not playful. Prefer CSS or Framer Motion. Respect reduced motion.”

Cómo convertir un objetivo difuso en un prompt sólido

Un buen prompt de interaction-design guide suele tener cuatro partes:

1. Superficie UI: qué componente o pantalla cambia
2. Intención: qué debe comunicar el movimiento
3. Restricciones: timing, stack, accesibilidad, rendimiento
4. Formato de salida: razonamiento del patrón, código y edge cases

Ejemplo:

• “Apply the interaction-design skill for UI Design on a checkout form. Design loading and validation feedback for submit, inline field errors, and a success transition after payment. Use React and Tailwind. Include durations, easing choices, reduced-motion handling, and sample implementation.”

Flujo recomendado para proyectos reales

Un flujo práctico sería:

1. Define la acción del usuario y los cambios de estado.
2. Pide primero a la skill el razonamiento del comportamiento.
3. Después pide la implementación en tu stack.
4. Compara la respuesta con los archivos de referencia.
5. Recorta cualquier motion que no mejore el feedback o la orientación.
6. Prueba reduced motion y dispositivos más lentos.

Esta secuencia funciona mejor que pedir el código completo desde el principio, porque el mayor valor de la skill está en elegir el sistema de motion adecuado antes de programar.

Ruta de lectura del repositorio para ahorrar tiempo

Si estás decidiendo si instalarla, lee en este orden:

1. SKILL.md para principios y guía de timing
2. references/microinteraction-patterns.md para estados comunes de UI
3. references/animation-libraries.md si necesitas ayuda para elegir librería
4. references/scroll-animations.md si tu caso depende del viewport

Ese recorrido deja clara la fortaleza real de la skill: no solo teoría, sino implementación respaldada por patrones.

Elección de librerías e implementación

Las referencias se apoyan bastante en patrones de React e incluyen ejemplos con Framer Motion, además de enfoques nativos del navegador como IntersectionObserver. Eso significa que la interaction-design skill encaja bien si buscas cualquiera de estas dos opciones:

• interacciones ligeras con CSS o APIs nativas del navegador
• animación declarativa más rica en React

Si trabajas fuera de React, los principios siguen trasladándose bien, pero algunos ejemplos de código requerirán adaptación.

Guía práctica de timing y easing

Una de las partes más útiles de la skill es su modelo de timing:

• 100-150ms para feedback de hover y click
• 200-300ms para transiciones pequeñas de componentes
• 300-500ms para modales y cambios de estado más amplios
• 500ms+ solo para secuencias más coreografiadas

Úsalo como punto de partida, no como una regla rígida. La forma más rápida de mejorar el resultado es pedir al agente que justifique cada duración según su propósito: feedback, orientación, foco o continuidad.

Patrones de uso que resuelve especialmente bien

Este interaction-design usage funciona especialmente bien para:

• botones con carga y feedback asíncrono
• transiciones de tabs y shared layout
• affordances de hover y tap
• skeletons e indicadores de progreso
• secciones con scroll reveal
• motion para notificaciones y toasts
• feedback visual de drag-and-drop

Estos son precisamente los casos en los que los prompts corrientes suelen describir mal los cambios de estado y terminan generando comportamiento de UI frágil.

Restricciones que conviene indicar explícitamente

Para obtener resultados fiables, di esto de forma explícita:

• compatibilidad con prefers-reduced-motion
• evitar layout shift
• mantener las animaciones interrumpibles
• no bloquear la entrada del usuario durante transiciones salvo que sea necesario
• priorizar transforms amigables para GPU frente a cambios de layout costosos
• ajustar el tono de interacción, por ejemplo calm, crisp, playful o enterprise-neutral

Sin estas restricciones, el agente puede caer en un motion que se ve bien aislado, pero no encaja en el contexto real de producto.

FAQ de la skill interaction-design

¿Merece la pena interaction-design frente a un prompt normal?

Sí, si te importan la calidad de implementación y el propósito del motion. Un prompt normal puede producir animación decorativa. La interaction-design skill resulta más útil cuando necesitas comportamiento consciente del estado, guía de timing y patrones respaldados por ejemplos que realmente puedas llevar a producción.

¿Esta interaction-design skill es apta para principiantes?

Moderadamente. Los principios son fáciles de seguir, pero muchos ejemplos asumen soltura en frontend, sobre todo con React y el uso de librerías de animación. Aun así, quienes empiezan pueden sacarle partido si piden salidas más simples, como transiciones CSS, diagramas de estado o pasos de implementación.

¿interaction-design funciona solo con React?

No, pero React es donde el soporte queda más claro en las referencias, especialmente con Framer Motion. Si tu stack es Vue, Svelte o JavaScript puro, pide al agente que traduzca el patrón manteniendo timing, easing y lógica de estados.

¿Cuándo no debería usar interaction-design?

No uses interaction-design cuando el problema principal sea la arquitectura de la información, el branding visual o la estrategia de producto. Tampoco es la herramienta adecuada para escenas de marketing muy centradas en animación, donde el storytelling cinematográfico importa más que el feedback de usabilidad.

¿Puedo usar interaction-design para trabajo de UI Design systems?

Sí, sobre todo para estandarizar motion tokens, rangos de timing, comportamiento hover/press, estados de carga y convenciones de transición entre componentes. Resulta más útil para reglas de interacción que para una arquitectura completa de design tokens.

¿Cubre la accesibilidad automáticamente?

No del todo. La skill ayuda a tomar mejores decisiones de motion, pero aun así deberías pedir explícitamente comportamiento con reduced motion, visibilidad del foco, manejo de interacción por teclado y feedback no basado solo en movimiento para cambios de estado importantes.

Cómo mejorar la skill interaction-design

Da a la skill inputs estado por estado

La mejor manera de mejorar la salida de interaction-design es describir cada estado, no solo el componente. Por ejemplo:

• idle
• hover
• pressed
• loading
• success
• error
• disabled

Esto ayuda al agente a diseñar transiciones conectadas con cambios de estado reales en lugar de inventar efectos aislados.

Pide el razonamiento antes que el código

Un fallo muy común es saltar directamente a la implementación. Primero pregunta:

• qué debería moverse
• por qué debería moverse
• cuánto debería durar
• qué confusión del usuario evita

Después pide el código. Así obtendrás motion más limpio y menos sobreanimación.

Especifica tu presupuesto de motion

Indica si quieres:

• motion utilitario mínimo
• acabado de producto moderado
• motion expresivo de marca

Esta sola instrucción cambia mucho la calidad del resultado. Sin ella, el modelo puede pasarse y añadir una densidad de animación que tu producto no necesita.

Pide reduced motion y comportamiento de fallback

Si quieres resultados listos para producción, pide a la skill que incluya:

• manejo de prefers-reduced-motion
• una variante sin animación o con menos motion
• feedback de teclado y de estado de pantalla que no dependa solo del movimiento

Es una de las formas más sencillas de convertir una respuesta decente en una respuesta realmente desplegable.

Aporta contexto de código, no solo capturas

Si ya tienes un componente, pega el JSX, CSS o la lógica de estado relevante. La interaction-design skill se vuelve mucho más útil cuando puede mapear el motion sobre event handlers reales, nombres de estado y estructura del DOM.

Vigila estos fallos habituales

Ten cuidado si la primera respuesta incluye:

• animación en todos los elementos sin un propósito comunicativo
• timings incoherentes entre componentes relacionados
• transiciones que ocultan la latencia en vez de explicarla
• efectos hover que no se trasladan bien a touch
• animaciones con scroll que se disparan demasiado o perjudican la legibilidad

Son señales de que el prompt necesita restricciones más claras.

Itera probando una familia de interacciones cada vez

No rediseñes todo el motion de una vez. Empieza por una familia, como botones o transiciones de modales, y luego amplía. Así es más fácil evaluar si la interaction-design skill está mejorando la claridad o simplemente añadiendo movimiento.

Contrasta las referencias para ganar profundidad de implementación

Si una respuesta te parece genérica, redirige al agente a los archivos de apoyo del repositorio:

• references/microinteraction-patterns.md para estados habituales de componentes
• references/animation-libraries.md para ejemplos a nivel de API
• references/scroll-animations.md para comportamiento activado por viewport

Eso suele elevar la respuesta de lo conceptual a lo listo para implementar.

Pide tradeoffs, no solo recomendaciones

Un prompt de mucho valor sería:

• “Use interaction-design and compare CSS transitions vs Framer Motion for this component, including bundle cost, complexity, and maintainability.”

Eso obliga al modelo a ayudarte con decisiones de adopción, no solo a generar código.

Mejora la calidad de salida con criterios concretos de revisión

Cierra tu prompt con criterios de revisión como:

• “Keep motion purposeful, short, and consistent.”
• “Avoid layout shift.”
• “Respect reduced motion.”
• “Prefer patterns that are easy to maintain.”
• “Explain how the interaction improves feedback or orientation.”

Esos criterios alinean la interaction-design guide con lo que los equipos realmente necesitan para aprobar y llevar a producción el motion de UI.