mcpField
E
expo-architect

expo-architect

github.com/shipshitdev开发38305 次安装2 天前更新
代码仓库

关于 expo-architect

expo-architect 是根据应用需求生成并验证 Expo React Native 应用的技能，可创建包含页面和导航的可运行应用，并按需配置 Better Auth。

主要功能

  1. 01生成 Expo 应用脚手架
  2. 02生成页面与导航
  3. 03可选 Better Auth 流程
  4. 04配置 Biome 与严格 TypeScript
  5. 05验证项目质量

适用场景

  1. 01根据产品需求构建 Expo 应用
  2. 02按需添加登录页面
  3. 03检查生成应用的质量

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill expo-architect

安装后在 Claude Code 中输入/expo-architect确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

plugin.json
references/
full-guide.md
scripts/
init-expo.py
tests/
test_init_expo.py

详细介绍

Expo 架构师

使用以下技术创建 Expo React Native 应用：

  • 框架： Expo SDK 57 + React Native 0.86 + React 19 + TypeScript
  • 导航： Expo Router（基于文件的路由）
  • 身份验证： Better Auth 搭配 Expo 客户端（可选；会话存储在 SecureStore 中，并由你的 API 提供支持）
  • UI： NativeWind（适用于 RN 的 Tailwind）或 StyleSheet
  • 质量： Biome 2.5 lint 检查 + TypeScript 严格模式
  • 包管理器： bun

契约

输入：

  • 请求创建的移动应用范围和目标目录

输出：

  • Expo 应用脚手架和验证结果

创建/修改：

  • 在获准的脚手架目标目录中创建应用源代码和配置

外部副作用：

  • 仅在请求的设置范围内安装依赖项并进行本地验证

需要确认：

  • 覆盖现有应用文件、添加未请求的身份验证或使用外部账户之前
  • 加载该技能不会授予额外权限。现有的明确批准仅适用于相同目标和操作；请保留仅报告限制。

委派给：

  • 无

与众不同之处

生成的是可运行的移动应用，而非空脚手架：

  • 完整的导航结构和可用屏幕
  • 可选的 Better Auth 登录/注册流程
  • 经过适当样式设计的真实 UI 组件
  • 已准备好集成 API 客户端
  • 使用 bun start 即可立即运行

工作流概要

  1. PRD 简报收集 - 提取应用类型、屏幕、功能和身份验证需求
  2. 身份验证设置（如有请求）- lib/auth-client.ts（Better Auth Expo 客户端）、受会话保护的根布局、登录/注册屏幕
  3. 屏幕生成 - 基于选项卡或堆栈的导航
  4. 组件生成 - UI 组件、实体组件、布局
  5. 质量设置 - Biome、TypeScript 严格模式、路径别名
  6. 验证 - 运行质量门禁并报告结果

用法

# 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

生成的结构

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-client.ts       # Better Auth Expo client (if auth enabled)
├── types/                   # TypeScript types
├── app.json                 # Expo config
├── package.json
├── tsconfig.json
└── biome.json

开发命令

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

环境变量

EXPO_PUBLIC_API_URL=http://localhost:3001

Better Auth 在 API 内运行（默认路径为 /api/auth）。API 需要 @better-auth/expo 插件，并且需要在 trustedOrigins 中配置应用 scheme（即应用 slug，例如 my-app://）；启用身份验证后，脚手架会打印确切的 scheme。

详细模式、代码模板和完整示例： references/full-guide.md

评论

支持 Markdown