motion
Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".
90
Does it follow best practices?
Validation 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 (gestures, scroll effects, spring physics), includes natural trigger terms users would actually search for, has an explicit 'Use when' clause with concrete scenarios, and is distinctive enough to avoid conflicts with other skills. The inclusion of troubleshooting scenarios adds extra value for skill selection.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Also includes specific bundle sizes and troubleshooting scenarios. | 3 / 3 |
Completeness | Clearly answers both what (React animations with Motion, specific features) AND when (explicit 'Use when:' clause with concrete scenarios plus troubleshooting triggers). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'drag-and-drop', 'scroll animations', 'modals', 'carousels', 'parallax', plus technical terms like 'Framer Motion', 'AnimatePresence', 'Next.js', 'Tailwind'. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche: specifically Motion/Framer Motion library for React animations. Unlikely to conflict with general React skills or other animation libraries due to specific terminology. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a comprehensive, well-structured skill with excellent actionability and workflow clarity. The code examples are production-ready and the troubleshooting section is particularly valuable with clear wrong/correct patterns. The main weakness is verbosity - the skill could be 30-40% shorter by removing repeated information (bundle sizes mentioned 4+ times), condensing the comparison sections, and trimming the 'When to Use' decision tree.
Suggestions
Remove duplicate bundle size mentions - state once in Installation, reference elsewhere
Condense the 'When to Use' section - Claude can infer most of these use cases from the capabilities list
Move the comparison table and token efficiency metrics to a reference file - these are useful but not essential for the main skill body
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | While the skill contains valuable information, it includes some unnecessary explanations (e.g., explaining what Motion is, bundle size details repeated multiple times, verbose 'When to Use' section). The comparison table and metrics sections add bulk that could be condensed. | 2 / 3 |
Actionability | Excellent executable code examples throughout - installation commands, complete React/TypeScript snippets, and copy-paste ready patterns. Every major concept includes working code with correct imports and proper syntax. | 3 / 3 |
Workflow Clarity | Clear multi-step processes with explicit validation (e.g., Next.js setup with Step 1/Step 2, Known Issues with ❌ Wrong/✅ Correct patterns). The troubleshooting section provides clear error → cause → solution workflows with code examples. | 3 / 3 |
Progressive Disclosure | Well-structured with clear overview, then detailed sections. References to external files (references/, templates/, scripts/) are one-level deep and clearly signaled. The skill appropriately splits detailed patterns and guides into separate reference files. | 3 / 3 |
Total | 11 / 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 (856 lines); consider splitting into references/ and linking | Warning |
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 |
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.