ui-mobile
Mobile UI patterns - React Native, iOS/Android, touch targets
By alinaqi · 1,138 installs
npx skills add alinaqi/maggy --skill ui-mobile
Source repository · Upstream listing
Mobile UI Design Skill (React Native)
MANDATORY: Mobile Accessibility Standards
These rules are NON NEGOTIABLE. Every UI element must pass these checks.
1. Touch Targets (CRITICAL)
2. Color Contrast (CRITICAL)
3. Visibility Rules
4. Accessibility Labels (REQUIRED)
5. Focus/Selection States
Core Philosophy
Mobile UI is about touch, speed, and focus. No hover states, smaller screens, thumb friendly targets. Design for one handed use and interruption recovery.
Platform Differences
iOS vs Android
Design Language
Spacing System
4px Base Grid
Safe Areas
Typography
Type Scale
Color System
Semantic Colors
Dynamic Colors (React Native)
Touch Targets
Minimum Sizes
Touch Feedback
Component Patterns
Cards
Buttons
Input Fields
Lists
Navigation Patterns
Bottom Tab Bar
Header
Animations
Native Driver Animations
Reanimated for Complex Animations
Loading States
Skeleton Loader
Activity Indicator
Accessibility
VoiceOver / TalkBack
Dynamic Type (iOS)
Anti Patterns
Never Do
Common Mistakes
Quick Reference
Mobile Defaults
Premium Feel Checklist