skills.rest
artofrawr
artofrawrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-mobile

Identify and organize mobile UI design patterns for React Native and native platforms.

1|Updated Jan 10, 2026
Search Tags:#accessibility#mobile#react-native#ui-patterns#touch-targets#design-systems#platform-differences
One-click install
npx skills add https://github.com/artofrawr/claude-control --skill ui-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/artofrawr/claude-control/tree/main/skills/ui-mobile
Command: npx skills add https://github.com/artofrawr/claude-control --skill ui-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile UI patterns are hard to implement consistently across iOS and Android while meeting accessibility standards, leading to usability gaps and rework.

Core Features & Use Cases

  • Accessible touch targets with a minimum 44pt hit area across all interactive controls.
  • WCAG-compliant color contrast, scalable typography, and visual focus indicators.
  • Platform-aware components and responsive layouts, with safe-area handling for iPhone and Android devices.
  • Use case: quickly prototype a mobile screen with accessible buttons, labels, and navigation that feels native on both major platforms.

Quick Start

Open a mobile project and start implementing thumb-friendly, accessible UI patterns.

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 React Native across iOS and Android?▼

Accessible touch targets require a minimum 44pt hit area for all interactive controls. This pattern ensures usable mobile UI design across iOS and Android platforms without causing usability gaps.

What's the best way to handle safe-area differences for mobile UI patterns on iPhone and Android?▼

Safe-area handling for mobile UI patterns requires platform-aware components that adjust responsive layouts for iPhone and Android devices. This prevents visual overlap with native device notches and navigation bars.

How do I make mobile UI typography scalable and WCAG-compliant?▼

Scalable typography and WCAG-compliant color contrast are applied through organized mobile UI patterns. This ensures visual focus indicators and text meet accessibility standards across platforms.

Does this approach work for quickly prototyping native-feeling mobile screens?▼

Yes, you can quickly prototype a mobile screen with accessible buttons, labels, and navigation. The applied UI patterns ensure the interface feels native on both major platforms.

Why do mobile UI patterns cause rework when developing cross-platform apps?▼

Mobile UI patterns cause rework when they are hard to implement consistently across iOS and Android while meeting accessibility standards. Organizing these patterns streamlines cross-platform development.

Related Skills

Explore More Design & Creative Skills→
stancodevstancodev

componente-mobile

Standardize mobile UI component development with design tokens for Next.js/React projects.

Community
Intermediate
xaderlagguixaderlaggui
3

app-ui-design

Design accessible mobile UI systems for iOS and Android.

Community
Advanced
phazurlabsphazurlabs
35

UI Visual Design System

Define visual design systems for typography, color, spacing, and accessibility.

Community
Advanced
aberrantCodeaberrantCode
1

ui-mobile

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

Community
Intermediate