Tessl • The management layer for AI agent skills

SkillPublic

motion-patterns

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/motion-patterns/SKILL.md

Quality

Content

63%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.

The body is a well-organized pattern library with strong, mostly executable code examples and good decision guidance, but it re-states its rules across three sections and keeps every example inlined rather than progressively disclosing detail via reference files. Trimming the duplication and splitting a few pattern examples into references would tighten it considerably.

Suggestions

Remove or merge the Principles section (it restates Rules 1–4 verbatim) and trim 'When to Activate', which duplicates the frontmatter description.

Move the less-common pattern examples (shared-element crossfade, accordion, scroll progress) into a references/ file linked from a short index, keeping only the top patterns inline in SKILL.md.

Complete the fragmentary examples — give the button pattern a full component and add the missing 'use client' directive and imports to the accordion example.

Dimension	Reasoning	Score
Conciseness	The body is mostly dense and assumes competence (no library tutorials), but the same eight rules are stated three times — the Principles section restates Rules 1–4, and the Anti-Patterns table re-covers all eight — while "When to Activate" duplicates the frontmatter description.	3 / 5
Actionability	Most patterns ship complete, executable TSX (stagger, modal, toast, page transition, scroll reveal, expanding card), but the button and shared-element snippets are fragments and the accordion example omits its "use client" directive and imports, so coverage is not fully copy-paste ready.	4 / 5
Workflow Clarity	There is no multi-step process to sequence, but the decision tables ("Choosing the right pattern", wait/sync/popLayout) and the explicit "Must be set up first" dependency on motion-foundations give unambiguous guidance for selecting and composing patterns.	4 / 5
Progressive Disclosure	No bundle files exist (references/, scripts/, assets/ all absent), so ~250 lines of code examples are inlined in a 435-line SKILL.md; section headers are clear, but the per-pattern examples are content that could be split into one-level-deep reference files.	3 / 5
	Total	14 / 20 Passed

Description

87%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: it explicitly states what the skill provides and when to use it with concrete, natural trigger phrases, and carves out a distinct React/Next.js animation niche. Minor improvement is possible by adding a few common synonyms (fade, hover, AnimatePresence, motion/framer-motion) and covering the accordion/expanding-card patterns it actually contains.

Dimension	Reasoning	Score
Specificity	Enumerates concrete pattern types — "button, modal, toast, stagger, page transitions, exit animations, scroll, and layout" — but lists pattern nouns rather than actions and omits body-covered patterns (accordion, expanding card), leaving minor gaps in coverage.	4 / 5
Completeness	Explicitly answers both what ("Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs") and when ("Use when animating a specific UI element in React or Next.js…") with concrete trigger phrases, matching the top anchor exactly.	5 / 5
Trigger Term Quality	"Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll" uses natural user phrasing, but misses common synonyms users would say such as "fade", "hover effect", "AnimatePresence", or the library name "motion/framer-motion".	4 / 5
Distinctiveness Conflict Risk	Clear niche — React/Next.js animation patterns bounded by framework — anchored to "motion-foundations tokens and springs", with trigger terms (button, modal, toast, stagger, page transition) unlikely to fire for unrelated skills.	5 / 5
	Total	18 / 20 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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Path: skills/motion-patterns/SKILL.md
Revision: 25278e7

Reviewed: 29 days ago

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.

motion-patterns

Table of Contents

Is this your skill?