CtrlK
BlogDocsLog inGet started
Tessl Logo

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", "shared element", "flip", "layout animation", "haptic", "vibracao", "som de interface", "reduced motion", "flash", "piscando", "quando nao animar", "animacao demais".

73

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

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

A well-structured, highly actionable motion-design skill with executable code across the main pattern categories and good progressive disclosure through real reference files. Its only weaknesses are a few trimmable discursive passages and a pattern-library shape that is not a strict linear workflow.

Suggestions

Tighten the 'Quando NÃO Animar' and 'Feedback Multimodal' prose — replace illustrative math and rhetorical lines with bullet rules to lift conciseness.

Consider sequencing the core delivery flow (define tokens → apply entry/exit patterns → wire reduced-motion → run checkpoint → handoff) as an explicit numbered workflow so the existing checkpoints form one coherent sequence.

Move the longest inline code blocks (e.g. the GSAP sticky-stack/horizontal-pan hooks or the hierarchy variants) into a reference file if they are consulted on demand rather than every invocation, to further slim the inline body.

DimensionReasoningScore

Conciseness

The body is dense and mostly actionable with little basic-concept padding, but a few discursive passages — '300ms numa operação feita 100 vezes ao dia é meia hora de espera por mês' and the rhetorical 'Teste final da linguagem de motion' — could be trimmed; overall efficient with minor over-explanation.

4 / 5

Actionability

Extensive copy-paste-ready, executable code throughout — motion tokens, Framer Motion variants, React components, a useReducedMotion hook, and GSAP ScrollTrigger hooks — covering the common cases concretely rather than with pseudocode.

5 / 5

Workflow Clarity

Clear checkpoints exist — the 'Checkpoint antes de considerar a animação pronta' section forms a validate→fix→retest loop on prefers-reduced-motion, plus an 'Evidência de Conclusão' checklist and a handoff section — but the skill is pattern-library shaped rather than a tightly sequenced linear workflow, leaving minor sequencing gaps.

4 / 5

Progressive Disclosure

SKILL.md is an overview with core tokens and quick-reference patterns inline, while genuinely extensive material — the decision gate/vocabulary/review checklist, view-transitions API, 16-pattern GSAP lab, and vanilla effects — is offloaded to four clearly signaled, one-level-deep reference files that exist on disk.

5 / 5

Total

18

/

20

Passed

Description

96%Weight 40%Scale 1-5

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

A strong, comprehensive description that explicitly states what the skill does and when to use it, backed by a rich bilingual trigger-term list with synonyms. Only slight broadness in the catch-all phrasing keeps distinctiveness from a perfect score.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'animações de interface, transições entre páginas, efeitos de hover/click/focus, loading states animados, ou qualquer interação visual com movimento' — giving comprehensive coverage of the motion-design domain, not vague abstractions.

5 / 5

Completeness

Explicitly answers both 'what' ('Skill de Motion Design para animações, transições e micro-interações') and 'when' ('Use quando precisar definir ou implementar...' plus the concrete trigger-phrase list), matching the anchor for clearly answering both with concrete triggers.

5 / 5

Trigger Term Quality

The 'Trigger em:' clause enumerates a comprehensive set of natural terms across two languages with synonyms — 'animacao', 'motion', 'framer motion', 'spring', 'easing', 'parallax', 'shared element', 'flip', 'piscando'/'flash', 'reduced motion' — matching what a user would actually say.

5 / 5

Distinctiveness Conflict Risk

The motion niche is clear and triggers are unmistakably motion-specific (framer motion, spring, easing, shared element, FLIP), but the broad phrase 'qualquer interação visual com movimento' and proximity to frontend/UI-polish skills carry minor overlap risk with closely related skills.

4 / 5

Total

19

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (722 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository
felvieira/claude-skills-fv
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.