Does this skill support RTL languages like Hebrew?

Yes, it includes specific presets like slideInRight and staggerItemRight designed for natural motion in RTL (Right-to-Left) user interfaces.

Is this compatible with the latest version of React?

Yes, the skill is specifically tailored for React 19 and uses the updated 'motion/react' package conventions.

Does it handle exit animations automatically?

The skill provides mandatory patterns for using AnimatePresence, which is required for Framer Motion to correctly animate components as they are removed from the DOM.

Why does the skill discourage inline animation values?

Centralizing animations in a dedicated library ensures design consistency, makes global changes easier, and prevents performance issues caused by unoptimized inline objects.

How does this skill ensure high-performance animations?

It enforces the use of hardware-accelerated properties like opacity and transform while discouraging layout-shifting properties that drop frame rates.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: yonatangross

byyonatangross

•

Design Tools

Implements standardized, high-performance Framer Motion animations for React applications using centralized presets and RTL-aware patterns.

This skill provides a comprehensive framework for adding professional animations to React 19 applications using Framer Motion. It streamlines UI development by offering a library of pre-configured, RTL-aware presets for page transitions, modal entrances, staggered lists, and micro-interactions. By enforcing a centralized animation architecture, it ensures a consistent motion language across the entire codebase while optimizing for 60fps performance and accessibility through hardware-accelerated transforms.

Key Features

01RTL-aware animation patterns optimized for Hebrew and Arabic layouts

02Standardized AnimatePresence implementation for smooth enter/exit states

03Centralized animation preset library for maintainable UI motion

0429 GitHub stars

05Comprehensive micro-interaction presets for hover, tap, and loading states

06Performance-first strategy targeting 60fps using transform-based transitions

Use Cases

01Implementing smooth, hardware-accelerated page transitions between React routes

02Creating staggered loading sequences for data-heavy lists and grid layouts

03Adding accessible modal and dialog entrance/exit animations with backdrop effects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/skillforge-claude-plugin motion-animation-patterns

For use in Claude.ai and ChatGPT

Download Skill