| name | mobile-app-ui-implementation |
| description | Use for React Native, Expo SDK 56, NativeWind, iOS/Android UI, mobile UX flows, touch targets, safe areas, and mobile design-system implementation. |
Mobile App UI Implementation
Use this skill for mobile app screens, flows, components, and React Native implementation.
Stack priority
- Existing project dependencies and navigation setup.
- Existing tokens, theme provider, and component kit.
- Target stack when starting from scratch: React Native, Expo SDK 56, TypeScript, NativeWind, platform-native navigation, safe-area handling, haptics when appropriate.
Mobile design rules
- Minimum hit target: 44px.
- Respect safe areas, dynamic island/notch, home indicator, keyboard, and system text scaling.
- Avoid hover-only interactions.
- Use platform-native gestures and transitions when possible.
- Keep primary actions reachable.
- Design empty, loading, error, offline, permission, and success states.
- Avoid dense desktop layouts squeezed into mobile.
React Native implementation rules
- Inspect app structure before adding screens.
- Keep screens thin; extract components and hooks.
- Keep styles token-based and theme-aware.
- Avoid hard-coded pixel values when tokens or responsive helpers exist.
- Use platform-specific files only when behavior genuinely differs.
- Test assumptions on both iOS and Android when project setup allows.
NativeWind rules
- Use NativeWind only when configured or requested.
- Map tokens to the project’s theme rather than writing ad hoc colors.
- Keep class names readable; extract components when class strings become dense.
Verification
Use available scripts and device checks:
pnpm lint
pnpm typecheck
pnpm test
pnpm expo-doctor
pnpm start
Use the project’s actual package manager and scripts.
