# Mobile Uiux Promax

> Use when designing or building mobile app UI for iOS, Android, React Native, Flutter, SwiftUI, or Jetpack Compose

- **Type:** Skill
- **Install:** `agentstack add skill-bonnguyenitc-antigravity-superpowers-mobile-uiux-promax`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [bonnguyenitc](https://agentstack.voostack.com/s/bonnguyenitc)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [bonnguyenitc](https://github.com/bonnguyenitc)
- **Source:** https://github.com/bonnguyenitc/antigravity-superpowers/tree/main/.agent/skills/mobile-uiux-promax
- **Website:** https://www.npmjs.com/package/agy-superpowers

## Install

```sh
agentstack add skill-bonnguyenitc-antigravity-superpowers-mobile-uiux-promax
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://github.com/bonnguyenitc)
- **Source:** [bonnguyenitc/antigravity-superpowers](https://github.com/bonnguyenitc/antigravity-superpowers)
- **License:** MIT
- **Homepage:** https://www.npmjs.com/package/agy-superpowers

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-bonnguyenitc-antigravity-superpowers-mobile-uiux-promax
- Seller: https://agentstack.voostack.com/s/bonnguyenitc
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.