[potatotips #96] Give Your AI Agent the Flutter Playbook

This is the slide, "Give Your AI Agent the Flutter Playbook" on potatotips 96.
#flutter #flutterjp #potatotips

Transcript

1. patatotips #96 Give Your AI Agent the Flutter Playbook 2026.08.20 Kenichi Kambara (@korodroid)
2. About me 神原 健一 (X:@korodroid) fi • Mobile App Development • Speeches (e.g. 27 Int’l/100+ Domestic) • Writings (e.g. 10 Dev Books) •[Of cial] Evangelist at NTT TechnoCross •[Private] iplatform.org
3. 本日のお題目(サンプルアプリ)
4. AIへの指示例 • 「レスポンシブにして」 • 「テストも書いて」 • 「Flutterの定石で」 雑に頼むと、精度がぶれる。でも毎回、丁寧に書くのは煩雑。
5. Agent Skills: Flutter開発の作業手順書 Agent skills for Flutter and Dart 依頼 プラグインが補うもの •特定の仕事を進めるための、実 UIを作る Flutterのレイアウト定石 不具合を直す 制約エラーの調べ方・直し方 品質を上げる テストの進め方 践的な手順と専門知識 •公式のため、安心して使える 出典：docs.flutter.dev/ai/agent-skills
6. fl utter/agent-plugins: Flutter開発向け UI Quality Foundation 画面を作る・直す 品質を向上する 土台を整える Responsive Widget Architecture 画面サイズに応じたレイアウト 部品の表示と操作を検証 ルーティング / l10n Layout fixes Integration test Data 制約エラーを直す ユーザー導線をテスト化 JSON / HTTP Widget preview 状態別に見た目を確認 出典：github.com/flutter/agent-plugins
7. ResponsiveのBefore/After 利用したスキル： flutter-build-responsive-layout BEFORE AFTER 例.「レスポンシブにして」 例.「スマホはList、タブレットはGridに」 実装方針を毎回説明する Flutter用の手順書を参照させる テストは後から頼む 見た目確認とテストまでまとめて頼む Flutterの定石も全て言語化する 実装から見た目確認・テストまで依頼 ★全てを解決してくれるものではないが、効率化できる
8. 実行結果(スマホ/タブレット) スマホ タブレット
9. 実行結果(デスクトップ(リサイザブル)) デスクトップ(macOS)
10. スキルの中身 flutter-build-responsive-layout
11. Thank you so much Please let me know if you have any requests such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid