building-native-ui
Installation
Summary
Complete guide for building native Expo apps with routing, styling, components, and platform conventions.
- Covers Expo Router fundamentals, native tabs, stack navigation, modals, and form sheets with detailed route structure conventions
- Includes styling rules aligned with Apple Human Interface Guidelines: flexbox layouts, safe area handling, animations, shadows via CSS
boxShadow, and responsive design patterns - Documents library preferences (expo-image for SF Symbols, expo-audio, expo-video, expo-glass-effect) and anti-patterns to avoid (legacy modules, intrinsic HTML elements, StyleSheet over inline styles)
- Provides reference guides for animations, controls, search, storage, visual effects, WebGPU/3D graphics, and zoom transitions
- Emphasizes testing in Expo Go first before creating custom builds, with clear guidance on when native code is actually required
SKILL.md
Expo UI Guidelines
For routes, links, stacks, tabs, modals, sheets, and headers, use the expo-router skill.
References
Consult these resources as needed:
references/
animations.md Reanimated: entering, exiting, layout, scroll-driven, gestures
controls.md Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
gradients.md CSS gradients via experimental_backgroundImage (New Arch only)
icons.md SF Symbols via expo-image (sf: source), names, animations, weights
media.md Camera, audio, video, and file saving
storage.md SQLite, AsyncStorage, SecureStore
visual-effects.md Blur (expo-blur) and liquid glass (expo-glass-effect)
webgpu-three.md 3D graphics, games, GPU visualizations with WebGPU and Three.js
Related skills
More in Mobile
vercel-react-native-skills
React Native best practices: performance, navigation, native modules, and platform APIs
vercel-labs/agent-skillssleek-design-mobile-apps
Mobile-first design patterns for iOS and Android: gestures, safe areas, and native feel
sleekdotdesign/agent-skillsnative-data-fetching
Data fetching for native apps: offline caching, background refresh, and sync patterns
expo/skillsexpo-tailwind-setup
NativeWind and Tailwind setup in Expo with correct native class handling
expo/skillsupgrading-expo
Expo SDK upgrade guide covering breaking changes, native module compatibility, and migration steps
expo/skills