expo-app-design_skill

Overview

This skill helps you design and ship beautiful cross-platform mobile apps using Expo Router, NativeWind (Tailwind for React Native), and React Native. It provides patterns for app structure, navigation, styling, and native-feeling interactions so you can iterate quickly across iOS and Android. The focus is practical: predictable routes, responsive styles, and smooth animations that work with Expo-managed projects.

How this skill works

The skill inspects common design patterns and scaffolds for Expo projects that use Expo Router for file-based navigation and NativeWind for utility-first styling. It recommends folder structure, route organization, layout wrappers, and integration points for tabs, stacks, and animated transitions. It also outlines best practices for responsive styling, platform-specific tweaks, and performance-conscious component patterns.

When to use it

• Starting a new Expo-managed mobile app targeting iOS and Android.
• Implementing file-based navigation and deep links with Expo Router.
• Applying Tailwind-style utility classes in React Native via NativeWind.
• Creating native-feeling bottom tabs, stacks, and animated screen transitions.
• Rapid prototyping UI that must remain consistent across platforms.

Best practices

• Organize routes with clear folder and file naming to leverage Expo Router’s conventions.
• Use layout wrappers for shared chrome (headers, tab bars) to avoid duplication.
• Prefer NativeWind utility classes for consistent spacing and typography, and extract common styles into components.
• Keep animations declarative and use native drivers or Reanimated when possible for performance.
• Profile and limit re-renders: memoize list items and avoid inline style objects in frequently rendered components.

Example use cases

• A consumer app with bottom tabs for Home, Search, Notifications, and Profile using Expo Router and platform-aware tab styles.
• A productivity app that uses NativeWind for rapid theming and consistent spacing across screens.
• An onboarding flow with animated transitions between steps and deep linking to resume state using Expo Router.
• A marketplace app that needs responsive card layouts, shared layout components, and performant scroll lists.