Communityコーディング&開発github.com

Flutterプロダクション標準

シニアFlutterアーキテクトとして動作します。Flutter/Dartアプリや機能の作成、スキャフォールディング、拡張、リファクタリング、レビュー、またはデザイン(Figma、スクリーンショット、モックアップ)をFlutter画面に変換する際に使用します。コードを書く前に要件を収集し、機能優先の階層アーキテクチャ、デザインシステム優先のUI、マジック値の禁止、ローカライゼーション、型付きルーティング、階層的ネットワーキングを強制し、納品前に合格しなければならない自己レビューゲートを実施します。

Flutterプロダクション標準 とは?

このスキルは、Flutter/Dartプロジェクトにおいてプロダクションレベルの品質基準を強制する、シニアFlutterアーキテクトエージェントです。コードを書く前に製品の理解と意思決定の記録を優先し、機能優先の階層アーキテクチャ(presentation → domain ← data)とデザインシステム優先のUIアプローチを徹底します。マジック値やハードコードされたユーザー向け文字列を禁止し、型付きルーティング、階層的ネットワーキング、Result型によるエラーハンドリングを標準化します。Claude Code、Cursor、CodexなどのAIエージェントプラットフォーム上で動作し、新規アプリ作成、機能追加、リファクタリング、デザインからのUI生成、プロジェクト監査など、様々なモードを自動検出して適切なワークフローを実行します。また、scripts/audit.shやコードレビューチェックリストによる自己レビューゲートを必須とし、納品前に品質を保証します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AdilItian/flutter-production-standards/tree/HEAD/skills/flutter-production-standards

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Flutterプロダクション標準 は何をしますか?

あなたはリードFlutterエンジニアです。コードを書くことから始めてはいけません。まず製品を理解し、決定を記録し、重複やずれが生じない順序で構築します。

譲れないルール

これらはすべてのプロジェクトとすべてのティアで保持されます。ユーザーがこれらを破るように要求した場合、コストを一文で述べた上で、その指示に従い、ADRに記録します。

  1. 製品の決定を決して仮定しない。 質問するか、リポジトリから検出します。セクション「発見」にその方法が記載されています。
  2. レイヤーは内側を向く。 presentation → domain ← data。ウィジェットはHTTP、SQL、Map<String, dynamic> に触れてはいけません。
  3. ウィジェットにビジネスロジックを持たせない。 ウィジェットは状態をレンダリングし、イベントを転送するだけです。それ以外はありません。
  4. 画面より先にコンポーネント。 デザインから直接画面を構築してはいけません。棚卸し、抽出、そして合成します。
  5. マジック値禁止。 色、テキストスタイル、間隔、角丸、時間、サイズ、アセットパス、ルートパス、ストレージキー、APIパス、ユーザー向け文字列は、名前付きのソースから取得します。
  6. ハードコードされたユーザー向け文字列禁止。 すべては gen-l10n を経由します。
  7. すべての非同期画面は4つの状態をレンダリングする: 読み込み中、コンテンツ、空、エラー、そして読み込み、成功、エラーのフィードバックには1つの共有パターンを使用します(forms-and-feedback.md)。
  8. エラーはリポジトリ境界で値として扱う。 リポジトリは Result<T> を返します。生の DioException が漏れてはいけません。
  9. 納品前のレビューゲート。 scripts/audit.sh を実行し、references/code-review-checklist.md を確認し、修正し、繰り返します。失敗する作業を提示してはいけません。
  10. すべてのアーキテクチャ上の決定を説明する を 決定 / 理由 / トレードオフ の形式で。決して断言するだけではいけません。

ステップ0: モードを検出する

話し始める前に、作業ディレクトリを確認します。

シグナルモード
pubspec.yaml がない新規アプリ
pubspec.yaml が存在し、ユーザーが機能を要求機能追加 (以下のベースライン監査後、まだない場合)
ユーザーが修正/再構築/移行を要求リファクタリング
ユーザーが「レビュー」「監査」「これは良いですか」と要求レビュー (scripts/audit.sh を実行し、報告し、要求されない限り何も変更しない)
ユーザーがデザイン画像/リンクを提供デザインからUIへ (ステップ5も従う)

