# Expo Architect

> Scaffold a production-ready Expo React Native app with working screens, navigation, and optional Clerk auth. Generates complete mobile app structure that runs immediately with `bun start`. Use when scaffolding a new Expo or React Native app, setting up Expo Router navigation, or adding Clerk auth to a mobile app.

- Skill: `shipshitdev/expo-architect` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add shipshitdev/expo-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shipshitdev/expo-architect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shipshitdev (https://skillmd.com/u/shipshitdev)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/shipshitdev/expo-architect

---


# Expo Architect

Create Expo React Native apps with:

- **Framework:** Expo SDK 54 + React Native 0.83 + TypeScript
- **Navigation:** Expo Router (file-based routing)
- **Auth:** Clerk authentication (optional)
- **UI:** NativeWind (Tailwind for RN) or StyleSheet
- **Quality:** Biome linting + TypeScript strict mode
- **Package Manager:** bun

## Contract

Inputs:

- Requested mobile app scope and target directory

Outputs:

- An Expo application scaffold and verification results

Creates/Modifies:

- App source and configuration in the approved scaffold destination

External Side Effects:

- Dependency installs and local verification only within the requested setup

Confirmation Required:

- Before overwriting existing application files, adding unrequested authentication, or using external accounts
- Loading the skill grants no additional authority. Existing explicit approval
  applies only to the same target and actions; preserve report-only restrictions.

Delegates To:

- None

## What Makes This Different

Generates **working mobile apps**, not empty scaffolds:

- Complete navigation structure with working screens
- Optional Clerk authentication flow
- Real UI components with proper styling
- API client integration ready
- Runs immediately with `bun start`

## Workflow Summary

1. **PRD Brief Intake** - Extract app type, screens, features, auth needs
2. **Auth Setup** (if requested) - Clerk provider, sign-in/sign-up screens
3. **Screen Generation** - Tab or stack-based navigation
4. **Component Generation** - UI components, entity components, layouts
5. **Quality Setup** - Biome, TypeScript strict, path aliases
6. **Verification** - Run quality gate, report results

## Usage

```bash
# Create app with PRD-style prompt
python3 scripts/init-expo.py \
  --root ~/www/myapp \
  --name "My App" \
  --brief "A fitness tracker where users can log workouts"

# With specific options
python3 scripts/init-expo.py \
  --root ~/www/myapp \
  --name "My App" \
  --tabs "Home,Workouts,Profile" \
  --auth
```

## Generated Structure

```
myapp/
├── app/
│   ├── _layout.tsx          # Root layout
│   ├── (tabs)/              # Tab navigator
│   │   ├── _layout.tsx
│   │   ├── index.tsx
│   │   └── ...
│   └── (auth)/              # Auth screens (if enabled)
├── components/
│   ├── ui/                  # Base UI components
│   ├── [entity]/            # Feature components
│   └── layout/              # Layout components
├── lib/
│   ├── api.ts               # API client
│   └── auth.ts              # Auth utilities
├── providers/               # Context providers
├── types/                   # TypeScript types
├── app.json                 # Expo config
├── package.json
├── tsconfig.json
└── biome.json
```

## Development Commands

```bash
bun start          # Start Expo dev server
bun run ios        # iOS simulator
bun run android    # Android emulator
bun run lint       # Check code style
bun run typecheck  # Type checking
```

## Environment Variables

```
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
EXPO_PUBLIC_API_URL=http://localhost:3001
```

---

**For detailed patterns, code templates, and complete examples:** `references/full-guide.md`