expo-ios-screen-scaffolder

Expo iOS 画面スキャフォルダー

HIG に準拠した Expo Router 画面を生成するパラメーター化テンプレートです。すべてのテンプレートは、生成時点でネイティブな画面を作成します。ネイティブナビゲーション、仮想化リスト、セーフエリア、セマンティックカラー、SF Symbols、触覚フィードバック、誠実な空状態を備えているため、新しい画面は後から修正するのではなく、最初から適切な状態で始められます。生成される各ファイルには、準拠する expo-ios-hig のルールが記載されます。

適用するタイミング

ユーザーが次のことを希望する場合に、このスキルを使います。

• iOS 向け Expo アプリで新しい画面、ルート、レイアウトを作成または追加する
• リスト、詳細、フォーム、モーダルシート、タブバー、設定画面のスキャフォールドを作成する
• 新しい Expo 機能を始めるにあたり、最初のコミットからネイティブらしい画面にする
• 既存の画面を references/conventions.md の規約に準拠させる

使用可能なテンプレート

スキャフォールドを作成するには、テンプレートを読み込み、プレースホルダーを置き換えて、app/ 配下のルートパスに結果を書き込みます。プレースホルダーは単一の波括弧を使います（例：{ScreenName}）。リテラルの TSX 波括弧はそのままにします。

テンプレート	生成内容	プレースホルダー
list-screen.tsx.template	大きなタイトルのリスト：FlashList + RefreshControl + 空状態 + 下部セーフエリアのインセット	{ScreenName} {Entity} {entity_plural} {Title} {route_path} {sf_symbol}
detail-screen.tsx.template	プッシュ表示される詳細画面：端から端までのスクロール、セマンティックカラー、システム共有ボタン	{ScreenName} {Entity} {entity} {entityId}
form-screen.tsx.template	作成フォーム：キーボード回避、設定済み入力欄、楽観的保存 + 触覚フィードバック	{ScreenName} {Entity} {entity}
modal-sheet.tsx.template	デテント + グラバーと「キャンセル／完了」を備えた formSheet ルート	{ScreenName} {Title} {route_name}
native-tabs-layout.tsx.template	SF Symbol アイコンを使ったルート NativeTabs レイアウト（タブごとに繰り返し）	{tab_name} {Tab_label} {tab_sf_symbol}
settings-screen.tsx.template	グループ化された設定：SectionList + プラットフォーム標準の Switch 行	{ScreenName} {Title}

共通のプレースホルダー：

• {ScreenName} — Screen サフィックスを付けた PascalCase のコンポーネント名。例：TrailsScreen
• {Entity} / {entity} / {entity_plural} — PascalCase、camelCase、複数形。例：Trail / trail / trails
• {entityId} — ファイル名に対応する動的ルートパラメーター名（[trailId].tsx → trailId）
• {Title} — ナビゲーションバーのタイトル文字列。例：Trails
• {route_path} / {route_name} — ナビゲーションに使うルートセグメント
• {sf_symbol} / {tab_sf_symbol} — Apple の SF Symbols アプリにある SF Symbol 名
• {file_path} — ヘッダーコメントに記載する出力先パス

使い方

1. 画面の種類に合ったテンプレートを選びます。
2. プレースホルダーの値を決めます（上の表と各テンプレート内のヘッダーコメントを参照してください）。
3. 値を置き換え、ルートパスに書き込みます。例：app/(trails)/index.tsx、app/(trails)/[trailId].tsx。
4. インポートされた関連機能（use{Entity}List、create{Entity}、…）を実装します。スキャフォールドが担当するのはビュー、データレイヤーはあなたが担当します。
5. 各テンプレートが適用するルールと、そこから逸脱する場合については、references/conventions.md を読んでください。

セットアップ

config.json は任意です。プロジェクトの設定が異なる場合は、初回使用時に上書きしてください。

• app_dir — Expo Router のルートディレクトリ（デフォルトは app）
• components_dir — 共通コンポーネントのディレクトリ（デフォルトは components）
• list_component — リストテンプレート用の FlashList（デフォルト）または FlatList

関連スキル

• expo-ios-hig — これらのテンプレートが従うルールです。生成される各ファイルにそのルールが記載されます。
• expo-ios-hig-verify — スキャフォールドの作成後に実行し、画面がネイティブな状態を保っていることを確認します。