Squire expo-app-design

Build robust, productivity apps with Expo. Covers UI building, API routes, data fetching, navigation, styling, and Expo Router best practices.

install

source · Clone the upstream repo

git clone https://github.com/eddiebelaval/squire

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/eddiebelaval/squire "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/expo-app-design" ~/.claude/skills/eddiebelaval-squire-expo-app-design && rm -rf "$T"

manifest: skills/expo-app-design/SKILL.md

source content

Expo App Design

Core Workflows

Workflow 1: Primary Action

Analyze the input and context
Validate prerequisites are met
Execute the core operation
Verify the output meets expectations
Report results

Build robust, productivity apps with Expo. This skill covers the complete guide for building beautiful apps with Expo Router including fundamentals, styling, components, navigation, animations, patterns, and native tabs.

References

Consult these resources as needed:

./references/building-ui.md -- Complete UI guidelines for Expo Router apps
./references/api-routes.md -- API routes with EAS Hosting

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

npx expo run:android

Start with Expo Go: Run
```
npx expo start
```
and scan the QR code with Expo Go
Check if features work: Test your app thoroughly in Expo Go
Only create custom builds when required - see below

When Custom Builds Are Required

You need

npx expo run:ios/android

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

Code Style

Be cautious of unterminated strings. Ensure nested backticks are escaped
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

Routes

Routes belong in the
```
app
```
directory
Never co-locate components, types, or utilities in the app directory
Ensure the app always has a route that matches "/"

Library Preferences

Avoid	Use Instead
Legacy Picker, WebView, SafeAreaView	Modern alternatives
`expo-av`	`expo-audio` and `expo-video`
`@expo/vector-icons`	`expo-symbols`
`Platform.OS`	`process.env.EXPO_OS`
`React.useContext`	`React.use`
Intrinsic `img`	`expo-image` Image component

Responsiveness

Always wrap root component in a scroll view

Use

<ScrollView contentInsetAdjustmentBehavior="automatic" />

Use flexbox instead of Dimensions API
Prefer
```
useWindowDimensions
```
over
```
Dimensions.get()
```

Styling

Follow Apple Human Interface Guidelines:

Prefer flex gap over margin and padding
Use
```
{ borderCurve: 'continuous' }
```
for rounded corners
Use CSS
```
boxShadow
```
style prop (NEVER legacy shadow or elevation)
Inline styles, not StyleSheet.create unless reusing

Navigation

Use

<Link href="/path" />

from 'expo-router' for navigation:

import { Link } from 'expo-router';

<Link href="/path" />

// With custom component
<Link href="/path" asChild>
  <Pressable>...</Pressable>
</Link>

Add context menus and previews frequently:

<Link href="/settings">
  <Link.Trigger><Card /></Link.Trigger>
  <Link.Preview />
  <Link.Menu>
    <Link.MenuAction title="Share" icon="square.and.arrow.up" />
  </Link.Menu>
</Link>