Agent skill · software engineering · sickn33
building-native-ui
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
Why this skill is useful
Provides detailed patterns and practices for building apps with Expo Router, which the AI may not reliably generate on its own.
What it needs
Requires expo-cli installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Expo UI Guidelines When to Use Use this skill when you need complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. References Consult these resources as needed: Running the App CRITICAL: Always try Expo Go first before creating custom builds. Most Expo apps work in Expo Go without any custom native code. Before running npx expo run:ios or npx expo run:android: 1. Start with Expo Go: Run npx expo start and scan the QR code with Expo Go 2. Check if features work: Test your app thoroughly in Expo Go 3. Only create custom builds when required - see below When Custom Builds Are Required You need npx expo run:ios/android or eas build ONLY when using: Local Expo modules (custom native code in modules/) Apple targets (widgets, app clips, extensions via @bacons/apple-targets) Third-party native modules not included in Expo Go Custom native configuration that can't be expressed in app.json When Expo Go Works Expo Go supports a huge range of features out of the box: All expo- packages (camera, location, notifications, etc.) Expo Router navigation Most UI libraries (reanimated, gesture handler, etc.) Push notifications, deep links, and more If you're unsure, try Expo Go first. Creating custom builds adds complexity, slower iteration, and requires Xcode/Android Studio setup. Code Style Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly. Always use import statements at the top of the file. Always use kebab-case for file names, e.g. comment-card.tsx Always remove old route files when moving or restructuring navigation Never use special characters in file names Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors. Routes See ./references/route-structure.md for detailed route conventions. Routes belong in the app directory. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/building-native-ui--9c33eb