Install
npx skills add https://github.com/greensock/gsap-skillsPour qui
Pour qui veut qu'un assistant de code utilise GSAP (GreenSock Animation Platform) à la façon officielle. Libellé officiel : ce sont les compétences IA officielles GSAP qui enseignent le bon usage, couvrant l'API cœur, les timelines, ScrollTrigger, les plugins, ainsi que React, Vue, Svelte, le JS natif et les performances.
Mieux adapté : quelqu'un qui écrit déjà de l'animation et s'apprête à vérifier gsap.to() / from() / fromTo(), l'orchestration de timeline ou les déclencheurs de défilement. Ne traitez pas cet ensemble comme le runtime GSAP lui-même : la bibliothèque s'installe depuis le paquet npm public gsap. Officiel : GSAP est cent pour cent gratuit, plugins compris ; après le rachat par Webflow, les anciens plugins Club (SplitText, MorphSVG, etc.) sont gratuits pour tous, y compris en commercial. Pas d'adhésion Club, de .npmrc, de jeton d'auth ni de dépôt privé.
Avant de commencer, npx skills add doit pouvoir tourner en local. Ne réécrivez pas cette commande en un autre installateur non donné.
Premier essai en 3 minutes
Uniquement la commande d'installation du dépôt. Terminez d'abord l'installation des compétences, puis une vérification en lecture seule ; ne changez pas encore les fichiers du projet.
Préconditions : cet environnement peut exécuter npm/npx, et votre assistant peut charger les compétences nouvellement installées. Au premier essai, n'écrivez pas de code d'animation et ne connectez pas une source privée non documentée.
Emplacement : ajoutez les compétences dans le projet ou l'espace de travail avec la commande officielle.
npx skills add https://github.com/greensock/gsap-skills
Dépôt officiel :
https://github.com/greensock/gsap-skills
Page produit GSAP :
https://gsap.com/
Déclencheur à faible risque : après installation, faites seulement vérifier si un gsap.to() existant utilise easing, duration, stagger ou defaults mentionnés dans l'API cœur officielle. Ne le laissez pas d'abord changer les fichiers. Si l'étape suivante écrit du code timeline ou ScrollTrigger, confirmez quels fichiers changeront avant d'exécuter.
Signal de succès : l'assistant discute gsap.to() / from() / fromTo() au sens de gsap-core, sans inventer de noms de compétences absents. Quels assistants peuvent utiliser ce CLI est indiqué ici :
https://github.com/vercel-labs/skills#supported-agents
N'inférez pas d'une liste que « seuls ces assistants marchent ».
Cas d'usage
Cas 1 : vérifier une écriture d'animation cœur locale. Utilisez gsap-core : l'API cœur inclut gsap.to() / from() / fromTo(), plus easing, duration, stagger, defaults. Pour qui a déjà un tween et veut vérifier les paramètres. Les preuves s'arrêtent à ces sujets ; pas d'inventaire complet de fonctions. Vérification en lecture seule d'abord ; si le code change, confirmez d'abord les effets de bord.
Cas 2 : vérifier une animation de défilement locale. Utilisez gsap-scrolltrigger : liaison au défilement, pinning, scrub, triggers, plus refresh et cleanup. Pour les pages qui ont déjà des déclencheurs de défilement et veulent vérifier un refresh ou un nettoyage manquant. Inspectez d'abord, puis décidez de changer les fichiers. La compétence timeline gsap-timeline est sur sa propre ligne dans l'original (sequencing, position parameter, labels, nesting, playback) ; ne la fusionnez pas avec ScrollTrigger.
Limites d'usage
Installer les compétences avec npx skills add https://github.com/greensock/gsap-skills . Installer la bibliothèque GSAP depuis le paquet npm public gsap. Ne les traitez pas comme la même étape.
Les lignes de compétences nommées dans l'original sont seulement gsap-core, gsap-timeline, gsap-scrolltrigger. N'inventez pas d'autres noms.
GSAP et les anciens plugins Club sont désormais gratuits, commercial compris ; la note de rachat :
https://gsap.com/blog/webflow-GSAP/
N'installez pas comme si une auth ou une source privée était requise. Le texte officiel n'écrit pas les langages comme un ensemble exclusif et n'exige pas d'utiliser React, Vue ou Svelte en même temps.