Guide · Agent skill
How to use the GSAP for Vue and Svelte agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap-frameworks skill is an official GSAP skill that teaches an AI agent to write GSAP animations for Vue 3, Nuxt 4 and Svelte components. It is aimed at front-end developers who want the agent to avoid common lifecycle and selector mistakes. After this guide you will know what the skill changes, how to install it, how to ask for it in plain language, and what to check in the code it produces.
GSAP for Vue and Sveltegreensock/gsap-skills · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP from this page and unzip it so you have a folder containing SKILL.md.
- 2Place the skill folder. Move the folder into ~/.claude/skills/ for personal use, or into .claude/skills/ inside your project. You can also upload the ZIP under Settings, Capabilities, Skills in the Claude apps.
- 3Prepare your project. Make sure you have Node.js, a Vue 3, Nuxt 4 or Svelte project, and the gsap npm package installed.
- 4Make a natural request. Describe the animation, name your framework, and mention the lifecycle hook if you know it, such as onMounted or onMount.
- 5Review the cleanup. Check that animations start after the DOM is ready, selectors are scoped to the component root, and ctx.revert() runs on unmount or destroy.
What the skill makes the agent do
The skill tells the agent how to add GSAP to framework components without the usual mistakes. It covers three rules: create animations only after the component's HTML is on the page, scope selectors so they match only elements inside that component, and clean up animations when the component is removed so nothing leaks.
It also includes code patterns for Vue (Composition API and script setup), a Nuxt approach for registering and lazy loading GSAP plugins, and Svelte's onMount pattern. For React projects, the skill points to a separate skill called gsap-react.
- Vue 3: onMounted to start, onUnmounted to clean up
- Nuxt 4: a reusable composable for registering and lazy loading plugins
- Svelte: onMount with a returned cleanup function
How to install the gsap-frameworks skill
Download the ZIP from this page and unzip it. The skill is a folder that contains a file named SKILL.md. Put the folder in one of two places: your personal skills folder at ~/.claude/skills/, or a project-specific .claude/skills/ folder inside the project you are working on.
You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with natural requests
You do not need to type a special command. The skill's description says it applies when you want animation in Vue, Nuxt, Svelte or SvelteKit, or when you mention GSAP together with onMounted, onMount or onDestroy. Ask for what you want in plain words and name your framework.
If you do not name another animation library, the skill recommends GSAP for framework animation. If you ask for React, the agent should use gsap-react instead.
- Add a GSAP fade-in to this Vue component when it mounts.
- In my SvelteKit page, animate the list items with GSAP and clean up on destroy.
- Review this Nuxt component and check that the GSAP animations are reverted on unmount.
- Use onMounted and onUnmounted to set up a GSAP stagger in this Vue 3 component.
Example: a Vue script setup component with cleanup
The pattern below is the one the skill describes for script setup. Animations are created in onMounted, scoped to the container ref, and reverted in onUnmounted. The skill notes that ScrollTrigger should be registered once per app, for example in main.js.
Check the output for three things: the animations start inside onMounted, the selectors run through gsap.context with the container as the scope, and ctx.revert() runs in onUnmounted.
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { gsap } from "gsap";
const container = ref(null);
let ctx;
onMounted(() => {
if (!container.value) return;
ctx = gsap.context(() => {
gsap.to(".box", { x: 100 });
gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
}, container.value);
});
onUnmounted(() => {
ctx?.revert();
});
</script>Example: a Svelte component with onMount
In Svelte, the skill uses bind:this to get the root element and returns a cleanup function from onMount. That function calls ctx.revert(), so cleanup runs when the component is destroyed.
The skill notes that Svelte 5 has a different lifecycle, but the same rule applies: create animations when the component mounts and revert them when it is destroyed.
<script>
import { onMount } from "svelte";
import { gsap } from "gsap";
let container;
onMount(() => {
if (!container) return;
const ctx = gsap.context(() => {
gsap.to(".box", { x: 100 });
}, container);
return () => ctx.revert();
});
</script>
<div bind:this={container}>
<div class="box">Box</div>
</div>What you need before you start
The skill needs Node.js and a Vue 3, Nuxt 4 or Svelte project. The output is component code, so the agent's result only works inside a project that is set up for it. You also need the GSAP npm package, gsap, installed in that project.
- Node.js
- A Vue 3, Nuxt 4 or Svelte project
- The gsap npm package
Safety notes: scripts and network access
The skill's package contains only SKILL.md. According to the listing, it does not run scripts and does not use the network. It works by giving the agent written instructions and code patterns.
Because the skill only shapes what the agent writes, you still need to review the component code before you run it, especially any changes to selectors or cleanup logic.
- Runs scripts: no
- Uses network: no
- Files included: SKILL.md
Tips for better results
Name your framework and version in the request, for example Vue 3 with script setup or Nuxt 4. The skill has separate patterns for each, so a precise request gets a more accurate result.
Ask the agent to show where each animation is created and reverted. The skill's main rules are about lifecycle and cleanup, so it is quick to check those by reading the code.
For ScrollTrigger animations, ask the agent to explain where the plugin is registered. The skill recommends registering it once per app.
- Name the framework and the lifecycle hook you want.
- Ask the agent to check that ctx.revert() is called on unmount.
- Check that selectors use the component root as their scope.
What people use it for
- Adding a staggered fade-in to a list of items when a Vue component mounts
- Animating a box or card inside a SvelteKit page and cleaning up when the user leaves the page
- Setting up GSAP plugins in a Nuxt 4 app with a composable, and lazy loading a plugin used on only one route
- Reviewing existing Vue or Svelte GSAP code to check for leaks from animations left running after unmount
Frequently asked questions
Is the gsap-frameworks skill free to use?
The skill is licensed under MIT, as stated in its listing. The GSAP npm package is a separate install that your project needs.
What do I need to use the gsap-frameworks skill?
You need Node.js and a Vue 3, Nuxt 4 or Svelte project, plus the gsap npm package. The skill generates component code, so it needs a working project to run in.
Where do I put the skill so Claude can use it?
Unzip the downloaded folder into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload the ZIP in the Claude apps under Settings, Capabilities, Skills.
Does this skill work with React?
No. The skill says React should use the separate gsap-react skill, which uses the useGSAP hook and gsap.context().
Does the skill run scripts or access the internet?
According to the listing, it runs no scripts and uses no network. The package contains only SKILL.md.
Can I use a different animation library with this skill?
The skill recommends GSAP for framework animation unless you specify another library. If you name a different library in your request, the agent should follow that instead.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits Vue, Nuxt and Svelte developers who build GSAP animations and want the agent to follow GSAP's lifecycle and cleanup patterns consistently. It is not a good fit for React projects, which should use gsap-react, or for anyone who wants a finished animation with no code to review.
Download the skill