How does it help with gesture-driven navigation?

The skill provides standardized implementations for the Gesture Detector API, making it easy to build swipeable and pannable components.

Which mobile framework is primarily supported?

This skill focuses on React Native patterns, specifically utilizing libraries like Reanimated, Gesture Handler, and Gorhom Bottom Sheet.

Can I use this for animation implementation?

Absolutely. It includes patterns for Reanimated shared values, spring animations, and animated styles for high-performance mobile UI.

Does it include mobile accessibility and safe areas?

Yes, it incorporates best practices for respecting safe area boundaries on modern mobile devices and native navigation behaviors.

Does this skill handle platform-specific UI differences?

Yes, it provides guidance for iOS-specific features like SF Symbols and Android-specific standards like Material Design 3.

Mobile UI Patterns

Name: Mobile UI Patterns
Author: timequity

bytimequity

0•

Mobile Development

Implements fluid mobile UI patterns, advanced animations, and platform-specific design systems for iOS and Android.

The Mobile UI skill empowers Claude to build high-quality mobile interfaces by providing standardized patterns for React Native and native design principles. It specializes in sophisticated animations using Reanimated, complex interactive gestures with Gesture Handler, and the implementation of popular components like bottom sheets. By incorporating specific guidelines for iOS (SF Symbols, Safe Areas) and Android (Material Design 3), this skill ensures that mobile applications don't just function correctly but also feel native and responsive to the platform's specific user experience standards.

Key Features

01Android-specific implementation for Material Design 3 and back-button logic

02Sophisticated animations using React Native Reanimated shared values

03Interactive gesture handling with React Native Gesture Handler

040 GitHub stars

05iOS-specific design guidance including SF Symbols and safe area usage

06Pre-configured patterns for bottom sheets and common mobile layouts

Use Cases

01Implementing swipe-to-dismiss or pan-based navigation gestures

02Building cross-platform layouts that adapt to iOS and Android design systems

03Creating interactive card components with spring-based press animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add timequity/plugins mobile

For use in Claude.ai and ChatGPT

Download Skill