motion-design
Skill de Motion Design para animações, transições e micro-interações. Use quando precisar definir ou implementar animações de interface, transições entre páginas, efeitos de hover/click/focus, loading states animados, ou qualquer interação visual com movimento. Trigger em: "animacao", "transicao", "motion", "micro-interacao", "framer motion", "spring", "easing", "parallax", "scroll animation", "hover effect".
79
75%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/12-motion-design/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 skill description that clearly defines its scope (motion design, animations, transitions, micro-interactions), provides explicit 'when to use' guidance, and includes a comprehensive list of trigger terms in both Portuguese and English. The description is well-structured, uses third person voice appropriately, and would be easily distinguishable from other skills in a large skill library.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: defining/implementing interface animations, page transitions, hover/click/focus effects, animated loading states, and visual interactions with movement. | 3 / 3 |
Completeness | Clearly answers both 'what' (motion design for animations, transitions, micro-interactions) and 'when' (explicit 'Use quando' clause with specific scenarios plus an explicit trigger term list). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms including both Portuguese and English variations: 'animacao', 'transicao', 'motion', 'micro-interacao', 'framer motion', 'spring', 'easing', 'parallax', 'scroll animation', 'hover effect'. These are terms users would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly occupies a distinct niche focused on motion design and animations specifically, with highly specific trigger terms like 'framer motion', 'spring', 'easing', 'parallax' that are unlikely to conflict with other UI or design 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, executable code examples covering a comprehensive range of motion design patterns with Framer Motion, making it highly actionable. However, it is far too verbose for a SKILL.md — most of the animation variant definitions are repetitive patterns that should be in the referenced guide file, not inline. The workflow lacks explicit validation steps for performance and accessibility requirements despite listing them as critical rules.
Suggestions
Move the bulk of animation pattern code (entry, exit, stagger, page transitions, micro-interactions, loading, scroll, hierarchy) to `docs/skill-guides/motion-design.md` and keep only the motion tokens + 1-2 representative examples in SKILL.md
Add an explicit implementation workflow with validation checkpoints, e.g.: 1) Identify components needing motion → 2) Apply tokens/variants → 3) Verify 60fps with DevTools Performance tab → 4) Test with prefers-reduced-motion enabled → 5) Handoff
Remove the 'Quando Usar/Nao Usar' and 'Entradas/Saidas Esperadas' sections which are meta-information Claude can infer from context, or compress them to 1-2 lines each
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~350+ lines. It includes extensive code examples for every animation pattern (fadeIn, slideUp, slideInFromLeft, scaleIn, fadeOut, slideDown, stagger, page transitions, micro-interactions, loading, scroll, hierarchy) that are largely repetitive variations of the same Framer Motion pattern. Claude already knows how to use Framer Motion — the tokens and 1-2 examples would suffice, with the rest belonging in a referenced file. | 1 / 3 |
Actionability | The code examples are fully executable, copy-paste ready TypeScript/TSX with proper imports, typed variants, and complete component implementations. Motion tokens, hooks, and CSS patterns are all concrete and specific. | 3 / 3 |
Workflow Clarity | The handoff section describes inputs/outputs and the skill mentions a hierarchy of animation ordering, but there's no explicit step-by-step workflow for implementing motion on existing components. No validation checkpoints exist — e.g., no steps for verifying 60fps performance or testing reduced-motion compliance, despite these being stated requirements. | 2 / 3 |
Progressive Disclosure | The skill references `docs/skill-guides/motion-design.md` for extended examples, which is good. However, the bulk of the animation pattern code (entry, exit, stagger, page, micro-interactions, loading, scroll, hierarchy variants) should be in that referenced file rather than inline, making the SKILL.md a monolithic wall of code examples. | 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 (510 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- felvieira/claude-skills-fv
- Commit
d87ad31
- 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.