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

92%

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

Quality

Content

88%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 dense, executable pattern catalog with strong decision guidance and explicit rules, assuming Claude's competence throughout. The main gap is progressive disclosure: heavy code is inlined with no reference files to split it.

Suggestions

Move the larger full implementations (modal, toast stack, end-to-end list example) into files under references/ and link to them one level deep, keeping only compact illustrations inline in SKILL.md.

Consider extracting the rules + anti-patterns table into a references/RULES.md so the main body can stay a lean overview plus quick-start patterns.

If a token/spring quick-reference is useful, place it in references/TOKENS.md rather than relying entirely on the sibling motion-foundations skill being loaded.

Dimension	Reasoning	Score
Conciseness	Assumes Claude's competence — no padding explaining what motion or React is — and every line earns its place, though the body is long because it inlines many full code blocks rather than offloading some to reference files.	4 / 5
Actionability	Provides fully executable, copy-paste TSX for button, stagger, modal, toast, page transition, scroll reveal, scroll progress, expanding card, shared-element crossfade, accordion, plus an end-to-end example.	5 / 5
Workflow Clarity	A pattern catalog rather than a destructive/batch workflow; decision tables ('Choosing the right pattern', 'mode=wait vs sync'), eight explicit numbered rules, and an anti-pattern table with fixes make each single action unambiguous.	5 / 5
Progressive Disclosure	Well-organized into clear sections with no nested references, but no bundle/reference files exist and substantial full implementations (modal, toast, end-to-end example) are inlined that could live one level deep in a references/ directory.	4 / 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.

The description is specific, trigger-rich, and explicitly pairs a clear 'what' with a concrete 'Use when' clause in third person. It is slightly above the midpoint on distinctiveness owing to the closely related sibling skills it shares a namespace with.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete pattern actions — 'button, modal, toast, stagger, page transitions, exit animations, scroll, and layout' — covering the domain comprehensively rather than vague abstraction.	5 / 5
Completeness	Explicitly answers both what ('Production-ready animation patterns...') and when ('Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll').	5 / 5
Trigger Term Quality	Uses natural terms a user would say — 'button', 'modal', 'toast', 'page transition', 'scroll', 'React/Next.js' — with good synonym coverage in the Use-when clause.	5 / 5
Distinctiveness Conflict Risk	Clear niche (animation patterns built on motion-foundations tokens) with distinct triggers, though sibling skills motion-foundations and motion-advanced create minor overlap risk.	4 / 5
	Total	19 / 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
Commit: 06c5e11

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.