CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

motion

Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./plugins/motion/skills/motion/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%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 library skill with excellent progressive disclosure and a useful symptom→fix issue catalogue. Its main weaknesses are padding and duplication (marketing metrics, repeated examples and figures) plus a broken 'templates/' bundle claim that slightly undermines both actionability and navigation.

Suggestions

Remove the 'Token Efficiency Metrics' section and the closing recap block ('Token Savings: ~83%', 'Error Prevention: 100%', repeated 'Recommended Stack' / bundle-size lines) — these are unverifiable marketing figures that add tokens without actionable value.

Deduplicate the body: the AnimatePresence wrong/right code example appears nearly verbatim in both Core Concepts #3 and Known Issues #1, and bundle-size figures plus the Cloudflare Workers workaround each appear 3+ times — keep one canonical instance of each and cross-link.

Fix bundle claims: the 'Templates' section references a 'templates/' directory that does not exist (add the 5 template files or delete the section), and the 'References' section says '4 comprehensive reference guides' while the directory contains 6 — align the count and listing.

DimensionReasoningScore

Conciseness

The core content (core concepts, integration, known issues) is dense and useful, but there are several padded/duplicated sections: the 'Token Efficiency Metrics' section ('Token Savings: ~83%', 'Error Prevention: 100%'), the closing recap block repeating 'Recommended Stack' and bundle sizes, the AnimatePresence wrong/right example appearing verbatim in both Core Concepts and Known Issues #1, and Cloudflare Workers guidance plus bundle-size figures repeated 3+ times. Version-pin tables stamped 'Verified 2026-08-03' add time-sensitive maintenance burden. Not a 2 because most sections still deliver actionable content rather than explanation of concepts Claude already knows.

3 / 5

Actionability

Code examples are concrete, executable TSX with correct imports ('import { motion } from "motion/react"'), install commands cover three package managers, and each Known Issue pairs a symptom with a concrete fix. Not a 5 because the 'Templates' section names 5 files in a 'templates/' directory that does not exist in the bundle, and some snippets (e.g., the useScroll parallax) are fragments without full component context.

4 / 5

Workflow Clarity

The body is coherently sequenced (when to use → install → core concepts → integration → performance → accessibility → patterns → known issues → reference routing), and Known Issues provide symptom→solution diagnostic loops ('Symptom: ... Solution: ...'). Not a 5 because installation/integration steps lack explicit verification checkpoints (e.g., nothing confirms the install or LazyMotion conversion worked, and the optimize-bundle.sh script's use is never demonstrated with a command).

4 / 5

Progressive Disclosure

Advanced material is consistently offloaded with one-level-deep, well-signaled pointers — every Core Concepts subsection ends with 'load references/core-concepts-deep-dive.md' for the advanced variant, and a dedicated 'When to Load References' section gives explicit trigger-based routing; all 6 referenced files exist and none nest further. Not a 5 because the 'Templates' section points to a nonexistent directory and the 'References' section says '4 comprehensive reference guides' while 6 exist (two are routed to elsewhere in the body but omitted from that list).

4 / 5

Total

15

/

20

Passed

Description

83%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 that identifies the library, both package names, and an explicit 'Use for...' clause with concrete trigger terms. Both the 'what' and 'when' are clearly answered with only minor gaps in keyword synonyms and slight generic-term overlap risk.

DimensionReasoningScore

Specificity

The description lists several concrete capabilities — 'drag-and-drop, scroll animations, gestures, SVG morphing' and 'spring physics errors' — anchored to a named domain ('Motion (Framer Motion) React animation library'). It falls short of a 5 because capabilities are phrased as trigger circumstances rather than a comprehensive action list (e.g., no mention of exit/layout animations), and short of nothing below since the actions named are specific, not generic.

4 / 5

Completeness

It explicitly answers both questions: 'Motion (Framer Motion) React animation library' states what it is, and 'Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors' gives concrete trigger phrases for when to use it. Both are explicit, matching the top anchor; a 4 would require the 'when' to be less explicit than this.

5 / 5

Trigger Term Quality

Strong natural keywords users would actually say: 'drag-and-drop', 'scroll animations', 'SVG morphing', 'spring physics', plus both package names ('Motion', 'Framer Motion'). Not a 5 because a few common synonyms are missing (e.g., 'parallax', 'framer-motion' with hyphen, 'animate/animatePresence').

4 / 5

Distinctiveness Conflict Risk

Naming the specific library and both package names ('Motion (Framer Motion)') carves out a clear niche with mostly distinct triggers. It is not a 5 because generic terms like 'scroll animations' and 'gestures' have minor overlap risk with closely related animation skills (e.g., auto-animate, GSAP-oriented skills).

4 / 5

Total

17

/

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

Warning

Total

15

/

16

Passed

Repository

secondsky/claude-skills

Path

plugins/motion/skills/motion/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.