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.

Quality

79%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Quality

Content

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

Dimension	Reasoning	Score
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

Description

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'

Dimension	Reasoning	Score
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

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1255 lines); consider splitting into references/ and linking	Warning

	Total	10 / 11 Passed

Repository: Frenzyritz13/ritvifyi
Commit: c56cea5

Reviewed: 3 months 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.