diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 0318095..4c58df2 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -9,7 +9,7 @@ "plugins": [ { "name": "gsap-skills", - "description": "Teach AI agents correct GSAP usage including tweens, timelines, ScrollTrigger, plugins, utilities, React hooks, and performance optimization", + "description": "Official GSAP skills for Cursor, Claude and other AI agents, covering tweens, timelines, ScrollTrigger, plugins, utilities, React hooks, and performance optimization", "author": { "name": "GreenSock" }, diff --git a/.cursor-plugin/plugin.json b/.cursor-plugin/plugin.json index 28470f1..12eb51b 100644 --- a/.cursor-plugin/plugin.json +++ b/.cursor-plugin/plugin.json @@ -11,14 +11,12 @@ "keywords": [ "gsap", "greensock", - "animation", + "javascript animation", "scrolltrigger", "timeline", "react animation", - "performance", - "tweens", - "plugins" + "web animation" ], - "logo": "./assets/gsap-icon-square.svg", + "logo": "./assets/gsap-icon-inverted.svg", "skills": ["skills"] } diff --git a/README.md b/README.md index 9d6dad0..d932425 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # gsap-skills -Official AI skills for GSAP. These skills teach AI coding agents how to correctly use the GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage. +Official AI skills for GSAP. These skills teach AI coding agents how to correctly use the GSAP (GreenSock Animation Platform), including best practices, common animation patterns, plugin usage, performance optimization, as well as usage in frameworks like React, Vue, and others. Skills follow the [Agent Skills](https://agentskills.io) format and work with the [skills](https://github.com/vercel-labs/skills) CLI (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, and others). diff --git a/assets/gsap-icon-inverted.svg b/assets/gsap-icon-inverted.svg new file mode 100644 index 0000000..1a94438 --- /dev/null +++ b/assets/gsap-icon-inverted.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/skills/gsap-core/SKILL.md b/skills/gsap-core/SKILL.md index 01e1b24..ae4f8b1 100644 --- a/skills/gsap-core/SKILL.md +++ b/skills/gsap-core/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-core -description: Use GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive/accessibility (prefers-reduced-motion). Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, basic animation, responsive animation, or reduced motion. GSAP is used by Webflow Interactions (Webflow acquired GSAP); Webflow outputs or runs GSAP under the hood — GSAP skills apply when debugging or customizing Webflow animations. +description: Official GSAP skills for using GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive/accessibility (prefers-reduced-motion). Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, basic animation, responsive animation, or reduced motion. GSAP can be used anywhere JavaScript runs, in any framework (React, Vue, Astro, etc.) or vanilla JS. GSAP powers Webflow Interactions; Webflow runs GSAP under the hood. license: MIT --- @@ -12,7 +12,7 @@ Apply when writing or reviewing GSAP animations that use the core engine: single **Related skills:** For sequencing multiple steps use **gsap-timeline**; for scroll-linked animation use **gsap-scrolltrigger**; for React use **gsap-react**; for plugins (Flip, Draggable, etc.) use **gsap-plugins**; for helpers (clamp, mapRange, etc.) use **gsap-utils**; for performance use **gsap-performance**. -**Context:** GSAP was acquired by Webflow and powers **Webflow Interactions**. Code generated or run by Webflow’s interaction system is GSAP-based; when users ask about Webflow animations or interactions not behaving as expected, GSAP docs and patterns (e.g. tweens, ScrollTrigger) are relevant for debugging or customizing. +**Context:** GSAP powers **Webflow Interactions**. Code generated or run by Webflow’s interaction system is GSAP-based; when users ask about Webflow animations or interactions not behaving as expected, GSAP docs and patterns (e.g. tweens, ScrollTrigger) are relevant for debugging or customizing. ## When to Use GSAP diff --git a/skills/gsap-frameworks/SKILL.md b/skills/gsap-frameworks/SKILL.md index 66d9287..30eb272 100644 --- a/skills/gsap-frameworks/SKILL.md +++ b/skills/gsap-frameworks/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-frameworks -description: Use GSAP correctly in Vue, Svelte, and other non-React frameworks — lifecycle (when to create/kill tweens and ScrollTriggers), scoping selectors, cleanup on unmount. Use when animating in Vue, Nuxt, Svelte, SvelteKit, or when the user asks about GSAP with Vue, Svelte, onMounted, onUnmounted, onMount, onDestroy. +description: Use GSAP correctly in Vue, Svelte, and other non-React frameworks — lifecycle (when to create/kill tweens and ScrollTriggers), scoping selectors, cleanup on unmount. Use when animating in Vue, Nuxt, Svelte, SvelteKit, or when the user asks about GSAP with Vue, Svelte, onMounted, onUnmounted, onMount, onDestroy. There is a separate dedicated gsap-react skill for using GSAP in React. license: MIT --- diff --git a/skills/gsap-performance/SKILL.md b/skills/gsap-performance/SKILL.md index cdf86c2..66b990d 100644 --- a/skills/gsap-performance/SKILL.md +++ b/skills/gsap-performance/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-performance -description: Animate efficiently with GSAP—prefer transforms, avoid layout thrashing, use will-change wisely, and batch updates. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. +description: Official GSAP skill for animating efficiently with GSAP - prefer transforms, avoid layout thrashing, use will-change wisely, and batch updates. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. license: MIT --- diff --git a/skills/gsap-plugins/SKILL.md b/skills/gsap-plugins/SKILL.md index 697b74e..e50e8f6 100644 --- a/skills/gsap-plugins/SKILL.md +++ b/skills/gsap-plugins/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-plugins -description: Use GSAP plugins correctly — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. +description: Official GSAP skill for using GSAP plugins correctly — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. license: MIT --- diff --git a/skills/gsap-react/SKILL.md b/skills/gsap-react/SKILL.md index 13cc1f1..a30ad26 100644 --- a/skills/gsap-react/SKILL.md +++ b/skills/gsap-react/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-react -description: Use GSAP correctly in React — useGSAP hook, refs, gsap.context(), and cleanup. Use when animating in React, Next.js, or when the user asks about GSAP with React, useGSAP, or cleanup on unmount. +description: Official GSAP skill for using GSAP correctly in React — useGSAP hook, refs, gsap.context(), and cleanup. Use when animating in React, Next.js, or when the user asks about GSAP with React, useGSAP, or cleanup on unmount. license: MIT --- diff --git a/skills/gsap-scrolltrigger/SKILL.md b/skills/gsap-scrolltrigger/SKILL.md index 387ca35..279af38 100644 --- a/skills/gsap-scrolltrigger/SKILL.md +++ b/skills/gsap-scrolltrigger/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-scrolltrigger -description: Use ScrollTrigger for scroll-linked animations, pinning, scrub, and triggers. Use when building scroll-based animations, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning with GSAP. +description: Official GSAP skill for using ScrollTrigger for scroll-linked animations, pinning, scrub, and triggers. Use when building scroll-based animations, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning with GSAP. license: MIT --- diff --git a/skills/gsap-timeline/SKILL.md b/skills/gsap-timeline/SKILL.md index 1f2c4e1..9c15bef 100644 --- a/skills/gsap-timeline/SKILL.md +++ b/skills/gsap-timeline/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-timeline -description: Create and control GSAP timelines — gsap.timeline(), position parameter, nesting, and playback controls. Use when sequencing multiple animations, choreographing keyframes, or when the user asks about GSAP timelines, sequencing, or animation order. +description: Official GSAP skill for creating and controlling GSAP timelines — gsap.timeline(), position parameter, nesting, and playback controls. Use when sequencing multiple animations, choreographing keyframes, or when the user asks about GSAP timelines, sequencing, or animation order. license: MIT --- diff --git a/skills/gsap-utils/SKILL.md b/skills/gsap-utils/SKILL.md index 3fd9bfe..1fce263 100644 --- a/skills/gsap-utils/SKILL.md +++ b/skills/gsap-utils/SKILL.md @@ -1,6 +1,6 @@ --- name: gsap-utils -description: Use gsap.utils for clamping, distribution, interpolation, mapping, random, snapping, arrays, and strings. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. +description: Official GSAP skill for using gsap.utils for clamping, distribution, interpolation, mapping, random, snapping, arrays, and strings. Use when the user asks about gsap.utils or utility functions, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. license: MIT ---