Can I use this for mobile-style gestures?

Yes, it includes specialized patterns for drag interactions, swipe-to-dismiss, and tactile tap feedback common in mobile-first design.

Is accessibility included in the animation design?

Yes, the core philosophy emphasizes respecting user preferences for reduced motion and ensures animations enhance rather than distract from usability.

Can it help with complex list reordering?

Absolutely. It provides patterns for LayoutGroup and layout props that automatically animate position changes when items are added, removed, or reordered.

How does this skill handle animation performance?

The skill prioritizes GPU-accelerated properties like transform and opacity while avoiding expensive layout properties to ensure 60fps performance.

Which animation library does this skill utilize?

This skill is specifically optimized for Framer Motion, providing implementation patterns tailored for React and Next.js projects.

Motion & Interaction Designer

Name: Motion & Interaction Designer
Author: rabiasohail098

byrabiasohail098

Design Tools

Designs purposeful, performant UI animations and transitions using Framer Motion for React and Next.js applications.

About

The Motion & Interaction Designer skill transforms Claude into a specialized frontend motion expert capable of crafting high-quality user experiences. It provides a rigorous framework for implementing animations that are purposeful, subtle, and performant, avoiding common pitfalls like layout thrashing or over-animation. By utilizing Framer Motion best practices, the skill helps developers implement everything from simple hover states to complex scroll-triggered reveals, staggered list transitions, and gesture-based interactions while ensuring full accessibility and support for reduced-motion preferences.

Key Features

Advanced gesture support including drag, tap, and swipe-to-dismiss
Pre-configured patterns for layout transitions and staggered list reveals
Scroll-triggered animation logic using viewport and parallax effects
0 GitHub stars
Built-in accessibility considerations for reduced-motion system settings
Expert implementation of GPU-accelerated Framer Motion animations

Use Cases

Creating dynamic, self-sorting lists with layout-based animations
Enhancing UI feedback with tactile button and card interactions
Building smooth entry/exit sequences for modals, dropdowns, and overlays

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rabiasohail098/todo-app-hackthon2 motion-interaction-designer

For use in Claude.ai and ChatGPT

Download Skill

GitHub