gsap-frameworks

Descripción general de la skill gsap-frameworks

Para qué sirve gsap-frameworks

gsap-frameworks es la skill de GSAP para Vue, Nuxt, Svelte, SvelteKit y otros frameworks de componentes que no son React. Te ayuda a escribir código de animación que respeta el momento del ciclo de vida, el alcance de los selectores y la limpieza, para que los efectos funcionen correctamente después del montaje y se eliminen de forma limpia al desmontar.

Quién debería instalarla

Usa la skill gsap-frameworks si estás creando animaciones de Frontend Development dentro de un framework de componentes y necesitas algo más fiable que lo que puede dar un prompt genérico. Encaja especialmente bien cuando tu tarea implica onMounted, onUnmounted, onMount, onDestroy, refs de componente o aislamiento del DOM dentro de un único componente.

Qué te ayuda a evitar

El valor principal de gsap-frameworks es evitar errores típicos de framework: animar antes de que exista el DOM, dejar ScrollTriggers o tweens activos después de cambios de ruta, o seleccionar por accidente elementos fuera del componente. Si estás comparando decisiones de instalación de gsap-frameworks, esta es la skill adecuada cuando el resultado tiene que ser seguro para el ciclo de vida y estar limitado al componente.

Cómo usar la skill gsap-frameworks

Instala y lee primero los archivos correctos

Instala con npx skills add greensock/gsap-skills --skill gsap-frameworks. Después, empieza por skills/gsap-frameworks/SKILL.md, porque ahí están las reglas principales y los patrones específicos de cada framework. Si trabajas desde un clon del repo, revisa antes los ejemplos de la misma carpeta de la skill antes de redactar el código.

Convierte una petición vaga en un prompt útil

Un buen prompt de uso de gsap-frameworks debería nombrar el framework, el objetivo de la animación y las expectativas de limpieza. Por ejemplo: “Crea una animación para un componente de Vue 3 donde las tarjetas se desvanezcan y entren deslizándose al montarse, usa ref y onMounted, limita los selectores al raíz del componente y limpia al desmontar”. Eso es mucho mejor que “anima esta página”, porque la skill necesita detalles de ciclo de vida y estructura para generar código seguro.

Incluye los datos que la skill necesita

Los mejores inputs para gsap-frameworks guide suelen incluir: versión del framework, si el código usa Composition API o script setup, qué elementos se animan, si se prefieren selectores o refs, y si la animación es única, reversible o basada en scroll. Si además mencionas cambios de ruta, SSR o componentes anidados, la skill puede evitar patrones que se rompen en esos entornos.

Usa el repositorio como fuente de patrones

El primer archivo que conviene leer es SKILL.md; si necesitas ejemplos de implementación, busca las secciones de ejemplos por framework que se referencian allí, especialmente los patrones de Vue y Svelte. En la práctica, gsap-frameworks for Frontend Development funciona mejor cuando tratas la skill como una asistente para dar forma al código: pásale el archivo del componente, el comportamiento de movimiento que quieres y cualquier restricción sobre limpieza, alcance o SSR.

Preguntas frecuentes sobre la skill gsap-frameworks

¿gsap-frameworks es solo para Vue y Svelte?

No. Vue y Svelte son los objetivos principales, pero las indicaciones también se aplican a otros frameworks de componentes con fases de montaje y desmontaje. Si tu framework tiene un ciclo de vida claro y necesitas GSAP acotado al componente, gsap-frameworks suele encajar bien.

¿Cuándo debería usar gsap-react en su lugar?

Usa gsap-react para proyectos en React. La skill gsap-frameworks no es la elección correcta cuando la app depende de hooks de React y useGSAP, porque los patrones específicos de React difieren del cleanup y el alcance en Vue o Svelte.

¿La necesito aunque ya sepa GSAP?

Sí, si necesitas una integración segura para el framework. Conocer lo básico de animación en GSAP no resuelve automáticamente el timing del ciclo de vida, el alcance de los selectores ni el desmontaje. La skill gsap-frameworks resulta más útil cuando el código de animación debe vivir dentro de un componente, no en una página estática.

¿Es apta para principiantes?

Sí, si puedes describir con claridad un componente y una animación objetivo. Lo que más suele costar a quienes empiezan es omitir los detalles del framework o los requisitos de limpieza. Si aportas la estructura del componente y el movimiento deseado, la skill puede guiar una implementación viable.

Cómo mejorar la skill gsap-frameworks

Da forma al componente, no solo al efecto

La mejora más grande en la calidad llega cuando especificas la estructura del componente: qué elementos existen, cuántos son y si se renderizan de forma condicional. Un prompt como “anima tres tarjetas de características en un componente de Nuxt usando refs y una limpieza completa” produce un resultado de gsap-frameworks mucho mejor que “hazlo suave”.

Indica explícitamente los requisitos de ciclo de vida y limpieza

Si la animación debe ejecutarse una vez, repetirse al cambiar de ruta o detenerse al salir, dilo desde el principio. gsap-frameworks rinde mejor cuando sabe si debe usar una configuración solo en montaje, un alcance estilo context o una limpieza explícita en onUnmounted/onDestroy.

Comparte las restricciones que cambian la implementación

Menciona SSR, hidratación, listas dinámicas, contenido de slots o componentes hijos anidados cuando importen. Estos detalles ayudan a la skill a evitar lógica de selectores frágil y a explicar si en tu caso es más seguro usar refs, raíces de componente o elementos contenedores.

Revisa la primera salida fijándote en el alcance y el desmontaje

El fallo más común es un código que visualmente parece correcto, pero usa un alcance de selectores demasiado amplio o deja la limpieza incompleta. Si la primera respuesta está cerca, mejorala pidiendo un aislamiento más estricto del componente, un teardown explícito o una versión adaptada a la sintaxis exacta de tu framework.