Flutter 發表 Skills 官方，Flutter 在 AI 領域再添一助力

Flutter 發布官方 Skills ，Flutter 在 AI 領域再添一助力

在之前的《Flutter 2026 Roadmap》我們就聊到，如今一個專案要有發展前景，就必須能夠和 AI 持續貼一起，而顯然 Flutter 做到了，除了之前的 Flutter MCP 、GenUI 等 AI 相關支持產品，現在官方又新增了 flutter/skills 支持，用於補全 Flutter 在 AI 程式設計缺乏官方 skills 的短板。

flutter/skills 作为給 AI Agent（Agent / Copilot / Claude / Cursor 等）用的技能庫，核心目標是讓 AI 在 Flutter 專案裡，面對執行複雜開發流程時，AI 有相應的規範和指導流程：

決策邏輯：告訴 AI 什麼時候該選哪種方案
詳細指令：包含具體的程式碼實現和步驟
嚴格約束：防止 AI 生成錯誤或過時的程式碼（如禁止使用已廢棄的 API）

當然，這些 skills 所需的資料，其實都來自專案裡的 Skills CLI ，Skills CLI 會調用 Gemini，把官方的 Flutter 文檔“壓縮成可執行的 SKILL.md” ，也就是它會 crawl 文檔網站找頁面，然後用 Gemini 轉成結構化 SKILL.md，對此 CLI 的主要有兩個核心命令：

generate-skill：從 YAML 生成（支持 --skill 只生成某一個；支持 --directory 輸出到指定目錄）
validate-skill：重新生成並和已有 skills 比對，用來做一致性/回歸驗證（還支持 --thinking-budget）

具體流程為：

透過 resources/flutter_skills.yaml 指定技能名稱、描述以及原始文檔的資源連結（HTTPS 或本地檔案）
ResourceFetcherService 抓取網頁內容，並由 MarkdownConverter 將 HTML 轉換為乾淨的 Markdown 格式，去除導航欄、頁腳等噪點
調用 Gemini 接口，向 AI 發送原始文檔、技能模板指令（skill_instructions.dart）和特定提示詞（Prompts.dart），要求 AI 生成符合規範的技能文檔
生成的 SKILL.md 包含統一的 H1 標題、## Goal（目標）、## Instructions（指令）和 ## Constraints（約束）和程式碼片段
提供 validate-skill 命令，讓 AI 重新審視已生成的技能，根據準確性、結構和完整性進行打分（0-100分），確保輸出質量

而在目前的專案，主要覆蓋有 20 多個不同技能：

類別	技能	能力
基礎環境	`linux/macos/windows-setup`	配置三端的 Flutter 開發環境及工具鏈
核心架構	`flutter-architecture`	實現 clean Flutter 腳手架和單一資料源架構
狀態與數據	`flutter-state-management`	處理全局與局部狀態，實施單向資料流
	`flutter-databases`	基於 `sqflite` 的持久化存儲實現
	`flutter-caching`	記憶體、檔案系統、圖像等多層快取策略
UI 與布局	`flutter-layout`	約束系統、回應式與自適應佈局
	`flutter-animation`	實現隱式、顯式、物理及 hero 動畫
	`flutter-theming`	Material 3 主題適配、按鈕遷移與平台常用設計
網路與並發	`flutter-http-and-json`	處理非同步網路請求與結構化 JSON 序列化
	`flutter-concurrency`	使用 Isolates 處理背景任務（如大資料解析）
原生整合	`flutter-native-interop`	FFI 呼叫 C/C++、平台通道（MethodChannel）通訊
	`flutter-platform-views`	在 Flutter 中嵌入原生 Android/iOS 視圖
	`flutter-plugins`	跨平台插件及嵌入生命週期管理
功能特性	`flutter-navigation`	路由跳轉、動態參數傳遞與深層連結處理
	`flutter-localization`	多語言支持
	`flutter-accessibility`	輔助技術支持、語義化標籤與無障礙測試
優化與測試	`flutter-performance`	辨識渲染抖動、優化 UI 線程與 Raster 線程性能
	`flutter-app-size`	測量並縮減安裝包體積（分析建構產物）
	`flutter-testing`	單元測試、元件測試與整合測試

這些技能在 AI Coding 的時候，可以很好幫助 AI 完成專案管理和迭代，比如 flutter-plugins 裡：

會明確包含哪些修改 build.gradle 或 Info.plist 的具體步驟
是使用 ffi 還是 Method Channels
是不是需要使用 Package-Separated Federated Plugin

這對於 AI 在決策和實現 Flutter Plugin 程式碼生成的規範和成功率都有明顯提升，同樣的，對於 flutter-architecture ，可以讓 AI 在寫程式碼時遵循「Clean Architecture」，讓 AI 輸出單向資料流 + 嚴格分層（UI/Domain/Data）+ 職責隔離的架構，例如：

分層約束：UI / Data / Domain 的職責邊界
資料源拆分：Remote Service vs Local Service 的建模方式
Service 純封裝：Service 必須無狀態、無業務邏輯
Repository 單一可信源：只有 Repository 能 mutate 資料
錯誤顯式化：Repository 捕捉異常並返回 Result Ok/Error
可觀察資料流：Repository 可透過 Stream 對外暴露變化
狀態管理：ChangeNotifier 持有 UI state、集中處理互動
Command 模式：用 Command0 封裝非同步動作/互動入口，避免 View 直接寫 async 邏輯
View 零業務邏輯：View 只能佈局/簡單條件渲染/路由，不做資料變更
單向資料流校驗規則：Repository → ViewModel → View（資料下行），View → ViewModel → Repository（事件上行），並提供“Validate and Fix”的修復策略

另外 flutter-performance 也很實用，它把性能優化定義成三類問題，並且以 16ms 帧預算為基準來判斷 jank：

UI thread（Dart / build 階段）卡頓
Raster thread（GPU / paint 階段）卡頓
Web 端 profiling 的特殊路徑

flutter-performance 的決策邏輯是：

要不要先做 baseline？
- 要：寫 integration test，用 traceAction + TimelineSummary
是否 Web？
- Web：開 profiling flags + Chrome DevTools Performance
- 非 Web：真機 --profile + Flutter DevTools
看 DevTools 裡哪條線程紅（>16ms）：
- UI：優化 build / setState 顆粒度 / const / StringBuffer
- Raster：減少 saveLayer/Opacity/Clip/ImageFilter，等等
- 兩邊都紅：先 UI 再 Raster（因為 Dart 端過慢會連鎖影響渲染）

同時，它也提供了一些優化建議給 AI ，例如：

UI Thread（Build 成本）
- “localize setState” —— 把狀態下沉，縮小重建範圍
- “use const” —— 減少重建遍歷
- “循環裡字串拼接用 StringBuffer”
Raster Thread（繪製成本）
- 避免 Clip.antiAliasWithSaveLayer
- 少用 saveLayer、ImageFilter
Layout / Intrinsics
- ListView.builder / GridView.builder
- 避免不必要的 shrinkWrap: true