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".
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 ./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 around motion design and animations, provides explicit trigger guidance with both a 'Use when' clause and a dedicated trigger term list, and uses specific technical terms that distinguish it from general UI/CSS skills. The bilingual approach (Portuguese structure with English technical terms) effectively covers how users in Portuguese-speaking contexts would naturally reference these concepts.
| 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 carved niche around motion design and animation specifically, with distinct triggers like 'framer motion', 'spring', 'easing', 'parallax' that are unlikely to conflict with general UI or CSS 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 highly actionable, executable Framer Motion code with well-defined motion tokens and comprehensive animation patterns. However, it is excessively verbose — most of the animation variants are repetitive patterns that Claude could generate from 1-2 examples plus the token definitions. The workflow lacks explicit validation/verification steps for its own performance requirements (60fps, reduced-motion compliance).
Suggestions
Reduce inline code examples to 1-2 representative patterns (e.g., one entry animation + one micro-interaction) and move the full catalog to the referenced `docs/skill-guides/motion-design.md`
Remove sections that explain Claude's role/responsibilities ('Quando Usar', 'Entradas/Saidas Esperadas', 'Responsabilidades') or compress them to 2-3 bullet points total
Add explicit validation steps: how to verify 60fps (e.g., Chrome DevTools Performance panel check), how to test prefers-reduced-motion, and a pre-handoff checklist
Remove the 'Regra de Código Limpo' section — Claude already knows not to add unnecessary comments and this is generic advice not specific to motion design
| 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 Framer Motion APIs; a token table + 1-2 representative examples would suffice. The 'Responsabilidades', 'Quando Usar/Nao Usar', and 'Entradas/Saidas Esperadas' sections add process overhead that Claude doesn't need. | 1 / 3 |
Actionability | The code examples are fully executable, copy-paste ready TypeScript/TSX with proper imports, typed variants, and real Framer Motion APIs. The motion tokens, variant definitions, hooks, and component examples are all concrete and immediately usable. | 3 / 3 |
Workflow Clarity | The handoff section describes inputs/outputs and the hierarchy of animation section provides sequencing guidance, but there are no explicit validation checkpoints (e.g., how to verify 60fps, how to test reduced-motion compliance, how to validate animation doesn't cause layout shifts). For a skill that mandates performance targets like 60fps, missing verification steps is a gap. | 2 / 3 |
Progressive Disclosure | The skill references `docs/skill-guides/motion-design.md` for extended examples, which is good, but then proceeds to inline extensive code examples that could have been offloaded to that guide file. Multiple governance files are referenced but no bundle files are provided to verify them. The content that is inline (all the variant patterns) would be better split into a reference file, keeping SKILL.md as a concise overview. | 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
7577622
- 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.