gsap-frameworks

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.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

77%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable with executable patterns and a clear lifecycle workflow, but it is verbose in places and references example directories that do not exist in the bundle.

Suggestions

Remove one of the two near-identical Vue examples (Composition API vs script setup) or collapse them into a single example with a note on the difference, to recover tokens.

Move the large Nuxt plugin-registry composable into a separate reference file and link to it, or trim the PLUGINS/pluginMap list to the plugins actually demonstrated.

Either provide the referenced examples/vue/ and examples/nuxt/ runnable projects, or drop those 'See ...' pointers so navigation targets resolve to real files.

Dimension	Reasoning	Score
Conciseness	Mostly actionable code, but the near-duplicate Vue Composition-API and script-setup blocks plus the exhaustive 24-entry Nuxt plugin registry inflate the token budget and could be tightened; not a score of 3 because not every token earns its place, not a 1 because no basic-concept padding.	2 / 3
Actionability	Provides fully executable, copy-paste-ready code for Vue (both APIs), a typed Nuxt composable, and Svelte, with concrete gsap.context/revert patterns; matches the copy-paste-ready anchor.	3 / 3
Workflow Clarity	The create-on-mounted / revert-on-unmount lifecycle is clearly sequenced with a 'When to Create vs Kill' table and explicit ScrollTrigger.refresh() guidance; the skill is not a destructive/batch operation so the missing-validation cap does not apply.	3 / 3
Progressive Disclosure	Sections are well organized, but the body references runnable projects ('See examples/vue/', 'See examples/nuxt/') that are not present in the bundle, and the large Nuxt composable is inline content that reads like it belongs in a separate reference; not a 3 because navigation targets are not real and not all split-out content is signaled.	2 / 3
	Total	10 / 12 Passed

Description

100%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific, trigger-rich, and clearly distinguishes this skill from the React variant. It cleanly answers both what the skill does and when to invoke it in third person.

Dimension	Reasoning	Score
Specificity	Names multiple concrete capabilities — 'lifecycle, scoping selectors, cleanup on unmount' — rather than vague language, matching the anchor that lists several specific actions.	3 / 3
Completeness	Explicitly answers both 'what' (lifecycle/scoping/cleanup) and 'when' via the 'Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit...' trigger clause.	3 / 3
Trigger Term Quality	Covers natural terms a user would say — 'Vue, Nuxt, Svelte, SvelteKit, GSAP with Vue/Svelte, onMounted, onMount, onDestroy' — giving good breadth of common variations.	3 / 3
Distinctiveness Conflict Risk	Clear non-React-framework niche with explicit routing ('For React use gsap-react'), making conflicts with sibling GSAP skills unlikely.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: greensock/gsap-skills
Path: skills/gsap-frameworks/SKILL.md
Commit: aed9cfd

Reviewed: ~1 month ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.