Back to Details

expo-architect

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Expo Architect

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
创建可投入生产的Expo React Native应用，包含：
  • 框架： Expo SDK 54 + React Native 0.83 + TypeScript
  • 导航： Expo Router（基于文件的路由）
  • 身份验证： Clerk身份验证（可选）
  • UI： NativeWind（适用于RN的Tailwind）或StyleSheet
  • 质量保障： Biome代码检查 + TypeScript严格模式
  • 包管理器： 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
生成可直接运行的移动应用，而非空架子：
  • 包含可用页面的完整导航结构
  • 可选的Clerk身份验证流程
  • 带有合适样式的真实UI组件
  • 已准备好API客户端集成
  • 可通过
    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
  1. PRD需求收集 - 提取应用类型、页面、功能、身份验证需求
  2. 身份验证设置（若需求）- Clerk提供者、登录/注册页面
  3. 页面生成 - 基于标签页或栈的导航
  4. 组件生成 - UI组件、实体组件、布局组件
  5. 质量配置 - Biome、TypeScript严格模式、路径别名
  6. 验证 - 运行质量检查，报告结果

Usage

使用方法

bash
undefined
bash
undefined

Create app with PRD-style prompt

基于PRD风格的提示创建应用

python3 ~/.claude/skills/expo-architect/scripts/init-expo.py
--root ~/www/myapp
--name "My App"
--brief "A fitness tracker where users can log workouts"
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
undefined
python3 ~/.claude/skills/expo-architect/scripts/init-expo.py
--root ~/www/myapp
--name "My App"
--tabs "Home,Workouts,Profile"
--auth
undefined

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
myapp/
├── app/
│   ├── _layout.tsx          # 根布局
│   ├── (tabs)/              # 标签页导航器
│   │   ├── _layout.tsx
│   │   ├── index.tsx
│   │   └── ...
│   └── (auth)/              # 身份验证页面（若启用）
├── components/
│   ├── ui/                  # 基础UI组件
│   ├── [entity]/            # 功能组件
│   └── layout/              # 布局组件
├── lib/
│   ├── api.ts               # API客户端
│   └── auth.ts              # 身份验证工具
├── providers/               # 上下文提供者
├── types/                   # TypeScript类型定义
├── app.json                 # Expo配置文件
├── 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
bash
bun start          # 启动Expo开发服务器
bun run ios        # iOS模拟器
bun run android    # Android模拟器
bun run lint       # 检查代码风格
bun run typecheck  # 类型检查

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
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
EXPO_PUBLIC_API_URL=http://localhost:3001
如需详细的模式、代码模板和完整示例： 
references/full-guide.md