Flutter Agent Plugins（C线技能）Description

Flutter Agent Plugins — 官方 Flutter 团队维护的 AI 编程技能集

一、技能简介

Flutter Agent Plugins 是由 Flutter 官方团队维护的开源 AI 编程技能插件仓库，将 Flutter/Dart 开发中最常用的工程实践封装为标准化技能模块，无缝对接 Claude Code、Codex、Antigravity、Cursor 等主流 AI 编程工具。该插件将技能（Skills）与 MCP 服务器（MCP Server）打包在一起：MCP 负责提供实时工具调用能力，Skills 负责教 AI"如何正确地"使用这些工具完成特定任务。两者协同，让 AI 生成的 Flutter 代码不再是"能跑但不规范"的草稿，而是真正符合 Flutter 官方最佳实践的生产级代码。

二、核心能力

Flutter Agent Plugins 当前收录了 10 个专项技能，覆盖从项目架构、UI 布局、测试到国际化的完整开发流程：

1. flutter-add-integration-test — 配置 Flutter Driver 并将 MCP 操作转化为永久性集成测试，自动遍历用户操作流并固化为测试用例。
2. flutter-add-widget-preview — 利用 previews.dart 系统为组件添加交互式预览，支持多状态展示，便于在编码过程中实时验证 UI 效果。
3. flutter-add-widget-test — 使用 WidgetTester 实现组件级测试，验证 UI 渲染与用户交互（点击、滚动、输入）是否符合预期。
4. flutter-apply-architecture-best-practices — 强制推行 MVVM 分层架构（UI / Logic / Data），规范项目结构，确保 UI 层不含业务逻辑、ViewModel 通过 Repository 获取数据。
5. flutter-build-responsive-layout — 使用 LayoutBuilder、MediaQuery、Expanded/Flexible 构建自适应布局，一套代码同时适配手机、平板和桌面端。
6. flutter-fix-layout-issues — 自动修复 Flutter 常见布局错误（RenderFlex overflowed、Vertical viewport unbounded 等），基于 MCP 诊断信息定位并修复。
7. flutter-implement-json-serialization — 规范实现 JSON 序列化：创建含 fromJson/toJson 的 Model 类，处理字段映射与空安全。
8. flutter-setup-declarative-routing — 配置 MaterialApp.router，使用 go_router 实现声明式路由，支持深层链接和浏览器历史记录。
9. flutter-setup-localization — 初始化 Flutter 国际化能力：添加 flutter_localizations 和 intl 依赖、配置 l10n.yaml、生成多语言资源文件。
10. flutter-use-http-package — 规范使用 http 包发起 REST API 请求（GET/POST/PUT/DELETE），统一错误处理与响应解析方式。

三、安装配置

安装方式极为简单，官方提供 universal 安装命令，兼容所有主流 AI 编程工具：

通用安装（推荐）：

npx skills add flutter/agent-plugins --skill '*' --agent universal --yes

此命令自动在项目目录下创建 .agents/skills 目录并下载全部 10 个技能文件。

Claude Code 用户：

npx skills add flutter/agent-plugins --skill '*' --agent claude-code --yes

Cursor 用户： 在 Cursor Agent 聊天中执行：

/add-plugin flutter/agent-plugins

安装完成后，AI 编程工具会自动识别并加载技能，无需手动激活。

四、使用步骤

第一步：在项目中触发技能 在 AI 编程工具中描述你的任务，例如：

• "为 ProductCard 组件添加不同价格状态下的预览"
• "为登录流程编写集成测试"
• "修复商品列表页的溢出错误"
• "为项目配置中文和英文国际化"

AI 会根据任务语义自动匹配最相关的技能文件，读取其中的操作指引后执行。

第二步：技能按需加载（渐进式披露） 技能采用"渐进式披露"机制——AI 首先读取技能元数据（名称、描述、适用提示），只有在确有必要时才加载完整操作步骤。这种设计确保上下文窗口不被无关内容填满，同时保证关键指导随时可取。

第三步：MCP 工具辅助执行 技能执行过程中，AI 同时调用 Dart/Flutter MCP 服务器提供的实时工具，包括：

• get_widget_tree：获取当前界面组件树结构
• launch_app：启动应用并获取 DTD URI
• tap、enter_text、scroll：模拟用户交互
• get_health：获取应用运行状态
• analyzer 系列：获取静态诊断与符号解析结果

第四步：验证与迭代 技能执行完成后，AI 自动运行测试或构建验证，确保代码符合规范。对于测试类技能，还会自动清理测试前状态，保证每次运行独立可靠。

五、适用场景

1. Flutter 应用从零搭建 — 借助架构最佳实践技能建立规范的分层项目结构，避免技术债积累。
2. 老项目规范化重构 — 对现有代码应用分层架构改造，提升可维护性与可测试性。
3. 持续集成测试覆盖 — 利用集成测试与组件测试技能，系统性提升项目测试覆盖率。
4. 跨设备响应式开发 — 使用响应式布局技能确保应用在手机、平板、桌面均有良好体验。
5. 团队代码风格统一 — 所有成员使用相同的技能规范，AI 生成的代码风格自动对齐 Flutter 官方标准。
6. API 数据层规范化 — 通过 JSON 序列化和 HTTP 技能，统一 API 调用和数据模型转换方式。
7. 国际化快速上线 — 一条命令完成 i18n 初始化，无需手动配置多个文件。
8. 布局问题快速修复 — AI 自动定位并修复常见的 RenderFlex、Unbounded 等布局报错。

六、适用人群

• Flutter 移动应用开发者 — 希望借助 AI 提升开发效率，同时保持代码规范性的工程师。
• 跨平台前端团队 — 使用 Flutter 构建同时支持 iOS、Android 和 Web 的应用的团队。
• AI 编程工具用户 — 已经使用 Claude Code、Cursor、Codex 等工具，希望获得更专业 Flutter 输出质量的开发者。
• 技术负责人 / 代码审查者 — 通过技能规范约束 AI 生成的代码质量，减少 review 轮次。

七、工作原理

Flutter Agent Plugins 的核心设计理念是"工具（Tools）与方法论（Methodology）解耦"：

• MCP（Model Context Protocol） 赋予 AI 实际操作 Flutter 项目的能力——读取文件、运行测试、获取诊断信息——相当于给 AI 一套万能工具箱。
• Skills（技能） 则告诉 AI"什么时候用哪个工具、怎么用最规范"，相当于给 AI 配备专业导师。

两者结合，AI 不再是盲目生成代码的"概率机"，而是有目标、有方法、有验证的工程助手。技能文件采用标准 SKILL.md 格式（与 SKILL.md 规范完全兼容），可被任何支持 SKILL.md 标准的 AI 工具读取和使用。

八、官方链接

• GitHub 仓库： https://github.com/flutter/agent-plugins
• 官方文档： https://docs.flutter.dev/ai/get-started
• 配套 Dart 技能： https://github.com/dart-lang/skills
• 插件市场： Claude Code 官方插件商店（搜索 "flutter agent plugins"）