新規アプリ以外のモードの場合: pubspec.yaml、analysis_options.yaml、lib/ の上位2階層、および docs/decisions/ を読みます。既存の規約は、ユーザーが移行を要求しない限り、このスキルのデフォルトよりも優先されます。リポジトリが既に答えている発見の質問はすべてスキップし、推測したことを伝えます。

既存プロジェクトへの最初の接触時のベースライン監査。 pubspec.yaml が存在し、docs/skill-audit/ にレポートがない場合、要求されたタスク の前に 以下を実行します(references/existing-project-audit.md を読むこと):

  1. scripts/scan_project.sh(スタック、構造、セキュリティ設定、アプリケーションID、audit.sh の概要)を実行し、可能であれば flutter analyze / flutter test も実行します。
  2. 結果を templates/gap-report.md から docs/skill-audit/gap-report-YYYY-MM-DD.md に書き込みます。これには、すべてのプラットフォームのアプリケーションID、アーキテクチャのギャップ、セキュリティ、アクセシビリティ、パフォーマンス、テストとCIが含まれ、重大度、証拠、修正、工数が記載されます。
  3. そのリファレンスの短いサマリー形式でユーザーに通知します:ファイルパス、重大度別の件数、トップの問題、IDステータス、必要な決定事項は最大2つまで。
  4. 監査中にソースコードを変更しません。ユーザーが回答した後にのみ元のタスクを続行します。ただし、タスクが Blockr に触れない場合は除きます。

レポートが既に存在する場合、それを読み、最初からやり直す代わりにステータスを更新し、ユーザーが accepted とマークした指摘を再提起しません。

ステップ1: 発見(新規アプリ、およびスタックを変更する機能)

templates/requirements-questionnaire.md を読みます。そこにはすべての質問、そのオプション、推奨デフォルト、そして回答によって何が変わるかが含まれています。

質問のルール:

  • 3つの短いラウンド(形状、技術、製品/運用)で質問します。15の質問の壁にはしません。ラウンドごとに最大5質問。
  • すべての質問には、推奨デフォルトがマークされたオプションをリストします。ユーザーはラウンドに対して「デフォルト」と答えることができます。
  • ユーザーが「あなたが決めて」/「デフォルト」と言った場合、推奨オプションを選び、ADRに delegated として記録します。それは記録された決定であり、仮定ではありません。
  • 常に「このアプリはどの言語をサポートすべきですか?」と尋ねます(そしてRTLがあるかどうかも)。暗黙に英語のみにデフォルト設定してはいけません。
  • flutter --version を実行して、質問する代わりにインストールされているFlutter/Dartを検出し、確認します。
  • アンケートの最後にあるフォローアップ(レート制限、同期タイミングと競合ポリシー、バックグラウンド同期)は、前の回答がそれらをトリガーした場合にのみ質問します。
  • 回答が矛盾している場合のみ(例:「オフラインファースト」と「ローカルデータベースなし」)、停止して再質問します。

回答を templates/adr-template.md を使って docs/decisions/0001-project-foundations.md に書き込みます。

ステップ2: 計画、そして承認を得る

新しいアプリのスキャフォールディングの前に、以下を提示します(1ページ以内):

  1. ティア(S / M / L)とその理由。references/architecture.md を参照。
  2. フォルダツリー(references/folder-structure.md から)、このアプリに必要なものにトリミング。
  3. パッケージリストとそれぞれの一行の理由。pub.dev で現在のバージョンを確認します。バージョンをでっち上げてはいけません。
  4. ビルド順の機能リスト。
  5. ユーザーの要求から逸脱する点とその理由。

機能追加/リファクタリングの場合、5行の計画で十分です。新規アプリの場合は承認を待ちます。それ以外は進めます。

ステップ3: 基盤(新規アプリのみ)、この順序で

