motion-foundations

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this.

Quality

62%

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-foundations/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.

The content is highly actionable with complete, executable code and a strong anti-patterns table, but it is a monolithic reference file with some philosophical padding and no file-based progressive disclosure or explicit workflow checkpoints.

Suggestions

Tighten the Principles section: replace editorial rationale with terse rules so every line earns its place.

Add an explicit numbered 'Building an animated component' workflow with validation checkpoints (e.g. verify initial matches server output, verify shouldAnimate() gate, verify reduced-motion fallback) rather than relying on inline comments in the example.

Consider moving the full token/spring definitions and/or the anti-patterns table into a references/ file linked from SKILL.md to reduce the monolithic inline content and improve progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and code-dense without explaining basics Claude already knows, but the Principles section and editorial lines like "Responsiveness always outranks smoothness. A 60 fps animation that causes input delay is worse than no animation." are philosophical padding that could be tightened.	2 / 3
Actionability	It provides complete, executable artifacts — the motionTokens/springs objects, motionConfig runtime flags, useSafeMotion hook, and a full FadeInCard component — plus an anti-patterns table mapping each violation to a concrete fix, which is copy-paste ready.	3 / 3
Workflow Clarity	Decision tables and the end-to-end FadeInCard example provide an implicit sequence (mount guard → accessibility → device gate → render), but there is no explicit ordered workflow with validation checkpoints; the skill reads as a reference rather than a sequenced process.	2 / 3
Progressive Disclosure	The single ~290-line file is well-organized into clear sections, but there are no bundle/reference files and content that could live separately (full token object, spring map, anti-patterns table) is inline, so disclosure is structural rather than file-based.	2 / 3
	Total	9 / 12 Passed

Description

60%

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 and capability-rich but lacks an explicit when-to-use trigger clause and relies on technical jargon over natural user phrasing. Adding a "Use when..." clause and more common keywords would lift completeness and trigger quality.

Suggestions

Add an explicit 'Use when...' clause naming natural triggers, e.g. 'Use when adding animation to React/Next.js components, setting up motion tokens/springs, or handling reduced-motion and SSR.'

Include common user-facing terms such as 'animation'/'animate' alongside 'motion' so the description matches how users actually phrase the request.

Briefly distinguish the foundation scope from sibling skills (e.g. 'foundation layer consumed by motion-patterns and motion-advanced') to reduce overlap/conflict risk.

Dimension	Reasoning	Score
Specificity	The description enumerates multiple concrete capabilities — "Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety" — matching the anchor for listing several specific concrete actions rather than vague language.	3 / 3
Completeness	It clearly states what the skill provides, but there is no "Use when..." clause or equivalent trigger guidance; the closing "Foundation layer — all other motion skills depend on this" is a dependency note, not a when-to-use trigger, which caps completeness at 2 per the guidelines.	2 / 3
Trigger Term Quality	Terms like "motion/react", "React / Next.js", and "SSR safety" are relevant but fairly technical; common user phrasings like "animation" or "animate" are absent, so coverage has relevant keywords but misses common variations.	2 / 3
Distinctiveness Conflict Risk	The motion/react + React/Next.js niche is fairly specific, but the description does not name or distinguish sibling skills (motion-patterns, motion-advanced), so it could still overlap with those similar skills.	2 / 3
	Total	9 / 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.