Skills

gsap-skills: enseñar a un asistente a escribir animación GSAP a la manera oficial

Para que un asistente use bien la API núcleo de GSAP, las líneas de tiempo o ScrollTrigger; instala las habilidades con el npx oficial y la biblioteca de animación desde el paquete gsap público.

Official source · gsap-skills

Install

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

Para quién

Para quien quiere que un asistente de código use GSAP (GreenSock Animation Platform) a la manera oficial. Texto oficial: estas son las habilidades IA formales de GSAP que enseñan el uso correcto, cubriendo la API núcleo, líneas de tiempo, ScrollTrigger, plugins, más React, Vue, Svelte, JS nativo y rendimiento.

Encaja mejor quien ya escribe animación y va a comprobar si gsap.to() / from() / fromTo(), la puesta en escena de la línea de tiempo o los disparadores de desplazamiento están bien. No trates este conjunto como el runtime de GSAP: la biblioteca se instala desde el paquete npm público gsap. Oficial: GSAP es cien por cien gratis, con todos los plugins; tras la compra de Webflow, los antiguos plugins Club (como SplitText, MorphSVG) son gratis para todos, incluido el uso comercial. No hace falta membresía Club, .npmrc, token de autenticación ni repositorio privado.

Antes de empezar debes poder ejecutar npx skills add en local. No reescribas ese comando como otro instalador no dado.

Primer intento en 3 minutos

Solo el comando de instalación del repositorio. Termina primero la instalación de habilidades y luego una comprobación de solo lectura; aún no cambies archivos del proyecto.

Requisitos previos: este entorno puede ejecutar npm/npx y tu asistente puede cargar habilidades recién instaladas. En el primer intento no escribas código de animación ni conectes un origen privado no documentado.

Lugar de instalación: añade las habilidades en el proyecto o espacio de trabajo con el comando oficial.

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

Repositorio oficial:

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

Página de producto GSAP:

https://gsap.com/

Disparo de bajo riesgo: tras instalar, que el asistente solo compruebe si un gsap.to() existente usa easing, duration, stagger o defaults mencionados en la API núcleo oficial. No dejes que cambie archivos primero. Si el siguiente paso escribiría código de línea de tiempo o ScrollTrigger, confirma qué archivos cambiarán antes de ejecutar.

Señal de éxito: el asistente habla de gsap.to() / from() / fromTo() en términos de gsap-core, sin inventar nombres de habilidad no listados. Qué asistentes pueden usar esta CLI lo apunta lo oficial:

https://github.com/vercel-labs/skills#supported-agents

No infieras de una nómina que «solo estos asistentes sirven».

Casos de uso

Caso 1: comprobar una escritura de animación núcleo local. Usa gsap-core: la API núcleo incluye gsap.to() / from() / fromTo(), más easing, duration, stagger, defaults. Encaja si ya hay un tween y quieres ver si los parámetros se desviaron. La evidencia solo llega a estos temas; no hay inventario completo de funciones. Comprueba primero en solo lectura; si el código cambia, confirma primero los efectos secundarios.

Caso 2: comprobar una animación de desplazamiento local. Usa gsap-scrolltrigger: enlace al scroll, pinning, scrub, triggers, más refresh y cleanup. Encaja en páginas que ya tienen disparadores de desplazamiento y quieren comprobar un refresh o una limpieza faltante. Inspecciona primero y luego decide si cambiar archivos. La habilidad de línea de tiempo gsap-timeline está en su propia línea en el original (sequencing, position parameter, labels, nesting, playback); no la mezcles con ScrollTrigger.

Límites de uso

Instala habilidades con npx skills add https://github.com/greensock/gsap-skills . Instala la biblioteca GSAP desde el paquete npm público gsap. No las trates como el mismo paso.

Las líneas de habilidad nombradas en el original son solo gsap-core, gsap-timeline, gsap-scrolltrigger. No inventes otros nombres.

GSAP y los antiguos plugins Club ya son gratis, incluido el uso comercial; la nota de la compra:

https://gsap.com/blog/webflow-GSAP/

No instales como si hiciera falta autenticación o un origen privado. Lo oficial no escribe los lenguajes como un conjunto exclusivo ni exige usar React, Vue o Svelte a la vez.