motion

Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

1.33x

Quality

92%

Does it follow best practices?

Impact

100%

1.33x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

44%

Order Status Notification System

AnimatePresence correct usage

Criteria

Without context

With context

Correct package name

100%

Correct import path

100%

AnimatePresence placement

100%

Unique key on animated children

100%

Exit animation defined

100%

Stagger entrance via variants

100%

Container variant propagation

100%

Entrance animation defined

100%

motion component used

100%

12%

Animated Product Cards for a Next.js Storefront

Next.js App Router + accessibility setup

Criteria

Without context

With context

"use client" directive

100%

Optimized Next.js import

100%

No transition-* Tailwind classes

100%

MotionConfig with reducedMotion

100%

Provider in root layout

100%

whileHover animation

100%

whileFocus animation

100%

Correct package in install.sh

100%

motion component used

100%

tabIndex present

100%

19%

Animation Performance Audit for a SaaS Dashboard

LazyMotion bundle optimization

Criteria

Without context

With context

LazyMotion wrapper

100%

domAnimation feature set

100%

m component instead of motion

100%

No direct height animation

25%

100%

layout prop for panel

100%

No top/height in whileHover

100%

GPU-accelerated hover

100%

CHANGES.md present

100%

Bundle reason in CHANGES.md

100%

Reflow reason in CHANGES.md

100%

Repository: secondsky/claude-skills
Commit: 90d6bd7

Evaluated: 29 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Order Status Notification System Animated Product Cards for a Next.js Storefront Animation Performance Audit for a SaaS Dashboard

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.