Will these animations affect my site performance?

The skill enforces strict timing guidelines (50-400ms) and forbids excessive or looping animations to ensure a snappy, high-performance user interface.

Does it work with existing animation patterns?

Yes, the workflow includes a mandatory analysis phase to match and replicate your project's existing animation conventions.

What animation library is required?

This skill is specifically designed for projects using Framer Motion.

Does this skill support accessibility?

Yes, the skill mandates the use of useReducedMotion to ensure animations are disabled or simplified for users with motion sensitivities.

Framer Motion Design Expert

Name: Framer Motion Design Expert
Author: fusengine

byfusengine

0•

Design Tools

Integrates standardized Framer Motion animations and micro-interactions into every frontend component automatically.

The Framer Motion Design Expert skill automates the implementation of professional, accessible, and high-performance animations within your React applications. It enforces a rigorous workflow that includes analyzing existing codebase patterns, implementing mandatory staggered entrance effects for lists, and applying consistent hover and scroll interactions. By strictly following optimized timing guidelines and accessibility standards like 'prefers-reduced-motion', this skill ensures that motion design enhances the user experience without sacrificing performance or inclusivity.

Key Features

01Automated Framer Motion variant and pattern implementation

02Enforcement of professional timing and easing guidelines

030 GitHub stars

04Standardized hover and active state micro-interactions

05Mandatory staggered animations for list and grid containers

06Built-in accessibility support for reduced motion preferences

Use Cases

01Polishing UI components with subtle micro-interactions and hover states

02Standardizing animation patterns across a large frontend codebase

03Orchestrating complex staggered entrance animations for data-heavy views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents adding-animations

For use in Claude.ai and ChatGPT

Download Skill