skills.rest
alinaqi
alinaqiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-scaffold

Set up Next.js, Vite, or React Native projects with Tailwind and shadcn/ui, then verify the build.

Community
Advanced
lucasxflucasxf
3

mobile-design-system

Generates mobile UI design system with color tokens, component recipes, and layout patterns.

Community
Intermediate
benaorbenaor

react-performance

Profile React Native apps to identify and optimize rendering, startup, and memory bottlenecks.

Community
Advanced
FutureAtomsFutureAtoms
1

ui-ux-component-design

Design mobile UI components with Material Design 3 and Apple HIG specifications.

Community
Advanced