expo-app-design

Build robust, productivity apps with Expo.

View on GitHub
Author Evan Bacon
Namespace @expo/expo-plugins
Category general
Version 1.0.0
Stars 784
Downloads 2
self.md verified
Table of content

Build robust, productivity apps with Expo.

Installation

npx claude-plugins install @expo/expo-plugins/expo-app-design

Contents

Folders: skills

Files: README.md

Documentation

Build robust, productivity apps with Expo. Domain-specific knowledge for building mobile applications using Expo and React Native.

What This Plugin Does

When to Use

Skills Included

License

MIT

Included Skills

This plugin includes 5 skill definitions:

building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

View skill definition

Expo UI Guidelines

References

Consult these resources as needed:

Running the App

CRITICAL: Always try Expo Go first before creating custom builds.

Most

…(truncated)

expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

View skill definition

When to Use API Routes

Use API routes when you need:

When NOT to Use API Routes

Avoid API routes when:

File Structure

API routes live in the app directory with +api.ts suffix:

app/
  api/
    hello+api.ts          → GET /api/hello
    users+api.ts          → /api/users
    users/[id]+api.ts     → /api/users/:id
  (tabs)/
    index.tsx

Basic API Route

// app/api/hello+api.ts
export function GET(request: Request) {
  return Response.json({ m

...(truncated)

</details>

### expo-dev-client

> Build and distribute Expo development clients locally or via TestFlight

<details>
<summary>View skill definition</summary>

Use EAS Build to create development clients for testing native code changes on physical devices. Use this for creating custom Expo Go clients for testing branches of your app.

## Important: When Development Clients Are Needed

**Only create development clients when your app requires custom native code.** Most apps work fine in Expo Go.

You need a dev client ONLY when using:
- Local Expo modules (custom native code)
- Apple targets (widgets, app clips, extensions)
- Third-party native modules not in Expo Go

**Try Expo Go first** with `npx expo start`. If everything works, you don't need a dev client.

## EAS Configuration

Ensure `eas.json` has a development profile:

```json
{
  "cli": {
    "version": ">= 16.0.1",
    "appVersionSource": "remote"
  },
  "build": {
    "production": {
      "autoIncrement": true
    },
    "development": {
      "autoIncrement": true,
      "developmentClient": true
    }
  },
  "submit": {
    "production": {},
    "development": {}
  }
}

Key settings:

Building for TestFlight

Build iOS dev client and submit to TestFlight in one command:

eas build -p ios --profile development --submit

This will:

  1. Build the development client in the cloud
  2. Automatically submit to App Store Connect
  3. Send y

…(truncated)

expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

View skill definition

Tailwind CSS Setup for Expo with react-native-css

This guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.

Overview

This setup uses:

Installation

# Install dependencies
npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx

Add resolutions for lightningcss compatibility:

// package.json
{
  "resolutions": {
    "lightningcss": "1.30.1"
  }
}

Configuration Files

Metro Config

Create or update metro.config.js:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config, {
  // inline variables break PlatformColor in CSS variables
  inlineVariables: false,
  // We add className support manually
  globalClassNamePolyfill: false,
});

PostCSS Config

Create postcss.config.mjs:

// postcss.confi

...(truncated)

</details>

### native-data-fetching

> Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.

<details>
<summary>View skill definition</summary>

# Expo Networking

**You MUST use this skill for ANY networking work including API requests, data fetching, caching, or network debugging.**

## When to Use

Use this router when:

- Implementing API requests
- Setting up data fetching (React Query, SWR)
- Debugging network failures
- Implementing caching strategies
- Handling offline scenarios
- Authentication/token management
- Configuring API URLs and environment variables

## Preferences

- Avoid axios, prefer expo/fetch

## Common Issues & Solutions

### 1. Basic Fetch Usage

**Simple GET request**:

```tsx
const fetchUser = async (userId: string) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return response.json();
};

POST request with body:

const createUser = async (userData: UserData) => {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.json();
};

2. React Query (TanStack Query)

Setup:

// app/_layout.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {

...(truncated)

</details>

## Source

[View on GitHub](https://github.com/expo/skills)
Tags: general