Saltar al contenido

Te doy la bienvenida

Portada de emilkowalski/skills con el panda de El Máster IA
Repo · Construir una app

emilkowalski/skills

Skills de animación para Claude. Con estas se hicieron los movimientos de esta web: rápidos, suaves y sin exagerar.

  • Nivel: Intermedio
  • Precio: Gratis

Qué incluye

  • emil-design-eng: la skill principal. Reglas de animación y consejos de diseño para interfaces.
  • animate: crea una animación desde cero eligiendo bien la curva, la duración y las propiedades.
  • review-animations e improve-animations: revisan tus animaciones con reglas estrictas y te dan un plan de arreglos por prioridad.
  • find-animation-opportunities: te dice dónde vale la pena animar y dónde no.
  • animation-performance: arregla animaciones que se traban o pierden cuadros.
  • animation-vocabulary: las palabras exactas para pedirle a la IA la animación que tienes en la cabeza.
  • apple-design: los principios de diseño y movimiento de Apple, llevados a la web.
  • mobile-native, break-ui y prototype: que tu web se sienta app en el celular, ponerla a prueba con datos extremos y comparar varias versiones de una pieza.
  • animate-expo, write-swift, pick-ui-library y ask-sonner: para React Native, Swift, elegir librerías confiables y usar Sonner.

Para quién es

Para quien construye interfaces con IA y siente que las animaciones le salen bruscas, lentas o exageradas. Sirve tanto si diseñas como si programas.

Los agentes de IA no tienen buen gusto para el movimiento. Ponen ease-in donde va ease-out, alargan transiciones que deberían durar 200 ms o animan cosas que nadie pidió. Son detalles pequeños, pero se suman y la interfaz termina sintiéndose barata. Estas skills le dan a Claude la lista de esos errores y la forma de corregirlos. Con ellas se hicieron los movimientos de esta web.

Qué cambia cuando las instalas

Sin skills, le pides «anima este menú» y Claude elige lo primero que se le ocurre. Con ellas, antes de escribir código se pregunta:

  • ¿Hace falta animarlo? Lo que usas cien veces al día no debería hacerte esperar.
  • ¿Qué curva va? Lo que entra frena al final (ease-out). Lo que sale puede acelerar.
  • ¿Cuánto dura? Casi siempre menos de lo que crees: entre 150 y 300 ms para la mayoría de la interfaz.
  • ¿Qué propiedad muevo? transform y opacity, que no traban la página. Nunca ancho, alto ni márgenes.
  • ¿Respeta a quien prefiere menos movimiento? Siempre con su regla de prefers-reduced-motion.

Pídeselo así

Anima la apertura de este modal con la skill animate. Que se sienta rápido,
sin rebote, y que respete prefers-reduced-motion.

Corre improve-animations en todo el proyecto y dame el plan
ordenado por impacto. No cambies nada todavía.

Usa find-animation-opportunities en la página de inicio y dime
qué animarías y qué dejarías quieto.

Un consejo

Las skills amplifican lo que ya sabes, no lo reemplazan. Lee lo que Claude te explica cuando corrige algo: en pocas semanas empiezas a ver esos errores sin ayuda.

  • skills
  • animación
  • claude code
  • diseño

Mira también

Créditos

Probado por mí

Quién la hizo
Emil Kowalski
Licencia
MIT
Verificación
Lo verifiqué el

¿Eres autor o autora y algo no está bien?

Corregir un crédito