ui-mobile

Guide React Native mobile UI development with WCAG 2.1 AA accessibility standards.

Updated Feb 8, 2026
One-click install
npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-mobile-adigunq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/AdigunQ/ralph-smart/tree/main/knowledges/bootstrap_skills/ui-mobile
Command: npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-mobile-adigunq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for designing and implementing user interfaces for mobile applications, ensuring accessibility, platform consistency, and a premium user experience.

Core Features & Use Cases

  • Accessibility Standards: Enforces critical rules for touch targets, color contrast, visibility, and labels.
  • Platform Consistency: Details iOS and Android design language differences and platform-specific code.
  • Component Patterns: Offers ready-to-use patterns for cards, buttons, input fields, and lists.
  • Use Case: A React Native developer can use this Skill to quickly reference the correct minimum touch target size for buttons or the appropriate color contrast ratios for text to ensure their app is usable by everyone.

Quick Start

Apply the mobile UI design standards to ensure all interactive elements have touch targets of at least 44x44 points.

Frequently Asked Questions about ui-mobile

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

FAQPage Schema
How do I build accessible React Native mobile UIs that meet WCAG 2.1 AA standards?

To build accessible React Native mobile UIs, apply WCAG 2.1 AA standards by ensuring touch targets are at least 44x44 points, maintaining proper color contrast ratios for text, and adding accessibility labels to interactive elements.

What is the minimum touch target size for mobile UI components on iOS and Android?

The minimum touch target size for mobile UI components is 44x44 points, ensuring platform consistency and accessibility compliance for both iOS Human Interface Guidelines and Android Material Design patterns.

How do I ensure platform consistency between iOS and Android design languages in a mobile app?

Ensure platform consistency between iOS and Android by applying platform-specific design languages, using distinct component patterns for cards and buttons, and implementing platform-specific code that adheres to Human Interface Guidelines and Material Design.

Can I use this mobile UI design guide for React Native component patterns like lists and input fields?

Yes, you can use this mobile UI design guide for React Native to implement ready-to-use component patterns for cards, buttons, input fields, and lists while adhering to accessibility standards and platform-specific design guidelines.

What are the best practices for mobile UI typography and spacing to maintain premium user experience?

Best practices for mobile UI typography and spacing involve following essential design principles that enforce color contrast, visibility, and platform consistency to deliver a premium user experience in React Native applications.

Why does my mobile UI fail accessibility checks for color contrast and visibility?

Mobile UI fails accessibility checks when color contrast ratios and visibility do not meet WCAG 2.1 AA standards, requiring adjustments to text contrast and interactive element visibility for full compliance.