flutter-navigation
Flutterのナビゲーションとルーティングの実装・修正・リファクタリング・レビュー・移行・検証を行います。Navigator、MaterialPageRoute、Router API、go_router、ルートガード、リダイレクト、ShellRoute/StatefulShellRoute、ネストされたNavigator、ルートデータの受け渡し、ディープリンク、Android App Links、iOS Universal Links、カスタムURIスキーム、Flutter WebのURL戦略、ブラウザ履歴、404ルーティング、ルートテスト、ナビゲーション状態のバグなどに対応します。
description の原文を見る
>- Implement, fix, refactor, review, migrate, or validate Flutter navigation and routing. Use when working with Navigator, MaterialPageRoute, Router API, go_router, route guards, redirects, ShellRoute or StatefulShellRoute, nested Navigators, passing and returning route data, deep links, Android App Links, iOS Universal Links, custom URI schemes, Flutter web URL strategy, browser history, 404 routing, route tests, or navigation-state bugs.
SKILL.md 本文
Flutter Navigation
あなたは Flutter ナビゲーション実装エージェントです。ルート状態、ブラウザ/ディープリンク動作、画面遷移が、既存の状態、認証フロー、プラットフォーム要件を破壊することなくターゲットアプリに適合することを確認するのがあなたの仕事です。
原則 0
ナビゲーションはユーザー状態です。アプリのルーティングモデルを置き換えたり、ディープリンク機能を追加する前に、現在の MaterialApp、Router、Navigator、ステート管理、認証、対応プラットフォーム、およびテストを検査してください。ナビゲーションを変更した後、Dart がアナライザークリーンであることと、変更の影響を受けるルート動作を検証してください。
ワークフロー
- リクエストを特定します:単純な画面遷移、データの受け渡し、戻り値、ルートマイグレーション、ディープリンク設定、ウェブブラウザ履歴、ネストされたタブまたはシェル、認証リダイレクト、ルートエラーハンドリング、またはナビゲーションテスト。
- コードが利用可能な場合は、ローカル Flutter プロジェクトを最初に検査します:
pubspec.yaml、lib/、アプリルート、既存のルート定義、ナビゲーション呼び出し、認証/ステートプロバイダ、プラットフォームフォルダ、ウェブホスティング設定、および関連するテスト。 - 製品要件を満たす最小限のルーティングモデルを選択します:
- シンプルなアプリでローカル、アドレス指定不可のフローには
NavigatorとMaterialPageRouteを使用します。 - ディープリンク、ウェブ URL、ブラウザ履歴、認証リダイレクト、ネストされたナビゲーション、複数の Navigator、またはスケーラブルなルートテーブルには
go_routerを使用します。 - レガシーな
MaterialApp.routes名前付きルートは、小規模で既に使用されており、カスタムディープリンク動作を必要としない既存アプリを保持する場合を除き、新規で使用しないでください。
- シンプルなアプリでローカル、アドレス指定不可のフローには
- ルートデータを意図的にモデル化します。ローカル Navigator プッシュにはコンストラクタ引数を、必須のアドレス指定可能なアイデンティティにはパスパラメータを、オプションの URL 状態にはクエリパラメータを、アドレス指定不可のインメモリデータにのみ
extraを使用します。 - アプリの既存スタイルで実装します。安定した URL、ルート名、選択されたタブ状態、戻る動作、状態復元、分析オブザーバー、認証リダイレクトセマンティクスを保持します。ただし、ユーザーがそれらを変更するよう指示した場合は除きます。
- 変更されたルート動作のテストを追加または更新します(実行可能な場合)。リクエストされた変更に応じて、ルート解析、リダイレクト、シェル/タブ選択、結果の戻り値、および見つからない/エラースクリーンをカバーします。
- 利用可能な最強のローカルチェックで検証します。スキップされたランタイム、デバイス、サーバー、またはディープリンク検証を明確に報告します。
判断ガイド
| 必要な機能 | デフォルトアプローチ |
|---|---|
| 1 つの詳細画面をプッシュして戻す | Navigator.push<T> with MaterialPageRoute<T> |
| ルートを共有/ブックマーク/ブラウザで表示 | URL ベースのロケーションを使用した go_router |
| 必須のリソースアイデンティティ | パスパラメータ、例:/users/:userId |
| オプションのフィルタ、タブ、または検索状態 | Uri(...).toString() 経由のクエリパラメータ |
| 認証ゲートまたはオンボーディングゲート | go_router リダイレクトまたは onEnter、アプリ認証状態に関連付け |
| 永続的なナビゲーションクロム | ShellRoute;ブランチが独立したスタックを必要とする場合は StatefulShellRoute を使用 |
| ウェブパス URL | usePathUrlStrategy() と SPA サーバー書き換え to index.html |
| ネイティブ検証済みウェブリンク | Android App Links または iOS Universal Links とホストされた関連ファイル |
| カスタムアプリ専用 URI | カスタムスキーム、明示的なセキュリティとフォールバック トレードオフ付き |
リソースルーティング
現在のタスクに必要なリソースのみを読みます:
| タスク | 読む/使用 | 目的 |
|---|---|---|
| Navigator vs go_router の選択またはルートトレードオフのレビュー | navigation-patterns.md | アプローチ比較、データ渡し、ブラウザ/ディープリンク制限 |
| go_router ルートテーブル、リダイレクト、シェル、エラー、名前付きルート、またはルートデータの実装または修正 | go_router-guide.md | 現在の go_router API と一般的な落とし穴 |
| Android App Links、iOS Universal Links、カスタムスキーム、またはディープリンクテストの設定 | deep-linking.md | プラットフォーム設定、関連ファイル、Flutter ハンドラーの注意、テストコマンド |
| Flutter ウェブ URL、ブラウザ履歴、SPA 書き換え、または非ルート ホスティングの修正 | web-navigation.md | URL 戦略、サーバー書き換え、ウェブ固有の検証 |
| 最小限の Navigator スターター | navigator_basic.dart | クラス名とアプリシェルを適応させた後のみコピー |
| 最小限の go_router スターター | go_router_basic.dart | 依存関係を追加してルートを適応させた後のみコピー |
| Navigator でのローカルデータ渡し | passing_data.dart | デモモデルと画面名を置き換えた後のみコピー |
| Navigator での戻り値 | returning_data.dart | null/キャンセル結果を適切に処理した後のみコピー |
デフォルトで全リファレンスを読まないでください。リファレンスはルーティングされた詳細として、アセットはスターター例として扱い、本番モジュールではありません。
実装ルール
- プライマリナビゲーションモデルを軽率に混ぜないでください。アプリが
go_routerを使用する場合は、メインアプリルートにcontext.go、context.push、context.goNamed、またはcontext.pushNamedを優先します。命令型のNavigatorはローカルオーバーレイまたは意図的にディープリンク不可のフロー専用に使用してください。 Uri(path: ..., queryParameters: ...).toString()または go_router 名前付きルート API を使用してクエリ文字列ロケーションをビルドします。context.pushまたはcontext.goにqueryParameters引数を渡さないでください。state.uri.queryParametersからクエリパラメータを、state.pathParametersからパスパラメータを読みます。- 複雑な状態を URL のみに保存しないでください。ルート文字列を解析・検証し、ID と列挙型のような値を安全に変換し、欠落または無効な値をリダイレクト、エラー画面、フォールバック UI、または 404 動作で処理します。
- リフレッシュ、ブラウザ復元、共有、またはネイティブディープリンクを生き残る必要があるデータに
extraを使用しないでください。ウェブで複雑なextraが必要な場合は、コーデックを設定するか、データが削除される可能性を受け入れます。 - 認証リダイレクトをループなく保てください。ログインまたはオンボーディング後にユーザーを元のルートに戻す場合は、目的の宛先を保持します。
- iOS Universal Links の場合は、
Info.plistルートテーブルではなく、Xcode またはios/Runner/Runner.entitlementsで Associated Domains を設定します。 - ウェブパス戦略では、ルート以外のパスでホストされている場合、
web/index.htmlの base href とサーバー書き換えを更新します。ホスティングプレフィックスをすべてのGoRoute.pathにエンコードしないでください。ただし、ターゲットアプリが既にその規約を使用している場合を除きます。 - アセットを盲目的にコピーしないでください。インポート、ルート名、キー、アプリシェル、パッケージバージョン、null セーフティ、リント、テストをターゲットプロジェクトに適応させます。
検証
Flutter プロジェクトを変更した後:
- 編集した Dart ファイルで
dart formatを実行します。 - プロジェクトまたは最も近いパッケージで
flutter analyzeを実行します。 - ルート解析、リダイレクト、シェル/タブ状態、戻り値、またはナビゲーション UI が変更された場合、焦点を絞った
flutter testスイートを実行します。 - ウェブ URL の変更の場合、可能であれば Chrome でアプリを実行し、変更されたルートの直接読み込み、更新、戻る、進む、見つからない動作を確認します。
- ディープリンクの場合、プラットフォームとデバイスが利用可能な場合、
adb、xcrun simctl、または Flutter DevTools Deep Links 検証を使用して正確なターゲット URL をテストします。 - このスキルの Dart アセットのみが変更された場合、必要な依存関係を使用してスクラッチ Flutter アプリで検証し、
dart format --output=none --set-exit-if-changedとflutter analyzeを実行します。
検証が実行できない場合は、コマンド、ブロッカー、検証されないままのルート動作を報告します。ナビゲーション、ブラウザ履歴、またはディープリンク動作を静的読み取りのみから検証されたものとして提示しないでください。
フォールバック
ターゲットプロジェクトが利用できない場合は、ユーザーが提供したファイルと状態のみに基づいてルート計画またはパッチスケッチを提供し、欠落した検証を述べます。アプリが既に矛盾したルーティングモデルを持っている場合は、最初に最小限の可逆的な修正を行い、ルーティングを全体的に置き換えるのではなく段階的なマイグレーションを提案します。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- madteacher
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/madteacher/mad-agents-skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理(非同期ジェネレータを含む)、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。