From mobile-plugin
iOSアプリの情報設計(IA)と画面遷移(ナビゲーション)を設計するスキル。Apple HIGとWWDCセッションに基づき、 タブ/階層push/モーダルを情報階層とタスク構造から逆算して選定し、根拠と未確定事項を可視化しながら設計を完遂する。 使用タイミング: (1) 新規アプリの情報設計時、(2) 画面遷移設計時、(3) 「IAを設計したい」「ナビゲーション構造を決めたい」、 (4) iPad/iPhone両対応の構造設計時、(5) ディープリンク対応設計時、(6) 既存アプリのリファクタリング時
How this skill is triggered — by the user, by Claude, or both
Slash command
/mobile-plugin:ios-ia-navigationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
iOSアプリの情報設計(IA)と画面遷移を、Apple HIGの原則に基づいて設計するスキル。
iOSアプリの情報設計(IA)と画面遷移を、Apple HIGの原則に基づいて設計するスキル。
ユーザー提供のドキュメント(PRD、要件、ブランド、既存仕様)を根拠に:
をiOSのナビゲーション原則に一致する形で設計し、未確定情報は質問で埋めて設計を前進させる。
以下をユーザーに確認してから設計を開始:
最低限以下を確認:
| # | 質問 | 影響範囲 |
|---|---|---|
| 1 | 主要ユーザーは誰? | ペルソナ、タスク優先度 |
| 2 | アプリを開いてやるTop3タスクは? | トップレベル構造 |
| 3 | 扱う主役の情報(エンティティ)は? | コンテンツモデル |
| 4 | 一覧→詳細で見る?作業(編集/作成)が主? | 遷移パターン |
| 5 | トップレベルに分けるべき領域は? | タブ/サイドバー設計 |
| 6 | ログイン必須?匿名でどこまで? | 認証フロー |
| 7 | iPadを主要ターゲットにする? | Split View設計 |
| 8 | 通知・外部リンクで特定画面に直接入る? | ディープリンク |
各モジュールを順次実行し、成果物を生成:
| Module | 目的 | 主要成果物 |
|---|---|---|
| 0 | ドキュメント根拠化 | Evidence Map、用語集 |
| 1 | タスクモデル化 | 主要タスクTop3-7、タスク分解 |
| 2 | コンテンツモデル | エンティティ、関係、階層候補 |
| 3 | トップレベル設計 | タブ/サイドバー構成、責務定義 |
| 4 | 遷移設計 | 遷移種別ルール(push/modal) |
| 5 | 状態保持設計 | タブごとの状態保持ポリシー |
| 6 | iPad適応 | カラム割り当て、並列表示方針 |
| 7 | ディープリンク | ルーティング表、状態復元規則 |
詳細は references/modules-detail.md を参照。
すべてのモジュール成果物を統合し、最終ドキュメントを生成。
テンプレート詳細は references/output-templates.md を参照。
| 資料 | 用途 |
|---|---|
| Apple HIG - Navigation | 遷移原則 |
| WWDC22「Explore navigation design for iOS」 | タブ設計、push/modal使い分け |
| WWDC22「The SwiftUI cookbook for navigation」 | NavigationStack/SplitView実装 |
主要原則は references/hig-navigation-principles.md を参照。
| 分類 | 定義 | 対応 |
|---|---|---|
| Blocker | 未回答だと構造が決まらない | 即時質問 |
| High-impact | 後で直せるが手戻り大 | 早期質問 |
| Detail | 後回し可能 | 暫定仮定で進行 |
質問は「選択肢+影響」を添える:
Q: トップレベルはA/Bどちらが自然ですか?
- A案: タブ3つ(Home/Search/Profile)→ シンプル、検索が独立
- B案: タブ5つ(上記+Notifications/Settings)→ 直接アクセス可、タブ多め
影響: 検索導線の置き場所、タブバーの密度
返答がない場合は仮定で進め、ログに残す:
assumption:
id: A001
content: "iPadはセカンダリターゲットとしてSplit View対応"
impact: "変更時はModule 6再設計が必要"
status: unconfirmed
npx claudepluginhub caphtech/claude-marketplace --plugin mobile-pluginUse when asked to design iOS or Android mobile app screens, create mobile UI, spec mobile flows, or produce screen designs for a native app. Examples: "design the onboarding screens", "spec the checkout flow for iOS", "design a home screen for Android", "create mobile UI for this feature".
Designs iOS/Android mobile app screens, UIs, flows via 5-phase process: discovery questions, brief confirmation, specs. Triggers on screen/UI/flow design requests.
Apple Human Interface Guidelines for layout and navigation. Covers sidebars, split views, tab bars, scroll views, adaptive patterns for iOS, iPadOS, macOS, visionOS.