For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/mobile/ui.md (or send Accept: text/markdown).

ネイティブ UI とテーマ

Web のデザイン決定を映す画面プリミティブと共有ビューモデル。

このガイドについて質問

始める前に

[ファイル] → [フォルダーを開く] を使用して、Visual Studio Code でダウンロードした supastack プロジェクトを開き、[ターミナル] → [新しいターミナル] を選択します。リポジトリルートは、package.json、アプリ、およびパッケージを含むフォルダーです。そこで以下のコマンドを実行し、ターミナルを開いたままにしておきます。コマンドが認識されない場合は、続行する前にツールのインストールガイドを完了してください。

まずプラットフォームのチュートリアルをお読みください。サーバーは、ブラウザまたは電話のリクエストに応答するアプリプロセスです。 Web は apps/web/.env.local を読み取り、Expo は apps/mobile/.env.local を読み取り、データベース移行コマンドは root .env を読み取ります。データベースなしの /dashboard デモは、Postgres の移行が必要な実際の /auth アカウントとは別のものです。電話またはデスクトップのみのチェックアウトには、別途実行される Web バックエンドが必要です。

corepack pnpm --filter @supastack/mobile start

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

画面プリミティブは apps/mobile/src/ui（Screen、Card、Title、Detail、SectionLabel、ErrorText、AppButton）にあり、apps/mobile/src/theme からスタイル設定されるため、Web 向けの視覚的な決定がそのままネイティブ UI に反映されます。外観設定では、「Web アプリに合わせる」モード（GET/PUT /api/mobile/appearance を使う apps/mobile/src/theme/synced.ts）により、サインイン済みユーザーの同期された Web カラーパックがローカルキャッシュから適用されます。

packages/ui-native はクロスプラットフォームのビューモデルヘルパーを保持します：createEntitlementCard がサーバーのエンタイトルメント状態をカードのタイトル、ステータス、詳細、アクションラベル、アクセシビリティラベルに変換するため、Web とモバイルが同じアクセス判断を描画します。

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

実装ワークフロー

新しい要素を書く前に共有プリミティブから画面を組み立ててください。サイズや色をハードコードするのではなく、テーマモジュールのトークンと密度に合わせます。

プロダクトのコピーはプリミティブに入れないでください——プリミティブはラベルを描画するもので、コピーの決定ではありません。アクセシビリティラベルは createEntitlementCard と同じようにカスタム行にも引き継いでください。

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

ライトとダーク、最大文字サイズ、スクリーンリーダーラベル、小さなデバイスで画面を確認します。200% のテキストで切り詰めや欠落が起きるコンポーネントは完成ではありません。