shipshitdev

expo-architect

4
0
# Install this skill:
npx skills add shipshitdev/library --skill "expo-architect"

Install specific skill from multi-skill repository

# Description

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`.

# SKILL.md


name: expo-architect
description: 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.
version: 1.0.0
tags:
- expo
- react-native
- mobile
- scaffold
- clerk


Expo Architect

Create production-ready 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

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

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

# With specific options
python3 ~/.claude/skills/expo-architect/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

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

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.