Install
npx skills add https://github.com/greensock/gsap-skillsFür wen
Für alle, die einen Coding-Assistenten GSAP (GreenSock Animation Platform) offiziell nutzen lassen wollen. Offiziell: Das sind die formellen GSAP-KI-Skills, die korrekte Nutzung lehren — Kern-API, Timelines, ScrollTrigger, Plugins, plus React, Vue, Svelte, natives JS und Performance.
Besser geeignet ist, wer schon Animation schreibt und prüfen will, ob gsap.to() / from() / fromTo(), Timeline-Regie oder Scroll-Trigger stimmen. Dieses Skill-Set nicht als GSAP-Laufzeit selbst behandeln: Die Animationsbibliothek kommt aus dem öffentlichen gsap-npm-Paket. Offiziell: GSAP ist zu 100 Prozent frei, inklusive aller Plugins; nach der Webflow-Übernahme sind frühere Club-Plugins (etwa SplitText, MorphSVG) für alle frei, auch kommerziell. Keine Club-Mitgliedschaft, kein .npmrc, kein Auth-Token, kein privates Registry.
Vor dem Start muss npx skills add lokal laufen. Diesen Befehl nicht in einen nicht genannten anderen Installer umschreiben.
Erster Versuch in 3 Minuten
Nur den einen Installationsbefehl aus dem Repository. Zuerst Skills installieren, dann den Assistenten nur lesen lassen; Projektdateien noch nicht ändern.
Voraussetzungen: Diese Umgebung kann npm/npx ausführen, und der Assistent kann neu installierte Skills laden. Beim ersten Versuch keine Animationscodes schreiben und keine undokumentierte private Quelle verbinden.
Installationsort: Skills im Projekt oder Workspace per offiziellem Befehl hinzufügen.
npx skills add https://github.com/greensock/gsap-skills
Offizielles Repository:
https://github.com/greensock/gsap-skills
GSAP-Produktseite:
https://gsap.com/
Risikoarmer Auslöser: Nach der Installation den Assistenten nur prüfen lassen, ob ein vorhandenes gsap.to() easing, duration, stagger oder defaults aus der offiziellen Kern-API nutzt. Dateien nicht zuerst ändern lassen. Soll als Nächstes Timeline- oder ScrollTrigger-Code geschrieben werden, vorher klären, welche Dateien sich ändern.
Erfolgssignal: Der Assistent spricht über gsap.to() / from() / fromTo() im Ton von gsap-core und erfindet keine ungeschriebenen Skill-Namen. Welche Assistenten diese CLI nutzen können, zeigt offiziell:
https://github.com/vercel-labs/skills#supported-agents
Aus einer Namensliste nicht folgern, „nur diese Assistenten gehen.“
Anwendungsfälle
Fall 1: Lokale Kern-Animationsschreibweise prüfen. gsap-core nutzen: Kern-API umfasst gsap.to() / from() / fromTo() sowie easing, duration, stagger, defaults. Für alle, die schon einen Tween haben und Parameter prüfen wollen. Evidenz reicht nur bis diese Themen; keine volle Funktionsliste. Zuerst nur lesen; bei Codeänderung Nebenwirkungen zuerst klären.
Fall 2: Lokale Scroll-Animation prüfen. gsap-scrolltrigger nutzen: Scroll-Kopplung, pinning, scrub, triggers sowie refresh und cleanup. Für Seiten mit vorhandenen Scroll-Triggern, die Refresh oder Aufräumen prüfen wollen. Ebenso zuerst prüfen, dann Dateien ändern oder nicht. Der Timeline-Skill gsap-timeline steht im Original in einer eigenen Zeile (sequencing, position parameter, labels, nesting, playback); nicht mit ScrollTrigger zu einem Skill vermengen.
Nutzungsgrenzen
Skills installieren mit npx skills add https://github.com/greensock/gsap-skills . Die GSAP-Bibliothek aus dem öffentlichen gsap-npm-Paket. Nicht als denselben Schritt behandeln.
Im Original genannte Skill-Zeilen sind nur gsap-core, gsap-timeline, gsap-scrolltrigger. Andere Skill-Namen nicht ergänzen.
GSAP und frühere Club-Plugins sind jetzt frei, inklusive kommerziell; Übernahmehinweis:
https://gsap.com/blog/webflow-GSAP/
Nicht so installieren, als wären Auth oder eine private Quelle nötig. Offiziell sind die Sprachen kein exklusiver Kreis, und React, Vue oder Svelte müssen nicht gleichzeitig genutzt werden.