mobile-ui

Establish consistent mobile UI patterns for Expo-based React Native apps.

Updated Jun 21, 2026
One-click install
npx skills add https://github.com/akhilksap2026/YMSNOW27032026 --skill mobile-ui-akhilksap2026
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-ui
Source: https://github.com/akhilksap2026/YMSNOW27032026/tree/main/replit/.local/skills/mobile-ui
Command: npx skills add https://github.com/akhilksap2026/YMSNOW27032026 --skill mobile-ui-akhilksap2026

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates mobile UI best practices and references to help teams implement consistent, accessible, and polished Expo-based interfaces across apps, reducing fragmentation and ambiguity.

Core Features & Use Cases

  • Centralized guidelines for native tabs, modal sheets, keyboard handling, and asset generation to speed implementation.
  • Reusable patterns for navigation, overlays, and responsive UI tailored for React Native + Expo projects.
  • Real-world use: adopt a consistent tab bar with liquid glass effects, streaming data in Expo apps, and standardized app icon creation.

Quick Start

Review the provided UI references and apply the guidelines to your next Expo mobile screen design.

Frequently Asked Questions about mobile-ui

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

FAQPage Schema
How do I set up consistent navigation tabs and modals in an Expo React Native app?

To set up consistent navigation tabs and modals in Expo React Native, apply reusable UI patterns for native tab bars and modal sheets to reduce interface fragmentation and ensure accessibility.

What is the best way to handle keyboard input without breaking my mobile UI layout?

The best way to handle keyboard input in React Native is to apply standardized mobile UI guidelines for keyboard handling, preventing layout shifts and ensuring inputs remain visible during text entry.

Does this mobile UI approach work with Expo projects that use liquid glass effects?

Yes, this mobile UI approach works with Expo projects and includes specific reusable patterns for adopting tab bars with liquid glass effects and streaming data interfaces.

How do I standardize app icons and assets across multiple React Native screens?

To standardize app icons and assets across React Native screens, follow centralized asset generation guidelines and reference patterns that enforce consistent visual implementation throughout your mobile project.

Do I need YAML frontmatter to implement these React Native UI patterns?

Yes, implementing these React Native UI patterns requires YAML frontmatter with mandatory name and description fields, while recognizing optional scripts, references, and assets to organize your mobile UI guidelines.

Why does mobile UI fragmentation occur in Expo apps and how can I reduce it?

Mobile UI fragmentation in Expo apps occurs due to ambiguous implementation practices, and you can reduce it by consolidating best practices for overlays, tabs, and responsive layouts into a single reference.