プロジェクト構造

インストールとセットアップ

すべてのステップの前に、開始する前にとターミナルの基本を読みます。package.json を含むフォルダーであるルートで supastack フォルダーを開きます。Mobile チェックアウトには apps/mobile と以下の共有パッケージが含まれ、All Platforms モノレポには Web バックエンドと Desktop シェルも追加されます。環境変数とは、ローカルの .env ファイルまたはホスティング ダッシュボードに保存された名前付き設定です。変更後はアプリを再起動し、サーバー シークレットを EXPO_PUBLIC_ 値に入れないでください。

1. エディターで apps/mobile/app/_layout.tsx を開きます — すべての画面が共有するルート レイアウトです。

2. apps/mobile/src/ を閲覧します — 機能領域ごとに 1 つのフォルダーがあり、それぞれにロジックとテストが入っています。

3. リポジトリ ルートから corepack pnpm --filter @supastack/mobile start を実行し、デバイスでプレビューを開きます。

Expo アプリは、機能モジュールを呼び出すルートとして構成されています。ルートは薄く保たれます — 画面をレンダリングするだけで、呼び出すロジックは src/ 下にテストと共にあります。動作を変更する前に AGENTS.md と .ai/PROJECT_CONTEXT.md を読んでください。.ai/ ミラー ドキュメントは、ファイルだけからは見えない決定を記録しています。

apps/mobile/app/          Expo Router routes — sign-in, onboarding, invite, paywall
apps/mobile/app/(app)/    Signed-in screens — home, chat, notifications, settings, content, commerce, assistant
apps/mobile/src/          Feature modules — auth, api, purchases, offline, push, ui, theme, i18n
packages/ui-native/       Shared native view-models
packages/design-tokens/   Shared theme tokens
apps/mobile/app.config.ts Scheme and allowed-origin derivation
apps/mobile/eas.json      EAS build and submit profiles
docs/                     Runbooks incl. store submission
.agents/skills/           Task guides for coding agents

変更が属する場所

編集前に、どのフォルダーが変更を所有するか決めます。経験則: ルート ファイルはレンダリングのみ、再利用可能なロジックは src/ モジュールに、サーバーが決定すべきことはアプリに入れません。

• 最初のモバイル機能を構築する

• 新しいサインイン済み画面 → ルートは apps/mobile/app/(app)/、ロジックは apps/mobile/src/<feature>/。
• 新しい認証前またはスタンドアロン画面 → (app) グループ外の apps/mobile/app/。
• バックエンドへの呼び出し → apps/mobile/src/api/client.ts — アドホックに fetch するのではなく、型付きクライアントを拡張します。
• 画面間で共有するビジュアル → apps/mobile/src/ui/ プリミティブ。クロスプラットフォーム ビュー モデル → packages/ui-native/。
• 色、スペーシング、ダーク/ライトの値 → packages/design-tokens/ に裏付けられた apps/mobile/src/theme/。
• 新しい翻訳キー → apps/mobile/src/i18n/ 下の 4 つのカタログすべて。
• サーバーサイドのすべて — データ、権限、プロバイダー呼び出し → Web バックエンド リポジトリ。Mobile 専用購入では別のチェックアウトです。

実装ワークフロー

ルート ファイルから始め、それがレンダリングする機能モジュール、次に API クライアント呼び出しをたどります — サーバーが所有権を決定し、アプリはそれを再導出しません。.agents/skills/ の add-a-mobile-screen スキルが同じ順序をたどります。

共有パッケージまたは API クライアントを編集した後は、パッケージ テストと型チェックを実行します。クライアントはバックエンドが提供するのと同じ契約を維持する必要があります。

検証とトラブルシューティング

expo start がモジュール不足を報告する場合は、リポジトリ ルートからインストール コマンドを実行します — アプリ フォルダーだけではワークスペース パッケージを解決できません。画面がスタイルなしで表示される場合は、ハードコードされた色を持つ生要素ではなく src/ui プリミティブを構成しているか確認します。

corepack pnpm --filter @supastack/mobile test
corepack pnpm --filter @supastack/mobile typecheck