Content
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 significantly over-verbose — most of the animation variant examples are repetitive variations that Claude could derive from 1-2 examples plus the token definitions. The workflow lacks explicit validation/testing checkpoints for performance and accessibility claims.
Suggestions
Reduce inline code examples to 2-3 representative patterns (e.g., one entry animation, one micro-interaction, one stagger) and move the full catalog to a referenced file like `docs/motion-variants.md`.
Remove sections that describe Claude's role/responsibilities in abstract terms ('Quando Usar', 'Entradas/Saidas Esperadas', 'Responsabilidades') — these consume tokens without adding actionable guidance.
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.
Move the `useReducedMotion` hook and the full hierarchy orchestration example to the referenced `docs/skill-guides/motion-design.md` to keep the main skill lean.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ 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. The 'Quando Usar/Nao Usar', 'Entradas/Saidas Esperadas', and 'Responsabilidades' sections add process overhead without actionable value. | 1 / 3 |
Actionability | The code examples are fully executable, copy-paste ready TypeScript/TSX with proper imports, typed variants, and real Framer Motion API usage. 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 — no steps to verify 60fps performance, no testing workflow for reduced-motion compliance, and no feedback loop for catching animation issues before handoff. | 2 / 3 |
Progressive Disclosure | The skill references `docs/skill-guides/motion-design.md` for extended examples, which is good progressive disclosure. However, the main file itself contains massive amounts of inline code that should be in referenced files — the animation variants, hooks, and component patterns could easily be split out, keeping SKILL.md as a concise overview with pointers. No bundle files are provided to verify the referenced paths exist. | 2 / 3 |
Total | 8 / 12 Passed |