mobile-ui

Implement Expo mobile UI patterns for tabs, keyboards, modals, and streaming API responses.

Updated Mar 10, 2026

Search Tags:#components #ui/ux #app development #react native #expo #mobile ui

Ready to run

npx skills add https://github.com/nagasriramnani/RunFit --skill mobile-ui-nagasriramnani

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-ui
Source: https://github.com/nagasriramnani/RunFit/tree/main/.local/skills/mobile-ui
Command: npx skills add https://github.com/nagasriramnani/RunFit --skill mobile-ui-nagasriramnani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and reusable patterns to improve the user interface and overall functionality of mobile applications, particularly within the Expo framework.

Core Features & Use Cases

UI Components & Patterns: Offers best practices for common UI elements like tab bars, sheets, and keyboard handling.
API Integrations: Demonstrates how to stream API responses for a better user experience.
App Asset Generation: Provides guidelines for creating app icons and splash screens.
Use Case: When building a new feature that requires a modal or sheet for user input, consult this Skill for best practices on presentation, interaction, and dismissal.

Quick Start

Refer to the references/sheets.md file for guidance on implementing modal or form sheet presentations.

Frequently Asked Questions about mobile-ui

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

FAQPage Schema

How do I implement modal and sheet presentations in Expo Router?▼

Modal and sheet presentations in Expo Router are implemented using specific navigation patterns. This Skill provides reference guides, such as `sheets.md`, detailing best practices for presenting, interacting, and dismissing user input forms within your Expo project.

What is the best way to handle keyboard interactions in a React Native app?▼

Handling keyboard interactions in React Native is best achieved using `react-native-keyboard-controller`. This Skill provides robust patterns and guidance to manage keyboard behavior smoothly, preventing input fields from being obscured during user typing.

Can I stream API responses in an Expo application?▼

Yes, you can stream API responses in an Expo application using `expo/fetch`. This Skill demonstrates how to implement streaming for API responses, which significantly improves user experience by displaying data incrementally.

How do I build a native tab bar for my Expo app?▼

Building a native tab bar for an Expo app involves utilizing Expo-specific navigation configurations. This Skill offers best practices and reusable patterns for implementing native tab bar interfaces to enhance your mobile application's UI.

Does this Skill provide guidance for generating app icons?▼

Yes, this Skill provides guidelines for AI-assisted app icon generation. It covers creating app icons and splash screens, addressing common mobile development asset challenges for Expo projects.

Why do I need a specific Skill for mobile UI components in Expo?▼

You need a specific Skill for Expo mobile UI components to solve framework-specific challenges. It offers targeted guidance for streaming APIs, keyboard handling, and modal presentations that generic React Native resources often do not address.