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.
63
75%
Does it follow best practices?
Impact
—
No eval scenarios have been run
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, concise description that identifies the specific library, lists concrete capabilities, and provides explicit trigger conditions including both feature requests and error scenarios. It uses third person voice appropriately and covers a good range of natural keywords users would use when needing this skill.
| 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'). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'drag-and-drop', 'scroll animations', 'gestures', 'SVG morphing', 'spring physics', 'Framer Motion', 'Motion', 'bundle size'. These cover common variations of what users would search for. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to a specific library (Motion/Framer Motion) with distinct triggers like 'SVG morphing', 'spring physics', and 'Framer Motion' that are unlikely to conflict with generic animation or React skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
50%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 actionable code examples with clear anti-patterns, making it highly useful for implementation. However, it is significantly over-verbose — repeating information across sections, including marketing copy, version tables, and contributing guidelines that waste tokens. The main file tries to be both an overview and a comprehensive reference, undermining the progressive disclosure structure it sets up with its reference files.
Suggestions
Cut the file by 50%+: remove the 'When to Use' decision tree (Claude can infer this), the version table, token efficiency metrics, contributing section, and the repeated 'Production Tested' footer. Move known issues to a reference file.
Eliminate redundancy: AnimatePresence rules and the Cloudflare Workers workaround each appear 3-4 times — consolidate to a single mention each.
Remove marketing language ('industry-standard', star counts, '300+ official examples') and explanatory fluff ('Transform any HTML/SVG element into an animatable component') — Claude doesn't need persuasion.
Add a brief sequential workflow for common tasks like 'Add animation to existing Next.js component' with validation steps (e.g., verify 'use client', check for Tailwind conflicts, test reduced motion).
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at 400+ lines. Includes unnecessary marketing language ('industry-standard', '30,200+ GitHub stars'), redundant sections (version tables, token efficiency metrics, contributing guidelines), and repeats information multiple times (AnimatePresence rules appear 3 times, Cloudflare Workers workaround mentioned 4 times). The 'When to Use' section over-explains scenarios Claude can infer. | 1 / 3 |
Actionability | Provides fully executable, copy-paste ready code examples throughout — motion components, AnimatePresence patterns, scroll animations, LazyMotion optimization, and Next.js integration. Common mistakes are shown with concrete wrong/right code comparisons. | 3 / 3 |
Workflow Clarity | Individual patterns are clear but there's no sequenced workflow with validation checkpoints. The skill covers many features but doesn't guide through multi-step processes like setting up a project end-to-end or debugging animation issues systematically. The 'When to Load References' section provides good decision guidance but isn't a workflow. | 2 / 3 |
Progressive Disclosure | References to external files (references/, templates/, scripts/) are well-signaled with clear loading criteria. However, the main SKILL.md itself contains too much inline content that should be in reference files — the extensive 'When to Use' section, detailed known issues, and package version tables bloat the overview. No bundle files were provided to verify references exist. | 2 / 3 |
Total | 8 / 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 (515 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- secondsky/claude-skills
- Commit
5e92b71
- 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.