CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

motion-design

Projeta e implementa animacoes e microinteracoes de interface. 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".

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

75%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 high-quality, deeply actionable reference: hard numeric rules, executable code, accessibility treated as a safety requirement with a verification checkpoint, and genuine offloading of bulk material to four well-signaled reference files. The main cost is token weight — the inline boilerplate variant catalog and some duplicated provenance text could be cut without losing any guidance value.

Suggestions

Trim the Padroes de Animacao section to one exemplar variant per category (the motionTokens block plus fadeIn/slideUp/staggerContainer is enough for Claude to derive the rest) and move the full variant catalog to a references file like motion-variants.md.

State the naocodei.com licensing caveat once — either in the 'Efeitos Vanilla' section or in 'Fontes Externas' — instead of repeating the same provenance sentence in both places.

Consolidate 'Quando Usar', 'Entradas Esperadas', 'Saidas Esperadas', and the Handoff sections, which currently restate overlapping scope information across four short sections.

DimensionReasoningScore

Conciseness

The body is ~725 lines and includes a large catalog of boilerplate variant code (fadeIn/slideUp/slideInFromLeft/scaleIn, fadeOut/slideDown, staggerContainer/staggerItem, pageTransition) that Claude could derive from the motionTokens block plus one exemplar, and the naocodei provenance/licensing caveat is stated twice (inline 'Aviso de proveniencia' and again in 'Fontes Externas'). Not score 2 because it never explains concepts Claude already knows and the prose sections are dense and justified; not score 4 because several hundred lines of inline variant boilerplate could be trimmed or offloaded.

3 / 5

Actionability

Guidance is fully executable: complete TypeScript/TSX imports and components, exact numeric values (duration/easing tuples, 15ms reorder stagger, 3 flashes/sec, 60fps, 10-item stagger cap), named libraries with cleanup patterns (.kill() in useEffect), and a copy-paste useReducedMotion hook. Not score 4 because the examples are complete and cover the common cases rather than having minor gaps.

5 / 5

Workflow Clarity

When/when-not-to-use sections, an explicit reduced-motion verification checkpoint with a re-test feedback loop ('Corrigir o CSS/asset faltante e testar de novo'), completion criteria, handoff inputs/outputs, and a referenced review checklist give clear sequencing with most checkpoints present. Not score 5 because there is no end-to-end ordered implementation workflow tying the sections together — the sequence is assembled from well-labeled parts rather than stated as a numbered process; not score 3 because validation checkpoints are explicit, not implicit.

4 / 5

Progressive Disclosure

Four real one-level-deep reference files (verified present in references/), each introduced with a purpose statement and explicit 'when to consult' guidance, and the bulk material (16-pattern GSAP lab, decision gate, glossary, view transitions API) is properly offloaded. Not score 5 because the main file still carries a long inline variant catalog and several governance/handoff blocks that could live in a reference, keeping SKILL.md from being a lean overview.

4 / 5

Total

16

/

20

Passed

Description

90%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 description: third-person voice, explicit what-and-when structure, and an unusually rich natural-language trigger list covering synonyms, tool names, and negative triggers ('quando nao animar'). The only gap is that the 'what' clause stays at two generic verbs instead of naming the concrete deliverables the body clearly supports.

Suggestions

Expand the opening 'what' clause to enumerate 3-4 concrete deliverables the skill already covers, e.g. 'Projeta e implementa animacoes e microinteracoes: define motion tokens, transicoes de pagina, animacoes baseadas em scroll e suporte a reduced-motion'.

Consider adding 'motion design' and 'animacao de interface' as triggers, since users may phrase the request with the skill's own title term.

DimensionReasoningScore

Specificity

"Projeta e implementa animacoes e microinteracoes de interface" names the domain with two generic verbs (design, implement) but does not enumerate the concrete deliverables the skill actually covers (motion tokens, page transitions, scroll-driven animation, reduced-motion support). Not score 4 because it lacks the 'several specific actions' list; not score 2 because the domain is precise and the term 'microinteracoes' narrows it beyond a generic action verb.

3 / 5

Completeness

The first sentence explicitly answers 'what' (designs and implements animations and interface microinteractions) and "Trigger em:" followed by concrete trigger phrases explicitly answers 'when'. Not score 4 because the 'when' is fully explicit with concrete phrases rather than merely present.

5 / 5

Trigger Term Quality

The trigger list is comprehensive and natural: 21 terms spanning tool names ("framer motion", "spring"), technique synonyms ("shared element", "flip", "layout animation", "parallax", "easing"), accessibility phrasing ("reduced motion", "flash", "piscando"), and colloquial intent ("quando nao animar", "animacao demais"). Coverage includes both technical and everyday registers a user would actually say.

5 / 5

Distinctiveness Conflict Risk

Clear motion-design niche with unmistakably motion-specific triggers ("spring", "easing", "shared element", "flip", "parallax", "framer motion") that would not plausibly route to an unrelated skill. Broad-ish terms like "hover effect" and "flash" are still legitimately motion territory; conflict risk is minimal.

5 / 5

Total

18

/

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 (726 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

felvieira/claude-skills-fv

Path

skills/12-motion-design/SKILL.md

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.