skills.rest
Vishnugupta2711
Vishnugupta2711COMMUNITY
Explore all skills by this author →
GitHub

ui-mobile

Codify accessible cross-platform React Native UI patterns for iOS and Android.

1|1|Updated Mar 4, 2026
Search Tags:#accessibility#cross-platform#react-native#design-patterns#touch-targets#mobile-ui
One-click install
npx skills add https://github.com/Vishnugupta2711/gigHood --skill ui-mobile-vishnugupta2711
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/Vishnugupta2711/gigHood/tree/main/.agents/skills/ui-mobile
Command: npx skills add https://github.com/Vishnugupta2711/gigHood --skill ui-mobile-vishnugupta2711

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Historically, teams struggle to maintain accessible, consistent mobile interfaces across React Native and native platforms. This guide codifies cross-platform UI patterns to accelerate delivery while upholding usability standards.

Core Features & Use Cases

  • Accessible touch targets (44x44 minimum) for all interactive elements across iOS and Android.
  • Platform-aware styling and patterns to ensure a native look and feel.
  • Reusable component patterns and guidelines for layout, typography, color, and motion across the app.

Quick Start

Provide a ready-to-use mobile UI pattern guide for a React Native project, focusing on accessibility and cross-platform consistency.

Frequently Asked Questions about ui-mobile

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

FAQPage Schema
How do I ensure accessible touch targets in a React Native mobile UI?▼

Accessible touch targets in a React Native mobile UI require a minimum interactive area of 44x44 points for all elements across iOS and Android. This standard prevents mis-taps and maintains baseline usability compliance.

What is the best way to maintain cross-platform consistency for mobile UI components?▼

Maintaining cross-platform consistency involves codifying reusable component patterns for layout, typography, color, and motion. This approach ensures a native look and feel while upholding UI quality across iOS and Android.

Does this guide cover platform-aware styling for both iOS and Android?▼

Yes, the guide covers platform-aware styling for both iOS and Android. It defines specific patterns to ensure your React Native app delivers a native look and feel while maintaining accessible focus states and color contrast.

How do I start implementing accessibility guidelines in a React Native project?▼

To start implementing accessibility guidelines, use a ready-to-use mobile UI pattern guide focused on cross-platform consistency. It provides clear rules and hands-on examples for touch targets, color contrast, and focus states.

What mobile UI patterns are needed for accessible color contrast and focus states?▼

Accessible mobile UI patterns require specific color contrast ratios and visible focus states for interactive elements. The guide codifies these requirements with reusable component patterns to ensure consistent UI quality across platforms.

Related Skills

Explore More Design & Creative Skills→
bcwgamesbcwgames

revenuecat

Manage subscriptions, entitlements, and in-app purchases for React Native/Expo apps.

Community
Advanced
viably-labsviably-labs

ui-ux-design-system

Designs accessible SaaS UI/UX systems with tokens, shadcn/ui and Radix components, dark mode, WCAG 2.1 AA compliance, and responsive layouts.

Official
Advanced
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
faw01faw01
18

expo-ui

Create cross-platform mobile UI trees with SwiftUI and Jetpack Compose overrides.

Community
Advanced