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

0•

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.

Key Features

01Android Material Design 3 and hardware back-button handling patterns

02Standardized Bottom Sheet configurations with customizable snap points

03React Native Reanimated integration for smooth, shared-value animations

040 GitHub stars

05Gesture Handler implementation for pan, swipe, and touch interactions

06Platform-specific styling guides for iOS including SF Symbols and Safe Areas

Use Cases

01Optimizing cross-platform mobile layouts to respect native platform guidelines

02Building fluid, interactive card components with spring animations and gestures

03Implementing context-aware bottom sheets for navigation or detail views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add timequity/plugins mobile-ui

For use in Claude.ai and ChatGPT

Download Skill