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
79%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.claude/skills/animejs/SKILL.mdQuality
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'
| 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 |
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
| 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 |
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.
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 | |
c56cea5
Table of Contents
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.