CtrlK
BlogDocsLog inGet started
Tessl Logo

animejs

Animate elements using Anime.js. USE WHEN user asks about animations, transitions, motion effects, or interactive UI movement. TRIGGER WORDS: animate, animation, transition, motion, keyframe, timeline, stagger, tween, fade, slide, bounce, spring, easing, scroll animation, draggable, SVG animation, path drawing, morphing, entrance animation, page transition, loading spinner, hover effect.

83

Quality

79%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.claude/skills/animejs/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

82%

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

This is a solid skill description with excellent trigger term coverage and clear 'use when' guidance. The main weakness is the lack of specific concrete actions beyond the generic 'animate elements' - listing capabilities like timeline creation, SVG morphing, or stagger effects would strengthen specificity. There's also moderate conflict risk with other animation-related skills.

Suggestions

Expand the capability statement to list specific actions: 'Create timeline sequences, stagger element animations, morph SVG paths, build spring-based physics animations using Anime.js'

Add distinguishing context to reduce conflict with other animation tools: 'Use when user specifically mentions Anime.js OR needs lightweight JavaScript animations without React/Vue dependencies'

DimensionReasoningScore

Specificity

Names the domain (Anime.js animations) and implies actions like animating elements, but doesn't list multiple specific concrete actions like 'create timeline sequences, stagger element animations, morph SVG paths'.

2 / 3

Completeness

Clearly answers both what ('Animate elements using Anime.js') and when ('USE WHEN user asks about animations, transitions, motion effects, or interactive UI movement') with explicit trigger guidance and comprehensive trigger words.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say including 'animate', 'animation', 'transition', 'fade', 'slide', 'bounce', 'hover effect', 'loading spinner', and many more variations that match real user vocabulary.

3 / 3

Distinctiveness Conflict Risk

While it specifies Anime.js, the broad trigger words like 'animation', 'transition', 'hover effect' could overlap with CSS animation skills or other animation libraries (GSAP, Framer Motion). The Anime.js specificity helps but isn't strongly emphasized in triggers.

2 / 3

Total

10

/

12

Passed

Implementation

77%

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

This is a highly actionable and comprehensive Anime.js reference with excellent executable examples and clear workflow guidance for complex scenarios like React integration and SSR. The main weaknesses are its length (could benefit from splitting advanced topics into separate files) and some verbosity in migration tables and exhaustive listings that could be condensed.

Suggestions

Split advanced topics (SVG animations, Draggable, Engine config, full utility reference) into separate linked files to reduce main skill length

Condense the v3→v4 migration table to only the most critical differences, moving the full table to a MIGRATION.md reference

Add a brief 'Quick Start' section at the top with the 3 most common patterns before diving into comprehensive API coverage

DimensionReasoningScore

Conciseness

The skill is comprehensive but includes some redundancy (v3/v4 migration table is extensive, multiple similar examples). While most content is useful, the sheer length (~1000+ lines) could be trimmed—some sections like the full easing list and utility functions could be condensed or moved to reference files.

2 / 3

Actionability

Excellent actionability with fully executable code examples throughout. Every pattern includes copy-paste ready code, from basic animate() calls to complex React/Next.js patterns. The examples are complete and immediately usable.

3 / 3

Workflow Clarity

Clear workflows for complex operations like React cleanup (always return revert()), SSR handling (three distinct patterns with clear guidance), and scope management. The 'Common Gotchas' section explicitly addresses validation and error prevention.

3 / 3

Progressive Disclosure

Content is well-organized with clear section headers, but everything is in one monolithic file. Advanced topics (SVG morphing, draggable, engine configuration) could be split into separate reference files. The skill would benefit from a quick-start section pointing to detailed docs.

2 / 3

Total

10

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (1255 lines); consider splitting into references/ and linking

Warning

Total

10

/

11

Passed

Repository
Frenzyritz13/ritvifyi
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.