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.
85
78%
Does it follow best practices?
Impact
100%
1.33xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/motion/skills/motion/SKILL.mdQuality
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 strong, well-crafted description that concisely identifies the specific library, lists concrete capabilities, and provides explicit trigger conditions including both feature requests and error scenarios. It uses proper third-person voice and covers both common use cases and debugging scenarios, making it highly effective for skill selection.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and use cases: drag-and-drop, scroll animations, gestures, SVG morphing, and specific problem domains like bundle size and 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'). The 'Use for...' clause serves as an explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'drag-and-drop', 'scroll animations', 'gestures', 'SVG morphing', 'spring physics', 'bundle size', 'Framer Motion', 'Motion', 'React animation'. These cover both the library names and common animation-related terms. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive by naming the specific library (Motion/Framer Motion) and its unique capabilities like SVG morphing and spring physics. Unlikely to conflict with generic CSS animation or other animation library skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides excellent actionability with complete, executable code examples and outstanding progressive disclosure with well-signaled references. However, it is significantly bloated with marketing copy, redundant explanations (AnimatePresence rules repeated twice), unnecessary sections (Contributing, Token Efficiency Metrics, badge-like footer), and verbose 'when to use' guidance that Claude can infer. The content could be cut by 40-50% without losing any actionable information.
Suggestions
Remove marketing/promotional content: GitHub star counts, 'industry-standard' claims, 'Token Efficiency Metrics', 'Contributing' section, and the badge-like footer repeating stats already mentioned above.
Consolidate the AnimatePresence explanation — it appears in Core Concepts section 3 AND Known Issues section 1 with nearly identical content. Keep only one instance.
Cut the 'When to Use This Skill' section significantly — Claude can determine when to use an animation library. Replace with a 2-line note about when NOT to use it (simple lists → auto-animate, 3D → Three.js).
Remove the package version table with specific dates — this is time-sensitive information that will become stale and wastes tokens. A single line noting the import path (`motion/react`) is sufficient.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at 400+ lines. Includes unnecessary marketing language ('industry-standard', '30,200+ GitHub stars', 'Production Tested'), redundant sections (the same AnimatePresence mistake is explained twice), a 'Token Efficiency Metrics' section, 'Contributing' section, repeated package version tables, and extensive 'When to Use' / 'Don't Use' lists that Claude can infer. The overview section explains capabilities Claude already knows about. | 1 / 3 |
Actionability | Provides fully executable, copy-paste ready code examples throughout — motion components, AnimatePresence, layout animations, scroll animations, gestures, spring physics, LazyMotion optimization, and accessibility patterns. All imports are correct (`motion/react`) and examples are complete TSX. | 3 / 3 |
Workflow Clarity | The skill covers many features but lacks clear multi-step workflows with validation checkpoints. The 'Known Issues & Solutions' section provides good troubleshooting patterns, but there's no sequenced workflow for common tasks like 'adding animations to an existing component' or 'optimizing bundle size step-by-step with verification'. The installation section is straightforward but the overall structure is more of a reference catalog than a guided workflow. | 2 / 3 |
Progressive Disclosure | Excellent progressive disclosure with clear one-level-deep references to specific files (references/core-concepts-deep-dive.md, references/performance-optimization.md, etc.). The 'When to Load References' section provides explicit trigger conditions for loading each reference file. Templates and scripts are clearly signaled with brief descriptions. | 3 / 3 |
Total | 9 / 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 (514 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- secondsky/claude-skills
- Commit
88da5ff
- 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.