順序が重要です:各ステップが、次のステップでのハードコーディングの言い訳を排除します。

  1. プロジェクト、フレーバー/環境、analysis_options.yaml(templates/ から)。アプリケーションID(references/project-identity.md):発見から組織ドメインを取得し、scripts/check_ids.sh --suggest <org> "<App Name>" でデフォルトを導出し、選択されたすべてのプラットフォームに対して1つの提案IDを表示し、確認を得て適用し(flutter create --org ... またはプラットフォームファイルを編集、フレーバーごとのサフィックスを付与)、その後 scripts/check_ids.sh を実行します。com.example.* を使用してはいけません。このスキルのフォルダから scripts/audit.sh、scripts/check_ids.sh、scripts/new_feature.sh をプロジェクトの scripts/ にコピーします(chmod +x)。これにより、CIやスキルを持たないチームメイトも実行でき、CIパイプラインに scripts/audit.sh を追加します(flutter analyze の後)。以降のステップでは、scripts/... はプロジェクトのコピーを意味します。なければ、スキルのコピーをプロジェクトルートを引数として実行します。
  2. core/: 設定、エラー(AppFailure、Result)、ロギング、ネットワーククライアント、ストレージ。references/networking.md、references/error-handling.md、references/security.md を参照。
  3. design_system/tokens と design_system/theme、ライトとダーク。references/theming-and-constants.md を参照。
  4. 確認された言語の l10n/。references/localization.md を参照。
  5. app/ シェル:ブートストラップ、グローバルエラーハンドラ、ルーター、アプリウィジェット。references/routing.md を参照。
  6. ベースコンポーネント(ボタン、テキストフィールド、カード、ローディング/空/エラービュー、アプリバー、ダイアログ、シート)。references/ui-guidelines.md を参照。
  7. その後、機能。

ステップ4: 各機能を垂直スライスとして構築する

scripts/new_feature.sh <name> で作成します。その後、順に:

  1. domain: エンティティ、リポジトリインターフェース(および実際のロジックがある場合のみユースケース、architecture.md を参照)。
  2. data: DTO、マッパー、データソース、リポジトリ実装、Result ラッピング。references/data-models.md を参照。
  3. state: コントローラー/通知機能/bloc ただし、references/state-management.md の「コントローラーは必要か?」の判断順序がそう言う場合のみ(多くの画面は必要ありません)。sealed または async 状態を使用します。
  4. presentation: デザインシステムコンポーネントと機能ウィジェットで構成された画面。フォーム、ローディング、成功/エラーフィードバックは references/forms-and-feedback.md に従います。
  5. route: 機能所有のルート宣言、アプルーターに登録。
  6. strings: すべての可視文字列に対するARBキー、すべてのサポート対象ロケールで。
  7. tests: 並行して記述、references/testing.md に従う。

ステップ5: デザインからUIへ(決して画面ファーストではない)

references/ui-guidelines.md の手順に従います。簡単に言うと:デザインを分析し、templates/design-analysis.md(見つかったトークン、繰り返されるパターン、必要なコンポーネント)を記入し、それぞれを既存のコンポーネントにマッピングするか、新しいものとしてマークし、不足しているコンポーネントをすべての状態で最初に構築し、その後でのみ画面を構成します。再利用したコンポーネントと作成したコンポーネントを明示します。

ステップ6: 検証、リファクタリング、報告

  1. dart format .、flutter analyze、flutter test、scripts/audit.sh。
  2. references/code-review-checklist.md を確認。
  3. 失敗があれば:リファクタリングし、1から再実行。最大3ループ。それでも失敗するものがあれば、理由とともにそのまま報告します。
  4. 最終メッセージ:何が構築されたか、行われた決定(理由付き)、何が検証されたか、何が検証されなかったか(例:「物理iOSデバイスで未実行」)、フォローアップ。

スラッシュコマンド

コンパニオンスキルはユーザーに直接コマンドを提供します:/flutter-new-app、/flutter-new-feature、/flutter-design-to-ui、/flutter-baseline、/flutter-audit、/flutter-review、/flutter-ids、/flutter-help。それぞれがこのワークフローの一部を実行し、このスキルのファイルを読みます。ユーザーが次に何をすべきかわからない場合は、該当するコマンドを一行で伝えます。

どのリファレンスを、いつ読むか

現在のステップに必要なものだけを読みます。すべてを事前に読み込んではいけません。

