julianramirezreyes Activation Contract / Contrato de activación
Usa esta skill al añadir transiciones, animaciones o efectos visuales a una interfaz.
Hard Rules / Reglas estrictas
- Cada animación comunica causa, cambio de estado, jerarquía o continuidad; decoración sola no justifica coste.
- Respeta
prefers-reduced-motioncon una alternativa estable y sin movimiento esencial. - No animes propiedades que fuerzan layout cuando
transformuopacityresuelvan el caso. - Nunca ocultes latencia, errores ni bloqueo de interacción detrás de una animación.
Decision Gates / Puertas de decisión
| Objetivo | Movimiento |
|---|---|
| Confirmar respuesta inmediata | Microinteracción breve. |
| Explicar cambio espacial | Transformación con origen claro. |
| Indicar trabajo en curso | Progreso honesto y cancelable si aplica. |
| Sin propósito verificable | No animar. |
Execution Steps / Pasos de ejecución
- Escribe qué entiende el usuario gracias al movimiento.
- Define inicio, fin, duración, curva y alternativa reducida.
- Prueba teclado, foco, bajo rendimiento y contenido dinámico.
- Mide rendimiento y elimina movimiento que perjudique comprensión o respuesta.
Output Contract / Contrato de salida
Entrega propósito, especificación de movimiento, alternativa reducida y presupuesto de rendimiento.
References / Referencias
skills/design-system/SKILL.mdskills/accessibility/SKILL.md