¿Siempre escribe una animación?

No. Si la acción se repite cientos de veces al día, como un atajo de teclado, o no tiene un propósito claro, la habilidad lo dice y no escribe código. Ofrece una alternativa sin movimiento.

¿Incluye soporte para movimiento reducido?

Sí. El soporte para prefers-reduced-motion y el filtrado del hover para pantallas táctiles forman parte de la animación, no se dejan para después.

¿Sirve para apps de React Native?

No. Para apps Expo y React Native existe animate-expo; esta habilidad está pensada para la web.

Por emilkowalskiActualizada el 23 sept 2026

Crear una animación desde cero

/animate

/animate es una skill de Claude Code de la sección Web y Diseño. La mantiene emilkowalski y se publica con licencia MIT. Decide si algo debe animarse y, si procede, escribe la animación con la curva, duración y propiedades adecuadas, con reduced motion incluido.

Descripción del autor (traducida)

Construye una animación desde cero, tomando las decisiones en el orden que determina si se siente bien: si debe animarse siquiera, con qué propósito, qué herramienta, qué propiedades, qué curva y duración, cómo se interrumpe y cómo termina. Escribe la implementación. Úsalo cuando te pidan animar algo, añadir movimiento, dar vida a un componente o construir una transición. Para criticar una animación ya existente usa review-animations; para auditar todo un código base usa improve-animations.

Úsala cuando

Quieres añadir movimiento a un componente, como una tarjeta, un menú o una transición
Dudas de si algo debe animarse y quieres una decisión razonada
Necesitas la animación con curva, duración y reduced motion ya resueltos

No es para

Criticar animaciones que ya existen, para eso está review-animations
Auditar todo un código base, para eso está improve-animations

Qué obtienes

El código de la animación, más unas pocas líneas con el resultado de la decisión (frecuencia y propósito), los ingredientes usados y qué comprobar a ojo.

Cómo pedírselo

Añade una animación de entrada a esta tarjeta cuando aparece en pantalla
Quiero que este menú se sienta más vivo al abrirse y cerrarse
Crea una transición suave entre estas dos pantallas

Instalar

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

Tras instalar con el script, escribe /animate. ¿Usas Cursor, Windsurf o Codex? Guías por plataforma

Preguntas sobre esta skill

¿Siempre escribe una animación?: No. Si la acción se repite cientos de veces al día, como un atajo de teclado, o no tiene un propósito claro, la habilidad lo dice y no escribe código. Ofrece una alternativa sin movimiento.
¿Incluye soporte para movimiento reducido?: Sí. El soporte para prefers-reduced-motion y el filtrado del hover para pantallas táctiles forman parte de la animación, no se dejan para después.
¿Sirve para apps de React Native?: No. Para apps Expo y React Native existe animate-expo; esta habilidad está pensada para la web.

Demo en camino