skills.rest
timequity
timequityOFFICIAL
Explore all skills by this author →
GitHub

mobile-ui

Automate mobile UI interactions for React Native apps with animations and gestures.

6|Updated Dec 7, 2025
Search Tags:#animations#react-native#gestures#mobile-ui#bottom-sheet#platform-design
One-click install
npx skills add https://github.com/timequity/plugins --skill mobile-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui
Source: https://github.com/timequity/plugins/tree/main/craft-coder/mobile/mobile-ui
Command: npx skills add https://github.com/timequity/plugins --skill mobile-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates common mobile UI patterns, gestures, and platform design considerations to speed up building polished mobile interfaces.

Core Features & Use Cases

  • Animations: Patterns and snippets for React Native animations using Reanimated to create fluid card motions and transitions.
  • Gestures: Gesture handling patterns (press, swipe, drag) for intuitive interactions.
  • Bottom Sheet: Guidance for implementing bottom sheets with popular libraries.
  • Platform Design: iOS and Android design guidelines to ensure a native feel and consistent UX.

Quick Start

Apply mobile UI patterns to a sample screen by integrating a bottom sheet, a tappable card with spring animation, and a gesture-driven interaction.

Frequently Asked Questions about mobile-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add animations to React Native mobile screens?▼

React Native animations use Reanimated's useAnimatedStyle and withSpring to create fluid transitions. This Skill provides patterns for card motions and animated interactions that work across iOS and Android without manual platform-specific code.

What's the best way to handle gestures like swipe and drag in React Native?▼

Gesture handling in React Native uses the Gesture and GestureDetector APIs to recognize press, swipe, and drag interactions. This Skill consolidates gesture patterns for intuitive mobile interactions that respond naturally to user input.

How do I implement a bottom sheet in React Native?▼

Bottom sheets are modal overlays that slide up from the screen bottom. This Skill provides integration guidance for bottom-sheet libraries and shows how to combine them with animations and gestures for polished mobile UX.

Do I need to write separate code for iOS and Android design patterns?▼

iOS and Android have distinct design guidelines and native behaviors. This Skill handles platform design cues so your React Native app follows each platform's conventions, delivering a consistent native feel without duplicating implementation logic.

Can I use animated cards with gesture interactions together?▼

Yes. This Skill combines animated styles, spring physics, and gesture detection into unified patterns. You can build tappable cards that animate on interaction, responding to swipes, presses, and drags with synchronized motion.

Related Skills

Explore More Design & Creative Skills→
beemanbeeman
12

heroui-native

Integrate HeroUI Native components into React Native apps with Uniwind theming.

Community
Intermediate
Lyiu-10Lyiu-10

react-native-design

Build React Native apps with StyleSheet, React Navigation 6+, and Reanimated 3.

Community
Intermediate
tuyenhttuyenht

State Management

Implement frontend state management across JavaScript frameworks like Redux, Zustand, Pinia.

Community
Intermediate
HsnSaboorHsnSaboor

mobile-development

Guide cross-platform and native mobile app development with React Native, Flutter, Swift, and Kotlin.

Community
Advanced