Can I use this for complex gesture interactions?

Absolutely. It provides specific implementation patterns for drag, swipe-to-dismiss, and spring-physics based interactions.

Which animation library does this skill use?

This skill is specifically optimized for Framer Motion version 11+ within React and Next.js environments.

What is the recommended timing for UI animations?

The skill follows a 'sweet spot' of 200-500ms for most transitions to ensure animations feel responsive without being distracting.

Are the animations generated by this skill mobile-friendly?

Yes, it prioritizes GPU-accelerated properties like transform and opacity to ensure smooth 60fps performance on mobile devices.

How does this skill handle user accessibility?

The skill follows Motion UX principles that include respecting 'prefers-reduced-motion' settings to ensure an inclusive user experience.

Motion & Interaction Designer

Name: Motion & Interaction Designer
Author: NaveedTechLab

byNaveedTechLab

デザインツール

Designs purposeful, high-performance UI animations and interactions using Framer Motion for React and Next.js applications.

概要

The Motion & Interaction Designer skill empowers Claude to act as an expert UI/UX motion engineer, specializing in production-grade Framer Motion implementations. It provides standardized patterns for state transitions, enter/exit animations, staggered lists, and scroll-triggered reveals while strictly adhering to modern UX principles. The skill focuses on GPU-accelerated properties to ensure 60fps performance and includes built-in considerations for accessibility, such as respecting reduced motion preferences. It is an essential tool for frontend developers looking to transform static interfaces into fluid, interactive user experiences.

主な機能

Advanced scroll-triggered reveals and parallax effect configurations
Implementation of GPU-accelerated Framer Motion animations
Performance-optimized layout transitions and list reordering
0 GitHub stars
Standardized patterns for hover, tap, and gesture interactions
Built-in support for accessibility and reduced motion media queries

ユースケース

Implementing interactive gesture-based components like draggable cards and sliders
Creating staggered reveal animations for dynamic lists and feature grids
Designing smooth modal, dropdown, and tooltip enter/exit transitions

概要

主な機能

Advanced scroll-triggered reveals and parallax effect configurations
Implementation of GPU-accelerated Framer Motion animations
Performance-optimized layout transitions and list reordering
0 GitHub stars
Standardized patterns for hover, tap, and gesture interactions
Built-in support for accessibility and reduced motion media queries

ユースケース

Implementing interactive gesture-based components like draggable cards and sliders
Creating staggered reveal animations for dynamic lists and feature grids
Designing smooth modal, dropdown, and tooltip enter/exit transitions