building-native-ui

SKILL.md

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

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