Cómo enseñar a una IA a escribir animaciones GSAP sin errores

Situación conocida: le pides a Claude o Cursor que cree una animación compleja con ScrollTrigger, y obtienes código que o no funciona o fue escrito con estándares de hace cinco años. La IA a menudo confunde la sintaxis de diferentes versiones, olvida registrar plugins o ignora los detalles específicos del ciclo de vida de React.

El equipo de GreenSock resolvió esto de manera elegante. Lanzaron gsap-skills — un conjunto de instrucciones oficiales que "incrustan" el conocimiento actualizado de la biblioteca directamente en el agente de IA.

¿Por qué es necesario si existe documentación?

Podría parecer que los LLMs populares ya tienen acceso a internet y una base de código masiva. Pero en la práctica, los modelos fueron entrenados con mucha basura: hilos de foros antiguos, tutoriales desactualizados y código de la era de jQuery. Como resultado, la IA podría sugerir TweenMax, que no se ha usado en años, o arruinar la limpieza de memoria en useEffect.

El proyecto gsap-skills no es solo una hoja de trampa. Son reglas estructuradas en formato Agent Skills. Cuando los conectas a tu editor (por ejemplo, Cursor) o agente CLI (Claude Code), la IA comienza a entender el contexto de la biblioteca de la misma manera que lo hacen los propios creadores de GSAP.

Qué hay dentro de este conjunto

Los desarrolladores dividieron el conocimiento en bloques lógicos. Esto es conveniente porque puedes cargar solo lo que necesitas para tu stack específico.

• gsap-core y gsap-timeline. Lo básico: cómo encadenar animaciones correctamente, usar parámetros de posición y evitar retrasos innecesarios a través de delay.
• gsap-scrolltrigger. Probablemente la parte más útil. La IA aprende a configurar correctamente scrub, pin y, críticamente, llamar a refresh() después de cambios de layout.
• gsap-react. Mejores prácticas para usar el hook useGSAP, trabajar con refs y context. No más memory leaks porque la red neuronal olvidó sobre revert().
• gsap-performance. Consejos de optimización: cuándo usar will-change, por qué los transforms son mejores que cambiar top/left, y cómo agrupar actualizaciones.

Por cierto, un buen bonus: después de que Webflow adquirió GSAP, todos los plugins (incluyendo SplitText y MorphSVG) se volvieron gratuitos. Esto también se refleja en las instrucciones de IA — ya no te molestará con preguntas sobre tokens privados y Club GSAP.

Cómo conectar tu editor con estos skills

La forma más rápida es usar la CLI. Si tienes Cursor o Claude Code instalado, simplemente ejecuta un comando en la terminal:

npx skills add https://github.com/greensock/gsap-skills

Para quienes prefieren control total, el repositorio tiene una carpeta skills/. Contiene archivos .md que describen la lógica para LLMs. Puedes simplemente copiarlos al directorio de reglas de tu agente (por ejemplo, en carpetas ~/.cursor/rules o similares para Windsurf y Copilot).

Beneficio práctico

Imagina que estás construyendo una landing page compleja. En lugar de buscar manualmente cómo sincronizar MotionPath con el scroll de la página, simplemente escribes en el chat de Cursor: "Haz que el cohete vuele a lo largo de una curva al hacer scroll".

Gracias a gsap-skills, el agente no solo escupirá un fragmento de código aleatorio. Este:

1. Verificará si el plugin MotionPath está registrado.
2. Usará sintaxis moderna de gsap.timeline({ scrollTrigger: { ... } }).
3. Sugerirá configuraciones óptimas de rendimiento.

¿Vale la pena implementarlo?

Si usas GSAP una vez cada seis meses solo para que un encabezado aparezca suavemente, probablemente puedes saltarte esto. Pero si las animaciones son una parte importante de tu frontend, gsap-skills te ahorrará mucho tiempo depurando "alucinaciones" de la IA.

Curiosamente, GreenSock fue uno de los primeros entre las bibliotecas principales en crear un config de IA oficial. Con toda probabilidad, esto pronto se convertirá en un estándar para todas las herramientas populares. Aunque la documentación del proyecto parece mínima, la base de conocimiento dentro de los archivos SKILL.md es lo suficientemente densa como para que el agente deje de cometer errores en cosas básicas.

Definitivamente vale la pena probarlo, especialmente si estás fuertemente invertido en Cursor o Claude Code. Este es uno de esos casos donde una pequeña configuración de herramienta cambia notablemente la calidad del código de salida.