Skills

gsap-skills: ensinar um assistente a escrever animação GSAP à maneira oficial

Para um assistente usar corretamente a API núcleo do GSAP, timelines ou ScrollTrigger; instale as competências com o npx oficial e a biblioteca de animação a partir do pacote gsap público.

Official source · gsap-skills

Install

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

Para quem

Para quem quer que um assistente de código use GSAP (GreenSock Animation Platform) à maneira oficial. Texto oficial: estas são as competências IA formais do GSAP que ensinam o uso correto, cobrindo a API núcleo, timelines, ScrollTrigger, plugins, mais React, Vue, Svelte, JS nativo e desempenho.

Encaixa melhor quem já escreve animação e vai verificar se gsap.to() / from() / fromTo(), a encenação da timeline ou os disparos de scroll estão certos. Não trate este conjunto como o runtime GSAP: a biblioteca instala-se a partir do pacote npm público gsap. Oficial: GSAP é cem por cento grátis, com todos os plugins; após a aquisição pela Webflow, os antigos plugins Club (como SplitText, MorphSVG) são grátis para todos, incluindo uso comercial. Não é preciso adesão Club, .npmrc, token de autenticação nem repositório privado.

Antes de começar tem de conseguir executar npx skills add no local. Não reescreva esse comando como outro instalador não dado.

Primeira tentativa em 3 minutos

Só o comando de instalação do repositório. Termine primeiro a instalação das competências e depois uma verificação só de leitura; ainda não mude ficheiros do projeto.

Pré-condições: este ambiente consegue executar npm/npx e o assistente consegue carregar competências recém-instaladas. Na primeira tentativa não escreva código de animação nem ligue uma origem privada não documentada.

Local de instalação: acrescente as competências no projeto ou espaço de trabalho com o comando oficial.

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

Repositório oficial:

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

Página de produto GSAP:

https://gsap.com/

Disparo de baixo risco: depois de instalar, peça ao assistente só para verificar se um gsap.to() existente usa easing, duration, stagger ou defaults mencionados na API núcleo oficial. Não o deixe mudar ficheiros primeiro. Se o passo seguinte escrever código de timeline ou ScrollTrigger, confirme que ficheiros mudarão antes de executar.

Sinal de sucesso: o assistente discute gsap.to() / from() / fromTo() nos termos de gsap-core, sem inventar nomes de competência não listados. Que assistentes podem usar este CLI é apontado aqui:

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

Não infira de uma lista que «só estes assistentes servem».

Casos de uso

Caso 1: conferir uma escrita de animação núcleo local. Use gsap-core: a API núcleo inclui gsap.to() / from() / fromTo(), mais easing, duration, stagger, defaults. Serve quem já tem um tween e quer ver se os parâmetros se desviaram. A evidência só chega a estes temas; não há inventário completo de funções. Verifique primeiro em só leitura; se o código mudar, confirme primeiro os efeitos colaterais.

Caso 2: conferir uma animação de scroll local. Use gsap-scrolltrigger: ligação ao scroll, pinning, scrub, triggers, mais refresh e cleanup. Serve páginas que já têm disparos de scroll e querem verificar um refresh ou uma limpeza em falta. Inspecione primeiro e depois decida se muda ficheiros. A competência de timeline gsap-timeline está na sua própria linha no original (sequencing, position parameter, labels, nesting, playback); não a misture com ScrollTrigger.

Limites de uso

Instale competências com npx skills add https://github.com/greensock/gsap-skills . Instale a biblioteca GSAP a partir do pacote npm público gsap. Não as trate como o mesmo passo.

As linhas de competência nomeadas no original são só gsap-core, gsap-timeline, gsap-scrolltrigger. Não invente outros nomes.

GSAP e os antigos plugins Club já são grátis, incluindo uso comercial; a nota da aquisição:

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

Não instale como se fosse precisa autenticação ou uma origem privada. O texto oficial não escreve as linguagens como um conjunto exclusivo nem exige usar React, Vue ou Svelte ao mesmo tempo.