ui-mobile

Apply accessible mobile UI patterns for React Native touch interactions.

Updated Jan 12, 2026

Search Tags:#accessibility #react-native #design-patterns #touch-targets #mobile-ui #platform-differences

Ready to run

npx skills add https://github.com/prince-appiah/green-plate-mobile --skill ui-mobile-prince-appiah

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/prince-appiah/green-plate-mobile/tree/main/.github/skills/ui-mobile
Command: npx skills add https://github.com/prince-appiah/green-plate-mobile --skill ui-mobile-prince-appiah

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile UI design often struggles with accessibility, touch targets, and platform differences across iOS and Android. This Skill provides a comprehensive set of mobile UI patterns and guidelines to ensure thumb-friendly, accessible, and consistent interfaces in React Native.

Core Features & Use Cases

Accessible components: enforce 44pt touch targets, visible focus states, and accessible props.
Cross-platform consistency: unify iOS and Android visuals while respecting platform conventions.
Layout and typography discipline: spacing, safe areas, contrast, and responsive typography.

Quick Start

Create a sample screen in your React Native project that demonstrates a primary button, a text input, and a list item, all with 44pt touch targets, accessible labels, and high contrast colors.

Frequently Asked Questions about ui-mobile

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

FAQPage Schema

How do I enforce minimum touch targets in React Native for accessibility?▼

To enforce accessible touch targets in React Native, apply mobile UI patterns that ensure 44pt minimum dimensions, visible focus states, and appropriate accessible props for reliable interactions across iOS and Android.

Can I unify iOS and Android visuals while respecting platform conventions in React Native?▼

You can unify iOS and Android visuals in React Native by applying mobile UI patterns that standardize spacing, typography, and safe areas while respecting platform-specific conventions for a consistent cross-platform experience.

What's the best way to handle safe areas and layout behaviors for accessible mobile UI?▼

The best way to handle safe areas and layout behaviors is to apply mobile UI patterns that enforce spacing discipline, responsive typography, and color contrast standards, ensuring an inclusive mobile experience.

Does this React Native UI skill work for building reusable components like buttons and inputs?▼

This React Native UI skill is applicable to building reusable components such as primary buttons, text inputs, and list items, ensuring they all have 44pt touch targets, accessible labels, and high contrast colors.

Why do my mobile UI touch interactions fail across different platforms?▼

Mobile UI touch interactions often fail across platforms due to ignored safe areas, inadequate touch target sizes, and platform differences, which can be fixed by enforcing 44pt targets and cross-platform consistency patterns.