playbooks

home / skills / skillcreatorai / ai-agent-skills / expo-app-design

expo-app-design skill

/skills/expo-app-design

This skill helps you design and implement cross-platform mobile apps using Expo Router, NativeWind, and React Native styling best practices.

npx playbooks add skill skillcreatorai/ai-agent-skills --skill expo-app-design

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
553 B
---
name: expo-app-design
description: Build beautiful cross-platform mobile apps with Expo Router, NativeWind, and React Native.
author: expo
category: development
tags: [expo, react, typescript]
---

# Expo App Design

Build beautiful cross-platform mobile apps with Expo Router, NativeWind, and React Native.

## When to Use

- Building mobile apps with Expo
- Navigation with Expo Router
- Styling with NativeWind/Tailwind
- Native tabs and animations

## Source

This skill references patterns from [Expo's skills](https://github.com/expo/skills).

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.

FAQ

Do I need to eject from Expo to use these patterns?

No. The patterns are designed for Expo-managed workflows and work with standard Expo projects.

Can I mix NativeWind with traditional StyleSheet styles?

Yes. Use NativeWind for utility-first styling and fallback to StyleSheet for complex or performance-critical styles.