framer-motion

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

Quality

77%

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 ./.agents/skills/framer-motion/SKILL.md

Quality

Content

80%

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

A concise, highly actionable pattern catalog with executable JSX for all 12 principles. It loses points on workflow clarity and progressive disclosure because it is a flat inline catalog with no usage workflow or overview-to-detail navigation.

Suggestions

Add a short usage workflow at the top, e.g. "Identify which principle fits the motion, copy the snippet, then tune duration/easing to match the UI's timing scale" to give the catalog a clear application sequence.

Introduce a brief overview that distinguishes quick reference (the snippets) from deeper guidance, or move the per-principle detail into a references file, to create one-level-deep progressive disclosure.

Define the undefined variables in examples (e.g. `items` and `itemVariant` in the Stagger Children snippet) so each example is fully self-contained.

Dimension	Reasoning	Score
Conciseness	The body is lean — minimal prose, concise section headers, and tight code examples with only essential inline comments — and never explains concepts Claude already knows, so every token earns its place.	3 / 3
Actionability	Each principle is shown as concrete, executable Framer Motion JSX with real props and values (animate, variants, transition, whileHover), giving copy-paste-ready guidance rather than pseudocode.	3 / 3
Workflow Clarity	The 12 principles are presented as an organized numbered catalog rather than a sequenced process, with no usage guidance on how to select or apply a pattern; while no risky operations need validation, the lack of any usage workflow keeps it below the top anchor.	2 / 3
Progressive Disclosure	The content is well-organized into clear sections but is a single ~180-line monolithic file with no overview/detail split and no external references, so there is no progressive disclosure structure beyond inline sectioning.	2 / 3
	Total	10 / 12 Passed

Description

75%

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, niche-specific description with an explicit trigger and clear what/when coverage. Its only gaps are a single named action and missing keyword variations, which keep specificity and trigger term quality at the mid level.

Suggestions

Enumerate concrete actions to lift specificity, e.g. "Use when implementing Disney's 12 animation principles — squash/stretch, anticipation, follow-through, timing — with Framer Motion in React applications."

Add common natural-language variations users would say, such as "animations", "transitions", and "microinteractions", to broaden trigger term coverage.

Dimension	Reasoning	Score
Specificity	The description names a concrete domain and a single action — "implementing Disney's 12 animation principles with Framer Motion in React applications" — but lists only one action rather than multiple specific concrete actions, so it falls short of the top anchor.	2 / 3
Completeness	It explicitly answers both what (implementing the 12 animation principles with Framer Motion in React) and when via an explicit "Use when" trigger clause.	3 / 3
Trigger Term Quality	It includes relevant natural terms like "Framer Motion", "React applications", and "animation principles", but omits common variations a user might say such as "animations", "transitions", "motion", or "microinteractions".	2 / 3
Distinctiveness Conflict Risk	The niche is sharply defined — Disney's 12 animation principles via Framer Motion in React — making it clearly distinguishable and unlikely to trigger for the wrong skill.	3 / 3
	Total	10 / 12 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: calesthio/OpenMontage
Path: .agents/skills/framer-motion/SKILL.md
Commit: 0af32ce

Reviewed: 1 day 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.