mcpField
M
mobile-nav-plan

mobile-nav-plan

github.com/draftbitデザイン・UI966 回インストール17 週間前に更新
リポジトリ

mobile-nav-plan について

mobile-nav-plan は、Expo Router の `app/` ディレクトリに対応するルートツリーを作る、モバイルアプリのナビゲーション設計スキルです。情報設計に特化し、画面やコンポーネントの実装は行いません。

主な機能

  1. 01ルートツリーの設計
  2. 02画面コンテナの選定
  3. 03ディープリンクと戻る動作の計画
  4. 04既存ルートとの差分確認
  5. 05ナビゲーション規則の自己点検

活用シーン

  1. 01新規アプリのナビゲーション設計
  2. 02既存ルートツリーの変更提案
  3. 03タブ、シート、入口の記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/draftbit/mobile-taste-skill --skill mobile-nav-plan

インストール後、Claude Code で/mobile-nav-planを入力して読み込まれたか確認します。

詳細

mobile-nav-plan:ナビゲーション設計、それ以外は対象外

ナビゲーションは情報アーキテクチャです。このスキルが作成するのは、確定したルートツリーであり、Expo Router の app/ ディレクトリ計画を兼ねる Nav Read のみです。それ以上は行いません。画面コードは作成しません。

手法は ../_shared/references/navigation.md(コンテナの決定木、Expo Router の規約、機械的なチェック、3 つの作成例)に記載されています。番号付きで引用される兆候(#24 など)は ../_shared/references/tells.md に記載されています。Nav Read を作成する前に、両方を最初から最後まで読んでください。

フロー

  1. スタックを確認します。 既存プロジェクトでは、package.json/app.json/現在の app/(またはナビゲーター)のツリーと、存在する場合は MOBILE-DESIGN.md を読みます。新規プロジェクトに関する会話では、2 に進みます。
  2. App Read の要点を確認します。 アプリの種類、対象ユーザー、対象プラットフォームとティア、プラットフォームの基本方針(1 行で記述します。App Read 全体は mobile-taste が担当します)。アプリの種類が本当に曖昧な場合は、質問を 1 つだけします。
  3. 達成したいタスクを列挙します。 コンテナを選ぶ前に、ユーザーが繰り返し利用する移動先と、作成/編集タスクを一覧にします。タブはこの一覧から決め、Home/Search/+/Alerts/Profile のテンプレートから決めることはありません(兆候 #24)。
  4. 決定木を適用します(navigation.md §2)。すべての画面について、タブのルート → プッシュ → モーダル → ボトムシート → 全画面モーダルの順に判定します。最初に該当したものを採用します。
  5. Nav Read を出力します(navigation.md §1 の標準形式)。プラットフォーム、タブ、コンテナの注記付きルートツリー、エントリーポイント、シート(または「なし」)、ディープリンク、Android の戻る操作の計画、最大タップ数の行を含めます。
  6. 判断が分かれやすい点を説明します。 タブ数、FAB の判断(作成アクションがある場合は、FAB を設置するか、設置しないか)、全画面モーダル、BackHandler の例外、モーダルではなくシートにする各画面について、それぞれ 1 文で説明します。
  7. セルフチェックします。 機械的なチェックリスト(navigation.md §4)に照らして確認します。計画で逸脱するルールがあれば、そのルールと理由を報告します。
  8. 保存します。 Nav Read を MOBILE-DESIGN.md に書き込むかどうかを提案します(## Nav Read セクションを作成または更新し、既存の内容があれば変更点を報告します)。既存アプリの場合は、現在のルートツリーと提案するルートツリーの差分も出力し、サイレントに変更してはならない項目の一覧(../_shared/references/redesign-protocol.md)に該当する変更をすべて明示します。対象項目は、ルート名、ディープリンク、タブの順序です。

このスキルに適用されるルール

  • 既存アプリのナビゲーション再構成は提案です。実装は、承認後に mobile-redesign-app が担当します。
  • 画面モックアップやコンポーネントコードは作成しません。唯一の成果物は Nav Read です(ユーザーから依頼された場合に限り、空のルートファイルのひな形も作成できます。_layout.tsx ファイルと、ツリーに対応する空の画面のみで、内容は一切記述しません)。
  • コンテナの選択ごとに、決定木のステップを引用します。「しっくりきた」は根拠になりません。

コメント