CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

68

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

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

A highly actionable, well-structured reference: executable code for every covered framework, a crisp create/scope/cleanup workflow, and explicit anti-patterns. The main weakness is token efficiency — the giant inline Nuxt pluginMap and the near-duplicate Vue script-setup example inflate the body without adding proportional guidance.

Suggestions

Move the Nuxt useGSAP composable (especially the 24-entry pluginMap) into a references file (e.g. references/nuxt-composable.md) and keep a 5-10 line usage snippet inline in SKILL.md, cutting roughly 60 lines from the body.

Collapse the "Vue 3 (Composition API)" and "Vue 3 (script setup)" sections into one example — the second is a near-duplicate of the first — noting the one-line difference between the two syntaxes.

Trim the pluginMap to the handful of commonly used plugins and state the pattern ("map name → dynamic import") once; Claude can extend the list as needed.

DimensionReasoningScore

Conciseness

The body is mostly tight (✅/❌ bullets, lifecycle table, focused snippets), but the Nuxt section inlines a ~65-line pluginMap enumerating 24 dynamic-import entries Claude could generate itself, and the "Vue 3 (script setup)" section largely duplicates the preceding Options-API example. The padding is concentrated rather than pervasive, keeping this above a 2.

3 / 5

Actionability

Fully executable, copy-paste-ready code for Vue 3 (both Options API and script setup), a typed Nuxt useGSAP composable with lazy plugin loading, and Svelte's onMount cleanup-return pattern, reinforced by a lifecycle action table and an explicit "Do Not" list covering the common cases.

5 / 5

Workflow Clarity

The core pattern is sequenced unambiguously — register plugins once at app level, create tweens/ScrollTriggers inside gsap.context(scope) in onMounted/onMount, ctx.revert() on unmount — and is reinforced by the "When to Create vs Kill" table, the "Do Not" checklist, and ScrollTrigger.refresh() timing guidance. No destructive or batch operations exist that would require validation loops.

5 / 5

Progressive Disclosure

Well-organized sections with clearly signaled, one-level-deep external pointers to runnable upstream examples pinned to a commit hash. No bundle files exist to score against; the score sits below 5 because the ~75-line Nuxt composable (mostly the pluginMap) is inline content that would fit better in a separate reference file.

4 / 5

Total

17

/

20

Passed

Description

83%Weight 40%Scale 1-5

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 a strong, explicit statement of both what the skill does and when to use it, with concrete lifecycle-API trigger terms and clear routing away from the React-specific skill. Its only gaps are slightly broader capability enumeration and a few missing natural trigger synonyms.

DimensionReasoningScore

Specificity

Names three concrete capability areas — "lifecycle, scoping selectors, cleanup on unmount" — plus framework routing, but stops short of the comprehensive action list (plugin registration, lazy loading, ScrollTrigger refresh timing) that the body actually covers.

4 / 5

Completeness

Explicitly answers both: what ("lifecycle, scoping selectors, cleanup on unmount" for Vue/Svelte/non-React frameworks) and when ("Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy") with concrete trigger phrases, plus routing guidance ("For React use gsap-react").

5 / 5

Trigger Term Quality

Strong natural keyword coverage: "animation in Vue, Nuxt, Svelte, SvelteKit", "GSAP with Vue/Svelte, onMounted, onMount, onDestroy" — including lifecycle API names users would actually say. A few natural terms are missing (e.g., "animation library", "tween", other framework names).

4 / 5

Distinctiveness Conflict Risk

Clear niche (GSAP in non-React frameworks) with explicit React deflection ("For React use gsap-react"), but the broad term "animation" and closely related sibling skills (gsap-core, gsap-timeline, gsap-scrolltrigger) leave minor overlap risk.

4 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

nexu-io/open-design

Path

skills/gsap-frameworks/SKILL.md

Reviewed

Table of Contents

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.