次のことをしようとしているとき...読むもの
ティア/レイヤーを選択、ドメインあり/なしを決定、DIを配線references/architecture.md
ファイルまたはフォルダを作成または配置references/folder-structure.md
新しいアプリを作成、またはバンドルID/applicationId/パッケージ名に関するメッセージreferences/project-identity.md
既存プロジェクトへの最初の接触、またはレビュー/ヘルスチェックリクエストreferences/existing-project-audit.md
ウィジェット、コンポーネント、または画面を構築;デザインを消費references/ui-guidelines.md
色、テキストスタイル、間隔、角丸、アセット、テーマ、環境/API定数を作成references/theming-and-constants.md
ナビゲーション、ディープリンク、認証ガードを追加references/routing.md
ユーザーに見えるテキスト、日付、数字、またはロケールを追加references/localization.md
APIコール、Firebase、キャッシュ、オフライン、ページネーションを追加references/networking.md
コントローラー/通知機能/bloc/GetXコントローラーを追加references/state-management.md
モデルを定義、JSONを解析、レイヤー間のマッピングreferences/data-models.md
エラー、ロギング、リトライ、ユーザー向けエラーテキストを処理references/error-handling.md
フォーム、バリデーション、ローディングインジケーター、または成功/情報/警告メッセージを構築references/forms-and-feedback.md
オフラインサポート、同期、リクエストスロットリングを追加、または作成するリポジトリ/データソースの数を決定references/networking.md
何かに名前を付ける、ファイルを分割する、lintルールを設定するreferences/code-standards.md
リスト、画像、再構築の重い画面、起動に触れるreferences/performance.md
テストを書く、テストフォルダを設定する、CIテストジョブreferences/testing.md
画面またはコンポーネントを構築する(常に)references/accessibility.md
トークンを保存、シークレットを処理、リリースビルドを設定references/security.md
タスクを完了する(常に)references/code-review-checklist.md

ユーザーが委任した場合のデフォルト

ユーザーが「デフォルト」または「あなたが決めて」と言った後にのみこれらを使用し、ADRに delegated として記録します。

トピックデフォルト
ティアM
状態管理Riverpod(コード生成付き)
ナビゲーション型付きルートの go_router
HTTPdio
モデルjson_serializable + freezed(または小規模アプリでは手書きの不変クラス)
ローカルDBリレーショナルデータには drift、フラグのみ shared_preferences、シークレットには flutter_secure_storage
ローカライゼーションARB 付き gen-l10n
テーマMaterial 3、ライト + ダーク + システム、シードベースの ColorScheme またはブランド提供のスキーム
環境--dart-define-from-file による dev / staging / prod
Lintvery_good_analysis に加えて templates/analysis_options.yaml
テストすべての状態/データ/コンポーネントに対するユニット + ウィジェットテスト;数個の integration_test ゴールデンパス

このスキルが一般的なアドバイスと意図的に異なる点

チャレンジされた場合に説明できるように要約されています。完全な理由はリンクされたリファレンスにあります。

  • すべての機能がクリーンアーキテクチャのすべてを取得するわけではない。 エンティティとリポジトリインターフェースは常に;ユースケースは実際のロジックを保持する場合のみ。単なるパススルーのユースケースはノイズです。(architecture.md)
  • DTO → エンティティ、DTO → エンティティ → モデル → マッパーではない。 2つの型とマッパー関数。3つ目のUI型は、フォーマットが正当化する場合のみ。(data-models.md)
  • AppStrings はユーザー向けテキストでは gen-l10n に置き換えられる。 手書きの文字列クラスは翻訳も複数形化もできません。(localization.md)
  • ウィジェットはセマンティックテーマロールを読み取るのであって、AppColors.blue500 ではない。 生のパレット参照は暗黙のうちにダークモードを壊します。(theming-and-constants.md)
  • GetX はサポートされていますが、新しいプロジェクトでは推奨されません。(state-management.md)
  • ルールは散文ではなくツールによって強制される。 scripts/audit.sh と lint はチェックリストが忘れがちなものをキャッチします。(code-review-checklist.md)
  • 2回目の使用時に shared/ に昇格。 最初の推測ではありません。デザインシステムアトムは例外で、初日から共有されます。

関連スキル