skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

ux-ui-guidelines-mobile

Provides mobile UX/UI design guidelines for iOS and Android apps built with Expo and React Native.

16|1|Updated May 5, 2026
Search Tags:#accessibility#material design#design review#dark mode#react native#mobile ux#ios hig
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill ux-ui-guidelines-mobile-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-guidelines-mobile
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/ux-ui-guidelines-mobile
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill ux-ui-guidelines-mobile-aibiz-automatyzacje

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Mobile screens often look cheap or feel non-native because developers lack consolidated guidance on platform conventions, typography, spacing, color systems, accessibility, and interaction patterns. This Skill provides a complete reference of mobile design principles so screens meet iOS HIG and Material 3 standards. ## Core Features & Use Cases - Platform conventions: Decision guidance for iOS HIG vs Material 3, native typography (SF Pro/Roboto), 8pt grid, safe areas, and touch targets. - Interaction & states: Motion and micro-interactions (Reanimated), haptics, gestures, loading/empty/error states, mobile forms with keyboard handling, and navigation patterns (tabs, sheets, modals, lists). - Quality & accessibility: WCAG 2.2 AA contrast rules, VoiceOver/TalkBack support, Dynamic Type, dark mode as redesign, AI-generated UI pitfalls, and a 30+ point pre-merge polish checklist. - Use Case: When building a new settings screen in an Expo app, use this Skill to verify touch target sizes, semantic colors, keyboard types on form inputs, and accessibility labels before merging. ## Quick Start Review my new profile screen component against the mobile UX/UI guidelines and list what needs fixing before merge.

Frequently Asked Questions about ux-ui-guidelines-mobile

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

FAQPage Schema
How do I make a React Native screen feel native on iOS and Android?▼

Follow platform conventions: iOS HIG patterns on iOS and Material 3 on Android, using Platform.select for platform-specific UI while sharing business logic. Use system fonts (SF Pro/Roboto), respect safe areas, and meet touch target minimums of 44pt on iOS and 48dp on Android.

What touch target size should mobile buttons have?▼

Use a minimum of 44pt on iOS and 48dp on Android, with 48-56pt recommended for primary actions. WCAG 2.2 AA sets an absolute floor of 24x24, but smaller targets cause missed taps and accessibility failures.

Should I use Reanimated 3 or Reanimated 4 for mobile animations?▼

Reanimated 4.x is the current major version and requires the New Architecture, while 3.x is legacy. Keep animations GPU-only using transform and opacity, with 200-300ms durations for standard transitions.

How do I implement dark mode correctly in a mobile app?▼

Treat dark mode as a redesign, not a color inversion. Each semantic color token needs separate calibrated light and dark values, avoid pure black backgrounds on OLED screens, and validate contrast at 4.5:1 for body text in both modes.

Why does my AI-generated mobile UI look cheap?▼

Common AI UI pitfalls include excessive decoration, inconsistent spacing outside the 8pt grid, decorative fonts on body text, chaotic non-semantic colors, and mixed iOS/Material conventions. Fix by enforcing spacing tokens, system fonts, semantic color tokens, and one primary action per screen.

How do I test mobile accessibility with VoiceOver and TalkBack?▼

Test on real devices, not simulators, reading the entire flow with the screen reader. Add accessibilityLabel to every icon-only button, verify Dynamic Type at XXXL sizes, check Reduce Motion behavior, and confirm contrast ratios meet WCAG 2.2 AA.

Related Skills

Explore More Design & Creative Skills→
sagittarassagittaras

write-ux-spec

Writes or updates a UX specification document for one screen or flow through guided interview and independent review.

Official
Advanced
aadilmallickaadilmallick

gluestack-ui-v5:validation

Validates gluestack-ui v5 React Native code against styling and component anti-patterns.

Community
Intermediate
Mithrandir21Mithrandir21

accessibility-auditor

Reviews Android screens for accessibility issues across semantics, contrast, touch targets, and TalkBack flow.

Community
Intermediate
xurenluxurenlu
1

expo-tailwind-setup

Configure Tailwind CSS v4, react-native-css, and NativeWind v5 in Expo projects.

Community
Intermediate