expo-design-system-scaffolder

Expo デザインシステムスキャフォルダー

後付けで修正するのではなく、最初から正しく動作する Expo／React Native デザインシステムコンポーネントを生成するパラメーター化されたテンプレートです。すべてのテンプレートで Unistyles v3 のバリアント（style による回避策は使用しません）、ref をプロパティとして渡す方式、デザイントークン、組み込みのアクセシビリティ、Web／iOS の同等性（インタラクティブなプリミティブに _web のホバー／フォーカス／カーソルを設定）を使用し、準拠する expo-design-system のルール ID を示します。

適用するタイミング

次のことをユーザーが求めている場合に、このスキルを使用します。

• 新しい共有コンポーネントを作成または追加する — ボタン、カード、テキスト、入力フィールド、その他のプリミティブ
• ドメインエンティティ（予約、患者、メモなど）を一覧表示する新しい画面をスキャフォールドする
• Unistyles テーマに新しいデザイントークングループ（色など）を追加する
• コンポーネントのバリアントを一覧にするStorybook ストーリーを追加する
• 新しい機能を始めるにあたり、最初のコミットからコンポーネントをデザインシステムに準拠させる
• 新しいコンポーネントを作る前にエージェントが既存のコンポーネントを見つけて再利用できるよう、デザインシステムのインデックスを設定または更新する

利用可能なテンプレート

スキャフォールドするには、テンプレートを読み込み、プレースホルダーを置換して、デザインシステムパッケージの下（画面の場合は app/）に結果を書き込みます。プレースホルダーは中かっこ1組の識別子トークン（例：{ComponentName}）です。リテラルの TSX および Unistyles の中かっこ（例：{ variant }、{item.title}）はそのままにします。

テンプレート	生成内容	プレースホルダー
variant-component.tsx.template	variant／size バリアント、押下時／無効状態、Web のホバー／フォーカス／カーソル、アクセシビリティ、ref プロパティを備えた Pressable プリミティブ	{ComponentName} {file_path}
card-surface.tsx.template	leading／trailing／children スロット、tone／inset バリアント、エレベーショントークンを備えた複合サーフェス	{ComponentName} {file_path}
text-primitive.tsx.template	variant／tone を備え、生のスタイルを使わず、フォントスケーリングに上限を設けた型付きテキストコンポーネント	{ComponentName} {file_path}
form-field.tsx.template	ラベル付き入力フィールド：制御／非制御、ref プロパティ、エラーバリアント、Web のフォーカスリング、アクセシビリティ	{ComponentName} {file_path}
list-screen.tsx.template	プリミティブで構成したエンティティ一覧：FlashList、メモ化された行、Web の行ホバー／カーソル、セーフエリアのインセット	{ScreenName} {Entity} {entity} {entity_plural} {route_path} {file_path}
token-group.ts.template	Unistyles テーマに統合する raw → semantic → component のトークングループ	{token_group} {file_path}
component-story.tsx.template	すべてのバリアントを横並びで表示する Storybook ストーリー	{ComponentName} {file_path}
component-index.ts.template	デザインシステムの単一の公開エントリおよびコンポーネント一覧カタログ — エージェントはスタイル設定の前にこれを読んで、既存のものを再利用します（再利用を優先）	{file_path}

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

• {ComponentName} — PascalCase のコンポーネント名。例：AppButton、AppCard、AppText、AppTextField
• {ScreenName} — Screen サフィックスを付けた PascalCase の画面名。例：AppointmentsScreen
• {Entity}／{entity}／{entity_plural} — PascalCase、camelCase、複数形。例：Appointment／appointment／appointments
• {route_path} — 行をタップしたときに遷移するルートセグメント。例：appointments
• {token_group} — camelCase のトークングループ名。例：statusBadge
• {file_path} — ヘッダーコメントに記載する出力先パス

使い方

1. 作成するものに合ったテンプレートを選びます。
2. プレースホルダーに設定する値を選びます（表と各テンプレートのヘッダーコメントを参照してください）。
3. トークンを置き換え、ファイルを design_system_dir（画面の場合は app_dir）の下に作成します。
4. component-story.tsx.template を使って対応するストーリーを作成し、バリエーションをカタログに登録します。
5. 新しいコンポーネントをデザインシステムのインデックス（component-index.ts.template）に追加します。export と1行のカタログエントリーを追加することで、次のエージェントがコンポーネントを再構築せずに見つけて再利用できるようになります。
6. 画面がインポートするデータレイヤー（use{Entity}List、domain 型）を実装します。スキャフォールドがビューを担当し、データはあなたが担当します。
7. 各テンプレートが適用するルールと、ルールから外れる場合については、references/conventions.md をお読みください。

セットアップ

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

• design_system_dir — デザインシステムのパッケージソース（デフォルト：packages/design-system/src）
• app_dir — 画面テンプレート用の Expo Router ルートディレクトリ（デフォルト：app）

関連スキル

• expo-design-system — これらのテンプレートが従うルール集です。生成される各ファイルに参照先が記載されます。
• expo-react-native-coder — スキャフォールドされたコンポーネントを中心とする機能開発向けです。