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".

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

65%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, highly actionable motion-design reference with executable patterns and clear hard rules, but it is over-long for a SKILL.md with redundant code blocks and weak verification checkpoints. Moving extensive variant catalogs into referenced files and consolidating repeated examples would improve it.

Suggestions

Move the full variant catalogs (entry/exit/stagger/hierarchy) into a referenced file under references/ and keep only one representative example per pattern inline, reducing redundancy and the ~580-line footprint.

Add a concrete verification step for the 60fps goal — e.g., a note to check Chrome DevTools Performance/FPS meter or a useReducedMotion-aware smoke test — so the completion-evidence checklist becomes an actual validation checkpoint.

Consolidate the duplicated reduced-motion usage (the standalone AnimatedComponent example and the useReducedMotion hook) into a single canonical pattern to remove repeated code.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, directive prose with executable code, but ~15 full code blocks include repetition — AnimatedComponent re-shows the reduced-motion pattern, and the Hierarquia section repeats variants already defined earlier — so not every token earns its place.	2 / 3
Actionability	Provides fully executable, copy-paste-ready TypeScript/TSX throughout — motion tokens, entry/exit/stagger variants, GSAP ScrollTrigger hooks, and a useReducedMotion hook — with specific values and imports.	3 / 3
Workflow Clarity	The handoff flow (recebe do Frontend → adiciona motion → entrega para Copy/Marketing) and numbered Responsabilidades give a sequence, but validation checkpoints are weak: "Evidencia de Conclusao" is a checklist yet there is no concrete verification step (e.g., how to confirm 60fps) and checkpoints are implicit.	2 / 3
Progressive Disclosure	Section headers are clear and there is one signaled external reference (docs/skill-guides/motion-design.md "apenas quando necessario"), but the SKILL.md itself is a ~580-line monolithic reference with most code inline rather than split into reference files, and no bundle files exist to offload detail.	2 / 3
	Total	9 / 12 Passed

Description

100%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is well-crafted: it states concrete capabilities, gives explicit use-when guidance with a generous trigger list, and carves out a distinctive animation niche. It uses third-person voice and avoids fluff.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — "animações de interface, transições entre páginas, efeitos de hover/click/focus, loading states animados" — matching the anchor for listing several specific concrete actions rather than vague language.	3 / 3
Completeness	Explicitly answers both what (motion design for animations, transitions, micro-interactions) and when via the "Use quando precisar definir ou implementar" clause plus a dedicated "Trigger em:" list, satisfying the explicit-trigger requirement.	3 / 3
Trigger Term Quality	Provides broad natural-language triggers users would say — "motion", "framer motion", "spring", "parallax", "hover effect", "scroll animation" — giving good coverage of common variations rather than only technical jargon.	3 / 3
Distinctiveness Conflict Risk	Occupies a clear niche (interface motion) with distinct triggers like "framer motion", "spring", and "parallax" that are unlikely to fire for non-animation skills.	3 / 3
	Total	12 / 12 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (583 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: felvieira/claude-skills-fv
Path: skills/12-motion-design/SKILL.md
Commit: 030ef22

Reviewed: 6 days ago

Table of Contents

Discovery Implementation Validation

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.