Auditor de Diseño de Movimiento e Interacción

Qué hace

Revisa animaciones de UI, transiciones entre estados y micro-interacciones (hover, focus, loading) comparándolas con principios establecidos de motion design: duración, easing, propósito funcional del movimiento y jerarquía visual. Genera un reporte con hallazgos y recomendaciones concretas de ajuste.

Cuándo usarla

• Al revisar una interfaz antes de lanzamiento para detectar animaciones torpes o innecesarias
• Al definir estándares de motion design para un equipo o producto
• Al diagnosticar por qué una transición se siente lenta, abrupta o confusa

Pasos

1. Inventariar las animaciones y transiciones presentes en la interfaz
2. Evaluar cada una por duración, curva de easing y propósito funcional
3. Identificar movimientos puramente decorativos sin función clara
4. Comparar contra principios de referencia (jerarquía, continuidad, feedback inmediato)
5. Redactar recomendaciones concretas de ajuste (duración, easing, eliminar/agregar)
6. Entregar el reporte como borrador para discusión antes de implementar cambios

La skill

---
name: motion-design-reviewer
description: Audit UI animations, transitions, and hover states against established motion and interaction design principles.
---

# Auditor de Diseño de Movimiento

## Cuándo usarlo
Cuando una interfaz necesita revisión de sus animaciones y micro-interacciones antes de lanzarse o como parte de un refinamiento de producto.

## Qué se evalúa
Duración de la animación, curva de easing, propósito funcional (¿comunica algo o es decorativa?), continuidad espacial y feedback al usuario.

## Errores comunes
Animaciones demasiado largas que frenan la percepción de velocidad, easing lineal que se siente robótico, movimiento sin relación con la acción del usuario.

## Proceso de auditoría
1. Listar todas las animaciones y transiciones visibles.
2. Clasificar cada una como funcional o decorativa.
3. Medir o estimar duración y tipo de easing.
4. Marcar inconsistencias con el resto del sistema de diseño.

## Reporte final
Tabla con elemento, problema detectado, principio violado y recomendación específica de ajuste.

## Reglas de seguridad
El reporte es siempre un borrador de recomendaciones. Ningún cambio de código o diseño se implementa sin aprobación explícita del usuario. Nunca se inventan métricas de desempeño no medidas. No se comparten credenciales en el chat.

Para Claude Code, guárdala en ~/.claude/skills/motion-design-reviewer/SKILL.md. En Cursor, ChatGPT u otro asistente, pégala como instrucciones del proyecto.