Claude CodeのDart and Flutterプラグインでスキル25本を使う
dart-flutterプラグインに入る25本のスキルを一覧し、Claude Codeでの呼び出し名、使い分け、効かないときの切り分けをまとめます。
Claude CodeでFlutterを書くなら、Flutterチームが保守するDart and Flutterプラグインを入れると、25本のスキルが使えるようになります。内訳は flutter- で始まるものが10本、dart- で始まるものが15本です。
入れ方は2行で済みます。本記事の中心は、その後の話です。どのスキルが何をするのか、Claude Codeでは何という名前で呼ぶのか、読み込まれていないときはどこを見るのか。順に説明します。
25本のスキルは何が入っているか
プラグインのマニフェストでの名前は dart-flutter、表示名は「Dart and Flutter」です。マーケットプレイスのページは、Flutter/DartのスキルとDart MCPサーバーを入れる公式プラグインと説明しています。Anthropic verifiedのバッジも付いています。
リポジトリの skills ディレクトリには、25個のスキルフォルダがあります。READMEの「Available Skills」表に載っているのは flutter- の10本だけです。dart- の15本は表に出てこないので、READMEだけを見ると全体の半分近くを見落とします。
スキルの内訳
flutter- (10本)
UIとアプリ構成の手順書です。ウィジェットテスト、結合テスト、ウィジェットプレビュー、レスポンシブレイアウト、レイアウトエラーの修正、JSONシリアライズ、go_routerによるルーティング、ローカライズ、httpパッケージ、レイヤー構成の整理が入っています。
dart- (15本)
言語とツールチェーンの手順書です。静的解析、ランタイムエラーの修正、ユニットテスト、モックの生成、カバレッジ、パッケージ競合の解消、CLIアプリ、FFI、ドキュメント記述などが入っています。
flutter- の10本と、README掲載の依頼例
READMEには各スキルの説明と依頼文の例が載っています。使い道を決めるときは、この依頼例が出発点になります。
| スキル | READMEの依頼例の趣旨 |
|---|---|
flutter-add-widget-test | READMEの依頼例の趣旨CustomButtonのonTapが呼ばれるか確かめるテストを足す |
flutter-add-integration-test | READMEの依頼例の趣旨チェックアウト体験を検証する結合テストを足す |
flutter-add-widget-preview | READMEの依頼例の趣旨ProductCardを価格状態違いでプレビューする |
flutter-build-responsive-layout | READMEの依頼例の趣旨ホーム画面をタブレットでグリッド、スマホでリストにする |
flutter-fix-layout-issues | READMEの依頼例の趣旨キーボード表示時のプロフィール画面のオーバーフローを直す |
flutter-apply-architecture-best-practices | READMEの依頼例の趣旨認証フローをUI・ロジック・データの層構成にそろえる |
flutter-implement-json-serialization | READMEの依頼例の趣旨UserモデルにfromJson/toJsonを実装する |
flutter-setup-declarative-routing | READMEの依頼例の趣旨GoRouterでホーム・詳細・設定のパスを作る |
flutter-setup-localization | READMEの依頼例の趣旨英語とスペイン語のローカライズを設定する |
flutter-use-http-package | READMEの依頼例の趣旨httpパッケージで商品一覧を取得する |
dart- の15本は名前から用途を読む
dart- 側にREADMEの表はありません。フォルダ名は次の15個です。
dart-add-unit-test/dart-generate-test-mocks/dart-collect-coverage/dart-migrate-to-checks-package(テスト周り)dart-run-static-analysis/dart-fix-runtime-errors/dart-resolve-package-conflicts(解析と修復)dart-use-pattern-matching/dart-use-primary-constructors/dart-use-path-package/dart-use-doc-examples/dart-write-documentation(書き方の流儀)dart-build-cli-app/dart-setup-ffi-assets/dart-use-ffigen(CLIとネイティブ連携)
名前以上の中身は、各フォルダの SKILL.md に書かれています。後述する3本の中身は、その SKILL.md の記述にもとづきます。
Claude Codeで呼ぶときの名前
Claude Codeのドキュメントでは、プラグインのスキルは /プラグイン名:スキル名 の形で名前空間が付きます。プラグインのスキルと、ほかの場所のスキルが同名でも、両方読み込まれるとされています。このプラグインなら、次の形です。
/dart-flutter:flutter-add-widget-test
/dart-flutter:dart-run-static-analysis呼び出し名を覚える必要は、あまりありません。FlutterのドキュメントはClaude Codeで使えるスキルを「オンデマンドの手順書」と呼び、最初に読むのは名前と短い説明だけで、関連があると判断したときに SKILL.md 本体を読むと説明しています。「ウィジェットテストを足して」と頼めば、説明文が一致するスキルが選ばれる想定です。
自動で選ばれず意図が外れたときだけ、名前を指定して呼べば足ります。
導入コマンドと確認
導入の経路は2つあります。Flutterのドキュメントが示すのは、マーケットプレイスを追加してからインストールする2段です。
claude plugin marketplace add flutter/agent-plugins
claude plugin install dart-flutter@dart-flutter
claude plugin marketplace listもう一つは、claude.com/marketplace のプラグインページにあるClaude Codeボタンです。ボタンは claude plugin install <name>@claude-plugins-official の形のコマンドをコピーします。公式マーケットプレイスは最初の対話セッションで自動的に追加されるので、マーケットプレイスの追加は要りません。プラグイン名はボタンがコピーするコマンドをそのまま使ってください。同じプラグインを両方の経路から重ねて入れるのは避けます。導入後にスキルが見えない場合は、再起動なしでプラグインを反映するコマンドで読み込み直せます。
この手順の周辺、つまりCLAUDE.mdの書き方やhot reloadを走らせるルール、dart formatをhookで回す設定はClaude CodeでFlutterアプリを開発する手順にまとまっています。ここでは扱いません。
3本のSKILL.mdの中身
名前と説明だけでは、スキルが何をするのかは決まりません。代表的な3本について、Claude Codeで使う前に知っておきたい点を挙げます。
dart-run-static-analysisはanalyzeとfixの2手順
静的解析スキルの本体は、2つのワークフローでできています。
- 解析:
analysis_options.yamlの存在を確かめ、MCPのanalyze_filesツールかdart analyze <対象>を実行します。info以下も失敗扱いにしたいときは--fatal-infosを付けます - 自動修正:
dart_fixツールかdart fix --dry-runで差分を確かめ、dart fix --applyで適用し、dart format .で整えてから、解析をもう一度回します
ドライランで確認してから適用する順序が、手順として書き込まれています。依頼文にも同じ順序を書いておくと、適用前の確認を挟ませやすくなります。
dart-run-static-analysis を使って lib/ を解析して。
dart fix は --dry-run の結果を見せてから適用して。dart-fix-runtime-errorsは説明文と本文が一致しない
このスキルは説明文と本文が一致しません。説明文(frontmatterの description)には、get_runtime_errors と lsp でスタックトレースを取り、失敗行を特定して直し、hot_reload で確かめると書かれています。ところが SKILL.md の本文は「Resolving Dart Static Analysis Errors」で始まり、中身は型の健全性、null安全、エラー処理の方針と、dart analyze . --fatal-infos から dart fix --apply へ進める静的解析の修復手順です。本文に get_runtime_errors という語は出てきません。
名前から「実行時エラーを直すスキル」と期待して頼むと、本文どおりなら走るのは解析の修復手順です。実行時の状態の検査は、Dart MCPサーバーの機能として別に説明されています。実行中のアプリを直したいときは、アプリを起動した状態で、何を見て直してほしいかを依頼文で具体的に書くと確実です。
flutter-add-widget-testは9ステップの手順書
ウィジェットテストのスキルは、チェックリスト形式で9ステップあります。testWidgets で定義し、pumpWidget で描画し、Finder で要素を探し、初期状態を expect で確かめ、タップなどの操作を入れ、pump か pumpAndSettle で再構築し、更新後の状態を expect で確かめ、flutter test <ファイル> で実行し、失敗したら直して再実行する流れです。
最後の「失敗を読んで直して再実行」まで手順に入っているので、Claude Codeに依頼するときは「通るまで回して」と書かなくても、反復は想定されています。
スキルだけでは足りない部分
FlutterのAIツールは、スキルのほかにルール、Dart and Flutter MCPサーバー、専用エージェントの組み合わせで説明されています。Claude Codeで効くのは、そのうち次のとおりです。
Claude Codeで自動で効く部分と効かない部分
自動で効く
プラグインのスキルとMCPサーバーは、Claude Codeが自動で拾います。MCPサーバーは dart mcp-server を起動する設定で、アナライザー診断、シンボル解決、テスト実行、実行時の状態の検査に使われます。
効かない
ルールは自動では読み込まれません。ドキュメントは、リポジトリの rules ディレクトリから必要なものを自分の CLAUDE.md に写すよう案内しています。専用のa11yエージェントは、ドキュメント上Google Antigravityで使えるものと書かれています。
MCPサーバーの起動コマンドが dart なので、dart コマンドがClaude Codeを起動するシェルのPATHにある必要があります。
Dartスキルは別リポジトリにもある
Flutterのドキュメントは、Dartのスキルを dart-lang/skills から入れる手順も並べています。flutter/agent-plugins の skills に dart- が入っているのとは別の配布経路です。Claude Codeにはプラグイン経由で入るので、npx skills add は不要です。ほかのエージェントも併用するチームが、同じスキルを共有したいときの選択肢と考えてください。
入れたのにスキルが使われないとき
次の順に見ると切り分けられます。
スキルが使われないときの切り分け
- QFlutterのドキュメントの経路で入れた場合、claude plugin marketplace list に flutter/agent-plugins が出ているか答えがいいえのとき答えがはい
マーケットプレイスの追加から再実行します。公式マーケットプレイスのボタン経由で入れた場合は、この項目は飛ばせます。
- Qプラグインのスコープは意図したものか答えがいいえのとき答えがはい
ユーザー、プロジェクト、ローカルのどこに入れたかで、使える範囲が変わります。チームで共有するなら、プロジェクトスコープの設定をコミットし、各自が一度インストールします。
- Q依頼文にFlutterやDartの語が入っているか答えがいいえのとき答えがはい
説明文との一致で選ばれるため、「テストを足して」だけでは別のスキルと迷います。「ウィジェットテストを足して」のように対象を書きます。
名前を指定して呼ぶ
/dart-flutter:<スキル名> で直接呼び出します。
プラグインの設定項目が未入力のときの確認は、claude plugin configureの記事が扱っています。このプラグインのマニフェスト(plugin.json)には、ユーザー設定項目の定義がありません。
使い分けの早見表
| やりたいこと | まず使うスキル | 補足 |
|---|---|---|
| lib/ の警告を片付ける | まず使うスキルdart-run-static-analysis | 補足ドライランを見せてから適用させる |
| 画面の幅で表示を切り替える | まず使うスキルflutter-build-responsive-layout | 補足依頼文に対象の画面と閾値を書く |
| RenderFlex overflowを直す | まず使うスキルflutter-fix-layout-issues | 補足説明文はDart and Flutter MCPツールの利用を前提にしている |
| ウィジェット単位のテスト | まず使うスキルflutter-add-widget-test | 補足flutter test まで回る |
| ユーザー操作の通しテスト | まず使うスキルflutter-add-integration-test | 補足Flutter Driverの設定が絡む |
| 層構成の整理 | まず使うスキルflutter-apply-architecture-best-practices | 補足大きな変更になるので範囲を絞って頼む |
同じ「プラグインを入れてスキルで業務を回す」流れは、AlloyDBプラグインの記事のようにデータベース側でも取り上げています。プラグインとスキルとコネクタの関係を整理したい場合は、Claude.aiのプラグイン機能の解説が入口になります。
まとめ
25本のうち、READMEの表に載るのは flutter- の10本だけで、dart- の15本はリポジトリの skills を見て初めてわかります。入れたら、まず dart-run-static-analysis のように手順が明快なスキルから試し、dart-fix-runtime-errors のように説明文と本文が一致しないものは、依頼文で期待する動きを具体的に書いて補ってください。ルールの読み込みだけは手作業なので、プロジェクトの CLAUDE.md に写すかどうかを導入時に決めておきます。