skills.rest
prince-appiah
prince-appiahCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/prince-appiah/green-plate-mobile --skill ui-mobile-prince-appiah
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
alinaqialinaqi
705

react-native

Provide React Native development patterns for structure, state, and testing.

Community
Intermediate
aberrantCodeaberrantCode
1

ui-mobile

Provide mobile UI design patterns and accessibility rules for React Native, iOS, and Android interfaces.

Community
Intermediate
chaitinchaitin
5

react-native-design

Standardizes styling, navigation, and motion patterns for React Native apps using React Navigation and Reanimated.

Official
Advanced
shirulotshirulot

animated-component-libraries

Integrate pre-built animated React components from Magic UI and React Bits.

Community
Intermediate