Gsap Frameworks Skill Security Audit
What the author says it does (original text)
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.
No obvious risks found in this check
- Files checked
- 1
- Risks found
- 0
Inside this skill
This Skill is a GSAP coding guide for Vue, Nuxt, and Svelte. It directs the agent to create animations after mounting and revert their context on unmount so animations do not continue operating on detached DOM nodes.
View source
- **Create** tweens and ScrollTriggers **after** the component’s DOM is available (e.g. onMounted, onMount).- **Kill or revert** them in the **unmount** (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks.- **Scope selectors** to the component root so `.box` and similar only match elements inside that component, not the rest of the page.The examples scope selectors to a component container and explicitly warn that unscoped selectors could affect other components or the rest of the page.
View source
## Scoping SelectorsDo not use global selectors that can match elements outside the current component. Always pass the **scope** (container element or ref) as the second argument to **gsap.context(callback, scope)** so that any selector run inside the callback is limited to that subtree.- ✅ **gsap.context(() => { gsap.to(".box", ...) }, containerRef)** — `.box` is only searched inside `containerRef`.- ❌ Running **gsap.to(".box", ...)** without a context scope in a component can affect other instances or the rest of the page.The Nuxt example can dynamically load a caller-selected GSAP plugin from a fixed mapping and register it with the current GSAP instance. The shown code contains no arbitrary URL, upload logic, or credential access.
View source
*/ async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> { const loader = pluginMap[plugin]; const m = await loader(); const p = (m as any)[plugin]; gsap.registerPlugin(p); return p; }Files and check records1 files
Coverage and gaps
Content covered in each file
These are the source ranges included in this check, not a guarantee that every issue has been resolved.
SKILL.mdFull text included
This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.
SKILL.mdInstructions
- Lines read
- 267
- File checksum (to compare versions)
- 0e02e91f3fddcfe3e0f9560ea228770f89d3bb189de9aed790b4e6e172d0a941