How does this help with animation performance?

The skill enforces the use of hardware-accelerated transforms (opacity and transform) and provides a checklist to verify 60fps performance using browser dev tools.

What is the Motion Animation Patterns skill?

It is a specialized capability for Claude Code that provides pre-built Framer Motion presets and implementation patterns for modern React 19 applications.

Why should I use presets instead of inline motion values?

Using centralized presets ensures a consistent motion language across your entire application, simplifies maintenance, and reduces the risk of performance-heavy anti-patterns.

Does this skill support Right-to-Left (RTL) layouts?

Yes, the presets are specifically designed to be RTL-aware, providing natural entry and exit directions for Hebrew and Arabic user interfaces.

Can I use this for page transitions?

Absolutely. It includes specific architectural patterns for using AnimatePresence and motion.div to handle route changes and smooth page exits.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: yonatangross

byyonatangross

•

Design Tools

Implements high-performance Framer Motion animation presets and UX patterns for React 19 applications.

This skill streamlines the integration of Framer Motion (Motion) into React applications by providing a comprehensive library of optimized, RTL-aware animation presets. It ensures consistent motion design across the UI, covering everything from complex page transitions and staggered list reveals to micro-interactions like hover effects and loading skeletons. Designed for performance and maintainability, it mandates best practices such as hardware-accelerated transforms and proper exit animation handling via AnimatePresence, making it an essential tool for creating fluid, professional user experiences.

Key Features

01RTL-aware animations optimized for Hebrew and Arabic layouts

02Performance-optimized micro-interactions for buttons, cards, and modals

0369 GitHub stars

04Standardized animation preset library for consistent UI motion

05Seamless page transition patterns using AnimatePresence

06Pre-built skeleton loaders and staggered list reveal patterns

Use Cases

01Creating engaging list views with staggered entry effects and hover micro-interactions

02Adding professional entrance and exit animations to modals, sheets, and dropdowns

03Implementing smooth, hardware-accelerated page transitions between routes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit motion-animation-patterns

For use in Claude.ai and ChatGPT

Download Skill