CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nanime

Build animations in a Nuxt app with nanime, the Nuxt module wrapping Anime.js v4. Use when animating elements, text, SVG or scroll in Nuxt: useAnimate, useWaapiAnimate, useAnimatable, useAnimeTimeline, useDraggable, useSplitText, useScrambleText, useAnimeScroll, useAnimeLayout, <AnimeTransition>, <AnimeTransitionGroup>, <AnimeLayoutGroup>, transition styles, component defaults, provideAnimeDefaults and the #nanime/* aliases. Also use when an effect seems to need raw animejs, GSAP or CSS transition classes. Most mistakes here do not throw; they animate the wrong thing.

Quality

92%

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

93%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.

Excellent content: lean, nanime-specific rules with executable correct/wrong code pairs, a clear tool-selection table, and well-signaled one-level-deep references that all exist. The only structural limit is that, as a lookup-style reference skill, it has no multi-step workflow with explicit validation checkpoints (beyond the verifying.md pointer), capping workflow clarity at 4.

DimensionReasoningScore

Conciseness

The body is dense and every section adds nanime-specific knowledge Claude cannot know elsewhere (e.g. 'A template ref is null during setup... Anime.js does not unwrap Vue refs inside parameters', 'One scroll observer drives one animation'). No time is spent explaining Vue, Nuxt, or what animation is; every token earns its place.

5 / 5

Actionability

Every rule ships executable, copy-paste-ready TypeScript/Vue with imports shown (e.g. the `animate` from `#nanime/utils` handler pattern with `onScopeDispose`), and the rules are framed as correct-vs-silently-wrong pairs (`useAnimeScroll(() => ({...}))` vs `useAnimeScroll({ target: section.value })`). Common cases are covered concretely.

5 / 5

Workflow Clarity

The 'Pick the tool' table gives an unambiguous decision path from task to composable to detail file, and 'verifying.md' is wired in as an explicit validation path ('Testing an animation without a browser'). It is a reference/rules skill rather than a linear multi-step process, so there is no sequenced workflow with error-recovery checkpoints to match the 5 anchor — the structure is clear but purely lookup-based.

4 / 5

Progressive Disclosure

The body is a lean overview: a tool-selection table with clearly signaled links to five real one-level-deep reference files (timelines.md, lists.md, transitions.md, layout.md, verifying.md — all present in references/), an aliases table, and short load-bearing rules. The reference files cross-link only laterally to siblings, never deeper, and detail is appropriately deferred.

5 / 5

Total

19

/

20

Passed

Description

87%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.

A strong description: explicit what and when, concrete trigger phrases, good natural-language coverage, and clever escape-hatch triggers that redirect GSAP/animejs/CSS-transition requests to this skill. The only gap is that capability listing leans on API names rather than plain-language actions.

DimensionReasoningScore

Specificity

The description names the domain ('Build animations in a Nuxt app with nanime, the Nuxt module wrapping Anime.js v4') and enumerates specific capabilities ('animating elements, text, SVG or scroll', the full composable and component list). It falls just short of the 5 anchor because the listed items are API names rather than user-facing concrete actions, though coverage of the module surface is comprehensive.

4 / 5

Completeness

Both halves are explicit: the what ('Build animations in a Nuxt app with nanime, the Nuxt module wrapping Anime.js v4') and an explicit 'Use when' clause with concrete trigger phrases ('Use when animating elements, text, SVG or scroll in Nuxt' plus the GSAP/animejs/CSS-transition redirect). This matches the 5 anchor's pattern of what + when with concrete triggers.

5 / 5

Trigger Term Quality

Natural trigger phrasing is present ('animating elements, text, SVG or scroll', 'transition styles') and it captures synonyms and escape hatches users would actually say ('raw animejs, GSAP or CSS transition classes'). A few common natural terms are missing (e.g. 'drag', 'fade/crossfade', 'hover', 'timeline' as plain words), which keeps it below the comprehensive-coverage 5 anchor.

4 / 5

Distinctiveness Conflict Risk

It carves a clear niche (Nuxt + Anime.js v4 via nanime) and the closing lines actively claim adjacent territories ('an effect seems to need raw animejs, GSAP or CSS transition classes') so the right skill triggers even when the user names a competitor library. Minimal conflict risk.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

onmax/nuxt-skills

Path

skills/nanime/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.