ui-mobile

Guide React Native mobile UI development with accessibility and platform standards.

705|56|Updated Dec 26, 2025

Search Tags:#accessibility #design system #ios #android #react native #ux #mobile ui

Ready to run

npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-mobile-alinaqi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/alinaqi/claude-bootstrap/tree/main/skills/ui-mobile
Command: npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-mobile-alinaqi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and reusable patterns for building accessible, performant, and platform-consistent mobile user interfaces using React Native.

Core Features & Use Cases

Accessibility Standards: Enforces critical rules for touch targets, color contrast, and labels.
Platform Consistency: Offers guidance on iOS and Android design language differences.
Component Patterns: Provides ready-to-use examples for Cards, Buttons, Input Fields, and Lists.
Navigation Patterns: Demonstrates best practices for Bottom Tab Bars and Headers.
Use Case: Quickly implement a new feature screen, ensuring all interactive elements meet minimum touch target sizes and color contrast ratios for optimal user experience on both iOS and Android.

Quick Start

Implement a new mobile screen following the provided accessibility standards and component patterns.

Frequently Asked Questions about ui-mobile

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

FAQPage Schema

How do I make React Native UI components meet WCAG 2.1 AA accessibility standards?▼

To meet WCAG 2.1 AA standards in React Native, apply specific patterns for minimum touch targets, color contrast ratios, and labels. This ensures interactive elements are fully accessible to users with varying abilities on mobile platforms.

What's the best way to ensure platform consistency for mobile UIs across iOS and Android?▼

The best way to ensure platform consistency is to follow both Human Interface Guidelines and Material Design. This approach provides tailored React Native component patterns that respect the unique design languages and interaction expectations of iOS and Android.

How do I implement accessible touch targets and color contrast in a React Native app?▼

Implement accessible touch targets and color contrast by applying specific React Native component patterns. These guidelines enforce critical accessibility rules, ensuring all interactive elements meet the required size dimensions and visual contrast ratios for optimal usability.

Does this React Native mobile UI guide include navigation and animation patterns?▼

Yes, this React Native mobile UI guide includes comprehensive navigation and animation patterns. It demonstrates best practices for implementing bottom tab bars, headers, and loading states to ensure smooth and performant user experiences across platforms.