Mobile Uiux Promax

Mobile UI/UX Pro Max

Data-grounded mobile design intelligence. Every design decision is backed by platform-authoritative data from Apple HIG, Material Design 3, and stack-specific best practices.

When to Activate

Activate this skill when the request involves:

• Designing any mobile screen, flow, or component
• Reviewing mobile UI for platform-appropriateness
• Choosing between navigation patterns for mobile apps
• Implementing gesture-driven or haptic-rich interactions
• Advising on iOS vs Android design conventions
• Building onboarding flows or paywall timing
• Animation and motion design for mobile

Workflow

Run the 4-step search sequence from: .agent/workflows/mobile-uiux-promax.md

Read the workflow file before responding. It contains the exact search commands to run.

Core Design Principles (Memorize These)

1. Platform-First, Not Platform-Only

• Follow platform conventions by default
• Deviate only when there's clear UX benefit to users
• Cross-platform apps must feel native on each platform, not identical
• iOS users expect swipe-back + tab bar at bottom; Android users expect system back + nav structure

2. Thumb Zone Above All

• Primary actions belong in the bottom 60% of the screen
• Top-left corner = hardest to reach one-handed
• Platform back buttons (iOS top-left) are the only justified exception

3. Gesture + Haptic + Visual = One Interaction

• Every interaction should engage all three senses when appropriate
• Swipe reveals → haptic at threshold + visual action button
• Toggle → haptic on state change + visual state update simultaneously
• Pull-to-refresh → haptic on trigger + spinner animation + announce to screen readers

4. Accessibility Is Not Optional

• Minimum touch target: 44pt (iOS) / 48dp (Android)
• Every tappable element without visible text needs accessibilityLabel
• Every gesture needs an accessible alternative action
• Test with VoiceOver (iOS) and TalkBack (Android) before shipping
• Support Dynamic Type / sp font scaling (never lock font size)

5. Reduce Motion Is a Hard Requirement

• Check UIAccessibility.isReduceMotionEnabled (iOS) and LocalReduceMotion (Compose) everywhere you animate
• Replace slides with fades; replace springs with eases; reduce or eliminate particle effects
• Haptics are NOT animation — keep them even when reducing motion

6. Safe Area = Non-Negotiable

• Never hardcode padding for device-specific areas
• Always use safeAreaInsets / SafeAreaView / WindowInsets APIs
• Test on iPhone SE (small), iPhone 14 Pro (Dynamic Island), and latest iPad

Pre-Delivery Checklist

Before presenting any design decision, implementation, or code:

Layout & Ergonomics

• [ ] Touch targets ≥ 44pt / 48dp everywhere
• [ ] Safe area insets respected on all edges
• [ ] Primary actions in thumb-reachable zone (bottom 60%)
• [ ] Content not hidden behind notch / Dynamic Island / home indicator
• [ ] Keyboard avoidance implemented for any screen with text inputs

Platform Conventions

• [ ] Back navigation: iOS swipe-back enabled + button; Android system back handled
• [ ] Navigation pattern matches platform idiom (tab bar on iOS; nav bar or drawer on Android)
• [ ] Status bar style contrasts with content behind it
• [ ] Haptic feedback added for primary interactions (where hardware supports)

Accessibility

• [ ] VoiceOver/TalkBack labels on all interactive elements
• [ ] Heading traits applied to screen titles and section headers
• [ ] Custom gesture actions available via accessibility Actions menu
• [ ] Dynamic Type / sp units used (no fixed font sizes)
• [ ] Color contrast ≥ 4.5:1 for body text; ≥ 3:1 for large text / UI
• [ ] Color information supplemented with shape/icon/text

Motion

• [ ] reduceMotion check before every animation
• [ ] Animation duration appropriate (200-400ms for most; <200ms for micro)
• [ ] Spring used for natural feel on expand/appear; ease-out for dismiss/collapse

Dark Mode

• [ ] All colors defined as adaptive (no hardcoded hex for any UI color)
• [ ] Test on OLED (true black matters for pure black backgrounds)
• [ ] Images and media contrast tested in both appearances

Stack-Specific Reminders

React Native

• Use react-native-safe-area-context not built-in SafeAreaView
• Use react-native-reanimated for gesture-driven animations
• Use react-native-gesture-handler for complex touch interactions
• FlatList not ScrollView for lists with 20+ items
• useNativeDriver: true on every Animated.timing()

Flutter

• ListView.builder not Column + ForEach for long lists
• const constructors everywhere possible
• GoRouter for navigation with deep link support
• Riverpod for state management
• cached_network_image for network images

SwiftUI

• NavigationStack not deprecated NavigationView (iOS 16+)
• @StateObject not @ObservedObject for own ViewModels
• LazyVStack not VStack for long lists
• matchedGeometryEffect for hero-like shared element transitions
• @Environment(\.accessibilityReduceMotion) before any animation

Jetpack Compose

• LazyColumn with key = { it.id } for lists
• derivedStateOf for computed state values
• StatefulShellRoute for tab persistence in GoRouter
• collectAsStateWithLifecycle() in all state collection
• WindowCompat.setDecorFitsSystemWindows(window, false) for edge-to-edge

Key Data Sources Baked Into Database

| Domain | Authority | |--------|-----------| | iOS conventions | Apple Human Interface Guidelines | | Android conventions | Material Design 3 | | React Native patterns | React Navigation docs + RN official docs | | Flutter patterns | Flutter official docs + pub.dev best packages | | SwiftUI patterns | Apple developer documentation | | Compose patterns | Android Jetpack documentation | | Accessibility | WCAG 2.1 + iOS Accessibility + Android Accessibility | | Animation timing | Platform-standard specs (iOS spring / MD3 motion) |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: bonnguyenitc
• Source: bonnguyenitc/antigravity-superpowers
• License: MIT
• Homepage: https://www.npmjs.com/package/agy-superpowers

Install and usage instructions live in the source repository linked above.