> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# ネイティブ UI とテーマ

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

## 始める前に

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

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

[ツールをインストールしてコードを取得](https://supastack.dev/ja/docs/web/before-you-start.md)

[コマンド、ファイル、設定を学ぶ](https://supastack.dev/ja/docs/web/terminal-basics.md)

[モバイルの初回実行チュートリアルを完了する](https://supastack.dev/ja/docs/mobile/ship-in-5-minutes.md)

```
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% のテキストで切り詰めや欠落が起きるコンポーネントは完成ではありません。


## 次へ

[モバイルのentitlement](https://supastack.dev/ja/docs/mobile/entitlements.md)