gsap-frameworks

Visão geral da skill gsap-frameworks

Para que serve o gsap-frameworks

gsap-frameworks é a skill do GSAP para Vue, Nuxt, Svelte, SvelteKit e outros frameworks de componentes que não são React. Ela ajuda você a escrever código de animação que respeita o timing do ciclo de vida, o escopo dos seletores e a limpeza ao desmontar, para que os efeitos se comportem corretamente depois do mount e desapareçam de forma limpa no unmount.

Quem deve instalar

Use a skill gsap-frameworks se você está criando animações de Frontend Development dentro de um framework de componentes e precisa de mais do que um prompt genérico consegue fornecer com segurança. Ela é uma ótima escolha quando a tarefa envolve onMounted, onUnmounted, onMount, onDestroy, refs de componente ou escopo de DOM dentro de um único componente.

O que ela ajuda a evitar

O principal valor do gsap-frameworks é evitar erros comuns de framework: animar antes de o DOM existir, deixar ScrollTriggers ou tweens vazando após mudanças de rota e selecionar elementos fora do componente por engano. Se você estiver comparando decisões de instalação do gsap-frameworks, esta é a skill certa quando o resultado precisa ser seguro em relação ao ciclo de vida e limitado ao escopo do componente.

Como usar a skill gsap-frameworks

Instale e leia primeiro os arquivos certos

Instale com npx skills add greensock/gsap-skills --skill gsap-frameworks. Depois disso, comece por skills/gsap-frameworks/SKILL.md, porque ele contém as regras centrais e os padrões específicos de cada framework. Se você estiver trabalhando a partir de um clone do repositório, leia os exemplos na mesma pasta da skill antes de rascunhar o código.

Transforme um pedido vago em um prompt útil

Um bom prompt de gsap-frameworks usage deve nomear o framework, o objetivo da animação e as expectativas de limpeza. Por exemplo: “Crie uma animação de componente em Vue 3 em que os cards apareçam com fade e deslizem ao montar, use ref e onMounted, limite os seletores à raiz do componente e faça a limpeza ao desmontar.” Isso é muito melhor do que “anime esta página”, porque a skill precisa de detalhes de ciclo de vida e de estrutura para gerar código seguro.

Inclua as entradas de que a skill precisa

As melhores entradas para o gsap-frameworks guide normalmente incluem: versão do framework, se o código usa composition API ou script setup, quais elementos devem ser animados, se a preferência é por seletores ou refs e se a animação é única, reversível ou guiada por scroll. Se você também mencionar mudanças de rota, SSR ou componentes aninhados, a skill consegue evitar padrões que quebram nesses cenários.

Use o repositório como fonte de padrões

O arquivo que você deve ler primeiro é SKILL.md; se precisar de exemplos de implementação, procure as seções de exemplos por framework referenciadas ali, especialmente os padrões de Vue e Svelte. Na prática, gsap-frameworks for Frontend Development funciona melhor quando você trata a skill como uma assistente de modelagem de código: entregue o arquivo do componente, o comportamento de movimento desejado e quaisquer restrições de limpeza, escopo ou SSR.

FAQ da skill gsap-frameworks

O gsap-frameworks é só para Vue e Svelte?

Não. Vue e Svelte são os alvos principais, mas as orientações também se aplicam a outros frameworks de componentes com fases de mount e unmount. Se o seu framework tem um ciclo de vida claro e você precisa de GSAP com escopo de componente, gsap-frameworks costuma ser uma boa escolha.

Quando devo usar gsap-react em vez disso?

Use gsap-react para projetos React. A skill gsap-frameworks não é a escolha certa quando o app depende de React hooks e useGSAP, porque os padrões específicos de React diferem da limpeza e do escopo usados em Vue ou Svelte.

Preciso disso se já sei GSAP?

Sim, se você precisa de integração segura com o framework. Conhecer a base de animação do GSAP não resolve automaticamente timing de ciclo de vida, escopo de seletores ou teardown. A skill gsap-frameworks é mais útil quando o código de animação precisa viver dentro de um componente, e não em uma página estática.

É amigável para iniciantes?

Sim, desde que você consiga descrever claramente um componente e uma animação-alvo. Iniciantes normalmente só têm dificuldade quando omitem detalhes do framework ou requisitos de cleanup. Se você informar a estrutura do componente e o movimento desejado, a skill consegue orientar uma implementação viável.

Como melhorar a skill gsap-frameworks

Dê a forma do componente, não só o efeito

O maior salto de qualidade vem de especificar a estrutura do componente: quais elementos existem, quantos são e se são renderizados condicionalmente. Um prompt como “anime três cards de feature em um componente Nuxt usando refs e limpeza completa” produz uma saída gsap-frameworks melhor do que “deixe mais suave”.

Declare explicitamente as necessidades de ciclo de vida e limpeza

Se a animação deve rodar uma vez, repetir na troca de rota ou ser encerrada ao sair, diga isso logo de início. O gsap-frameworks funciona melhor quando sabe se deve usar configuração apenas no mount, escopo no estilo context ou limpeza explícita em onUnmounted/onDestroy.

Compartilhe as restrições que mudam a implementação

Mencione SSR, hydration, listas dinâmicas, conteúdo de slots ou componentes filhos aninhados quando isso for relevante. Esses detalhes ajudam a skill a evitar lógica frágil de seletores e a explicar quando refs, raízes de componente ou wrappers são escolhas mais seguras para o seu caso.

Revise a primeira saída para escopo e teardown

O modo de falha mais comum é um código que parece correto visualmente, mas usa um escopo de seletor amplo demais ou uma limpeza incompleta. Se a primeira resposta estiver próxima do ideal, melhore pedindo um escopo de componente mais restrito, teardown explícito ou uma versão adaptada à sintaxe exata do seu framework.