motion
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
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 a well-crafted skill description that clearly identifies the specific library, lists concrete animation capabilities, and provides explicit trigger conditions including both feature requests and error scenarios. The description uses proper third-person voice and includes both the old (Framer Motion) and new (Motion) library names for discoverability.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'drag-and-drop, scroll animations, gestures, SVG morphing' and specific technical scenarios like 'bundle size, complex transitions, spring physics errors'. | 3 / 3 |
Completeness | Clearly answers both what ('Motion (Framer Motion) React animation library') and when ('Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'drag-and-drop', 'scroll animations', 'gestures', 'SVG morphing', 'spring physics', plus the library names 'Motion' and 'Framer Motion' that users would reference directly. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with specific library name (Framer Motion/Motion), React context, and unique triggers like 'SVG morphing' and 'spring physics errors' that wouldn't overlap with generic animation or UI 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 well-structured skill with excellent actionability and progressive disclosure. The code examples are production-ready and the reference loading guidance is particularly well done. However, the content could be more concise by removing marketing language and redundant explanations, and would benefit from explicit troubleshooting workflows with validation steps for debugging animation issues.
Suggestions
Remove marketing-style content (star counts, 'industry-standard' claims, token efficiency metrics) that don't provide instructional value
Consolidate the AnimatePresence rules - they appear in Core Concepts, Common Mistakes, and Known Issues sections
Add a troubleshooting workflow with explicit validation steps: 1. Check console errors → 2. Verify AnimatePresence mounting → 3. Check key props → 4. Test with reduced motion disabled
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | While the skill is well-organized and avoids explaining basic concepts, it includes some redundancy (e.g., repeating AnimatePresence rules multiple times, verbose 'When to Use' section with obvious cases). The metrics section at the end and some marketing-style language ('industry-standard', '30,200+ stars') add tokens without instructional value. | 2 / 3 |
Actionability | Excellent executable code examples throughout - all snippets are copy-paste ready with proper imports. Installation commands are specific, common patterns show complete implementations, and the Known Issues section provides concrete before/after code fixes. | 3 / 3 |
Workflow Clarity | The skill covers many features but lacks explicit validation checkpoints for complex operations. The 'When to Load References' section provides good decision guidance, but there's no clear workflow for debugging animation issues or step-by-step troubleshooting process with verification steps. | 2 / 3 |
Progressive Disclosure | Excellent structure with clear overview in main file and well-signaled one-level-deep references. The 'When to Load References' section explicitly tells Claude when to load each reference file, and templates/scripts are appropriately separated with clear descriptions. | 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 |
|---|---|---|
skill_md_line_count | SKILL.md is long (514 lines); consider splitting into references/ and linking | Warning |
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
body_output_format | No obvious output/return/format terms detected; consider specifying expected outputs | 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.