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 around motion design and animations, provides explicit trigger guidance with both a 'Use when' clause and a dedicated trigger term list, and covers both Portuguese and English keywords. The description is specific, well-structured, and distinctly positioned to avoid conflicts with other UI-related skills.
| 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/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 excels at actionability with comprehensive, executable Framer Motion code examples and well-defined motion tokens. However, it is significantly too verbose — most animation pattern variants are repetitive and should be moved to the referenced guide file rather than inlined. The workflow lacks explicit validation steps for performance verification despite 60fps being a core requirement.
Suggestions
Move the bulk of animation pattern examples (entry, exit, stagger, page, micro-interactions, loading, scroll, hierarchy) to `docs/skill-guides/motion-design.md` and keep only the motion tokens + 1-2 representative patterns in SKILL.md
Add explicit validation/verification steps: e.g., 'Run Chrome DevTools Performance tab to verify 60fps', 'Test with prefers-reduced-motion enabled before handoff'
Define a clear numbered workflow: e.g., 1. Define motion tokens → 2. Apply entry/exit animations → 3. Add micro-interactions → 4. Verify performance → 5. Test accessibility → 6. Handoff
Remove sections that explain concepts Claude already knows (e.g., the 'Quando Usar/Nao Usar' and 'Entradas/Saidas Esperadas' sections add little actionable value)
| 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 skill provides fully executable, copy-paste ready TypeScript/TSX code with concrete motion tokens, complete component implementations, and specific CSS rules. Every pattern includes working code with proper imports and types. | 3 / 3 |
Workflow Clarity | The skill lists responsibilities and handoff steps but lacks a clear sequential workflow for implementing motion in a project. There are no validation checkpoints (e.g., 'test at 60fps before proceeding', 'verify reduced-motion behavior') despite performance being a stated concern. The handoff sections describe inputs/outputs but not the step-by-step process. | 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 should be in that referenced file. The main SKILL.md should contain the tokens, 1-2 key patterns, and performance rules, with the full pattern library in the referenced guide. | 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
e9f6648
- 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.