What animation libraries are prioritized?

The skill focuses on React Native Reanimated for high-performance, UI-thread animations using spring and timing functions.

Does this skill support React Native?

Yes, it provides specific implementations for popular React Native libraries like Reanimated, Gesture Handler, and Gorhom Bottom Sheet.

Can I use this for complex gesture interactions?

Yes, the skill provides patterns for pan and swipe gestures using React Native Gesture Handler with integrated animation shared values.

Is this skill useful for UI design systems?

Absolutely. It helps bridge the gap between design and code by providing standardized mobile UI patterns and interaction models.

How does it handle iOS and Android differences?

The skill includes specific guidance for both platforms, such as SF Symbols and Safe Area usage for iOS, and Material Design 3 and back-button logic for Android.

Mobile UI Patterns & Animation

Name: Mobile UI Patterns & Animation
Author: timequity

bytimequity

Mobile Development

Implements high-performance mobile animations, gesture handling, and platform-specific design patterns for native-feeling applications.

概要

This skill streamlines mobile application development by providing standardized implementation patterns for complex UI elements. It offers ready-to-use configurations for React Native Reanimated animations, complex gesture interactions via Gesture Handler, and integrated components like bottom sheets. Additionally, it ensures cross-platform consistency by enforcing iOS and Android design standards, such as SF Symbols usage and Material Design 3 principles, helping developers build polished, production-grade mobile experiences with ease.

主な機能

Android Material Design 3 and hardware back-button handling patterns
Standardized Bottom Sheet configurations with customizable snap points
React Native Reanimated integration for smooth, shared-value animations
0 GitHub stars
Gesture Handler implementation for pan, swipe, and touch interactions
Platform-specific styling guides for iOS including SF Symbols and Safe Areas

ユースケース

Optimizing cross-platform mobile layouts to respect native platform guidelines
Building fluid, interactive card components with spring animations and gestures
Implementing context-aware bottom sheets for navigation or detail views

概要

主な機能

Android Material Design 3 and hardware back-button handling patterns
Standardized Bottom Sheet configurations with customizable snap points
React Native Reanimated integration for smooth, shared-value animations
0 GitHub stars
Gesture Handler implementation for pan, swipe, and touch interactions
Platform-specific styling guides for iOS including SF Symbols and Safe Areas

ユースケース

Optimizing cross-platform mobile layouts to respect native platform guidelines
Building fluid, interactive card components with spring animations and gestures
Implementing context-aware bottom sheets for navigation or detail views