auto-animate
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag & drop conflicts, and CSS transform bugs. Use when: animating lists/accordions/toasts, troubleshooting SSR animation errors, React 19 StrictMode issues, or need accessible drop-in transitions with auto prefers-reduced-motion.
84
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
100%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 an excellent skill description that hits all the marks. It provides specific capabilities, comprehensive trigger terms across multiple frameworks, explicit 'Use when' guidance, and is highly distinctive due to its focus on a specific library and documented error scenarios. The technical specificity (3.28kb size, 15 documented errors) adds credibility without being verbose.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'animating lists/accordions/toasts', 'troubleshooting SSR animation errors', 'React 19 StrictMode issues', and mentions specific technical details like '15 documented errors', 'CSS transform bugs', 'drag & drop conflicts'. | 3 / 3 |
Completeness | Clearly answers both what (zero-config animations, prevents documented errors) AND when with explicit 'Use when:' clause covering specific scenarios like 'animating lists/accordions/toasts', 'troubleshooting SSR animation errors', 'React 19 StrictMode issues'. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'React', 'Vue', 'Solid', 'Svelte', 'Preact', 'animations', 'lists', 'accordions', 'toasts', 'SSR', 'StrictMode', 'drag & drop', 'prefers-reduced-motion', and the specific library name '@formkit/auto-animate'. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche: specifically targets @formkit/auto-animate library, mentions exact frameworks supported, and unique error scenarios (React 19 StrictMode bugs, SSR imports). Unlikely to conflict with general animation or React skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong error-prevention skill with excellent actionable code examples and good progressive disclosure. The comprehensive issue catalog provides real value, though it could be more concise by reducing repetitive 'Why It Happens' explanations. Adding a diagnostic workflow or decision tree would help Claude quickly identify which of the 15 issues applies to a given situation.
Suggestions
Add a diagnostic flowchart or decision tree at the top to help quickly identify which issue applies based on symptoms (e.g., 'Animation not working? → Is parent conditional? → Issue #2')
Condense the 'Why It Happens' explanations - Claude can infer most of these from the error and prevention pattern
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some redundancy (e.g., 'Why It Happens' explanations for each issue that Claude could infer, repeated accessibility warnings). The 15-issue catalog is valuable but could be more condensed with less repetitive structure. | 2 / 3 |
Actionability | Excellent executable code examples throughout - SSR-safe patterns, React/Vue patterns for conditional rendering, flexbox fixes, drag & drop workarounds, and test mocking are all copy-paste ready with clear before/after comparisons. | 3 / 3 |
Workflow Clarity | Individual issue fixes are clear, but there's no overall workflow for diagnosing which issue applies. The 'Critical Rules' section provides good checklists, but lacks a decision tree or diagnostic sequence for troubleshooting animation problems. | 2 / 3 |
Progressive Disclosure | Well-structured with clear sections, references to external templates/ and references/ directories, and appropriate use of collapsible-style organization. The main content serves as an overview with pointers to detailed resources. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
75%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 12 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 12 / 16 Passed | |
- 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.