motion-advanced

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.

Quality

83%

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

78%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 highly actionable, well-structured reference skill whose copy-paste TSX examples and decision tables are its core strength. Its weaknesses are a monolithic single-file layout with no progressive disclosure to bundle files and some advisory prose that could be trimmed.

Suggestions

Split the large Code Examples catalog into one-level-deep reference files (e.g., references/drag-gestures.md, references/text-svg.md, references/loaders.md) with a concise overview in SKILL.md pointing to them, to improve progressive disclosure.

Trim the advisory "Principles" section to factual guidance or fold it into Rules, removing opinionated prose like "always feels more natural".

Add an explicit validation/checklist step for the trickier patterns (e.g., verify drag on touch devices per Rule 1, confirm cleanup listeners per Rule 7) to raise workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body is mostly dense, executable TSX and tight decision tables with little padding of concepts Claude already knows, but the advisory "Principles" prose (e.g., "always feels more natural") and the overall length (~590 lines) leave minor instances that could be trimmed — anchor 4 rather than the fully lean anchor 5.	4 / 5
Actionability	Dozens of copy-paste-ready TSX examples cover the common cases (draggable card, drag-to-dismiss sheet, reorderable list, swipe, long-press hook, word reveal, counter, SVG draw-on, progress ring, cursor follower, shimmer, loading button, pulse dot, plus a combined end-to-end example), each with real imports and motion APIs — matching anchor 5.	5 / 5
Workflow Clarity	The "When to Activate" list and the two Decision Guidance tables give a clear selection sequence from need to API, and the end-to-end example composes patterns, but there are no explicit validation checkpoints — acceptable for non-destructive animation patterns, placing this at anchor 4 rather than the checkpointed anchor 5.	4 / 5
Progressive Disclosure	No bundle files exist and everything is inlined into a single ~590-line SKILL.md; section headers give good structure, but the large catalog of code examples is content that would more naturally live in one-level-deep reference files, fitting anchor 3 (structure present, content that should be separate is inline) rather than anchor 4.	3 / 5
	Total	16 / 20 Passed

Description

88%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, specific description that pairs a comprehensive capability list with an explicit "Use when..." trigger clause and clear dependency scoping. Its main weakness is trigger-term breadth and a minor overlap risk with sibling motion skills because the trigger clause does not itself signal the "advanced" niche.

Suggestions

Broaden the trigger clause with natural variations users say (e.g., "swipe gestures", "scroll reveal", "loading/hover animations") to lift trigger-term coverage.

Add a qualifier to the "Use when" clause (e.g., "Use when building advanced ... and motion-patterns is not enough") to reduce overlap risk with the sibling motion-patterns skill.

Optionally surface a file-extension or library-anchor term (e.g., "with the motion/react library") to sharpen distinctiveness.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions — "drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree" — giving comprehensive coverage rather than the "several actions, minor gaps" of anchor 4.	5 / 5
Completeness	Explicitly answers both what (the enumerated advanced motion patterns plus "Requires motion-foundations") and when ("Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js"), matching the anchor-5 example that pairs a concrete capability list with a concrete trigger clause.	5 / 5
Trigger Term Quality	The trigger clause surfaces natural phrases a user would say ("drag and drop", "gestures", "text or SVG animation", "imperative animation sequences", "React or Next.js"), but common variations like "swipe", "scroll animation", or "loading/hover animation" are absent, matching anchor 4 rather than the exhaustive synonym coverage of anchor 5.	4 / 5
Distinctiveness Conflict Risk	The "Advanced" framing, advanced-only feature list, and "Requires motion-foundations" carve a clear niche, but closely related skills exist (motion-foundations, motion-patterns) and the trigger clause omits "advanced", leaving minor overlap risk with a sibling motion skill — anchor 4 rather than the minimal-conflict anchor 5.	4 / 5
	Total	18 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (598 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: skills/motion-advanced/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.