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.

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

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

Quality

Content

65%

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

Highly actionable copy-paste patterns with strong selection guidance, held back by rule redundancy across three sections and a monolithic single-file structure with no reference split.

Suggestions

Collapse the Principles, Rules, and Anti-Patterns sections into one canonical rules list with a compact anti-pattern table to remove triple redundancy.

Move the full per-pattern code examples into references/ files (e.g. examples.md) and keep SKILL.md as an overview pointing to them, improving progressive disclosure.

Add a short validation/verification step for the modal and AnimatePresence patterns (e.g. 'confirm exit fires by checking the child has key + exit') to strengthen workflow clarity.

Dimension	Reasoning	Score
Conciseness	Code examples are lean and it never explains concepts Claude already knows, but Rules, Principles, and the Anti-Patterns table each restate the same eight rules, which could be tightened into one.	2 / 3
Actionability	It provides complete, copy-paste TSX for button, stagger, modal, toast, page transition, scroll reveal/progress, expanding card, shared-element, and an end-to-end list, plus concrete decision tables.	3 / 3
Workflow Clarity	Pattern selection is clearly tabulated ('Choosing the right pattern', 'mode="wait" vs sync'), but there is no sequenced multi-step workflow with validation checkpoints, and the skill is too large for the simple-skill exemption.	2 / 3
Progressive Disclosure	The file is well-sectioned, but SKILL.md is itself the detailed material — all code examples live inline in one ~430-line file with no one-level-deep references to split out the catalog.	2 / 3
	Total	9 / 12 Passed

Description

82%

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 specific, well-triggered description with a clear niche, weakened only by the absence of an explicit 'Use when…' clause to convert implied triggers into explicit ones.

Suggestions

Append an explicit trigger clause, e.g. 'Use when animating buttons, modals, toasts, lists, page transitions, or scroll-reveal in a React / Next.js app.'

Add a couple of natural phrasings users say ('fade/slide in', 'animate on scroll') to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	The description enumerates concrete patterns — 'button, modal, toast, stagger, page transitions, exit animations, scroll, and layout' — naming multiple specific capabilities rather than vague categories.	3 / 3
Completeness	It clearly answers 'what' (production-ready animation patterns for the listed UI needs) but lacks any explicit 'Use when…' trigger clause, so 'when' is only implied — capping completeness at 2 per the rubric guideline.	2 / 3
Trigger Term Quality	It covers natural terms users would actually say ('modal', 'toast', 'page transitions', 'scroll', 'React / Next.js') with good breadth across common UI animation requests.	3 / 3
Distinctiveness Conflict Risk	The 'React / Next.js … built on motion-foundations tokens and springs' framing carves a clear niche distinct from sibling skills, making misfires unlikely.	3 / 3
	Total	11 / 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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Commit: 754b8dd

Reviewed: 3 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.