flutter/skills

# Flutter Agent 技能 由 Flutter 团队维护的 Flutter Agent 技能。 这是一系列技能的集合，旨在为顺畅的 Flutter 应用开发工作流提供量身定制的指导。通过赋予 Agent 真正的领域专业知识和可重复的工作流，您可以大幅减少错误，并确保 Agent 遵循最佳实践可靠地完成任务。 技能本质上是简单的文件文件夹，可被视为对 MCP 的补充。MCP 赋予 Agent 访问专用工具的能力，而 Skill 则教会 Agent 针对特定任务“如何”使用这些工具。 您还可以安装 [Dart Agent 技能](https://github.com/dart-lang/skills)来处理 Dart 任务。 ## 安装 要将所有技能安装到您的项目中，请运行以下命令。 `--agent universal` 标志会将其放入大多数 Agent 使用的标准 `.agents/skills` 文件夹中。 ``` npx skills add flutter/skills --skill '*' --agent universal ``` ## 更新技能 要更新技能，请运行以下命令： ``` npx skills update ``` ## 可用技能 | 技能 | 描述 | 示例提示词 | |---|---|---| | [flutter-add-integration-test](skills/flutter-add-integration-test/SKILL.md) | 配置 Flutter Driver 进行应用交互，并将 MCP 操作转换为永久的集成测试。当在项目中添加集成测试、通过 MCP 探索 UI 组件，或使用 integration_test 包自动化用户流程时使用。 | 添加一个验证结账体验的集成测试 | | [flutter-add-widget-preview](skills/flutter-add-widget-preview/SKILL.md) | 使用 previews.dart 系统向项目添加交互式 Widget 预览。在创建新 UI 组件或更新现有界面时使用，以确保设计一致性和交互式测试。 | 为 ProductCard Widget 创建具有不同价格状态的预览 | | [flutter-add-widget-test](skills/flutter-add-widget-test/SKILL.md) | 使用 `WidgetTester` 实现组件级测试，以验证 UI 渲染和用户交互（点击、滚动、输入文本）。当需要验证特定 Widget 是否正确显示数据并按预期响应事件时使用。 | 为 CustomButton 添加 Widget 测试，以验证 onTap 回调是否被调用 | | [flutter-apply-architecture-best-practices](skills/flutter-apply-architecture-best-practices/SKILL.md) | 使用推荐的分层方法（UI、Logic、Data）构建 Flutter 应用。在构建新项目或进行可扩展性重构时使用。 | 重构身份验证流程，使其遵循推荐的分层架构 | | [flutter-build-responsive-layout](skills/flutter-build-responsive-layout/SKILL.md) | 使用 `LayoutBuilder`、`MediaQuery` 或 `Expanded/Flexible` 创建能适应不同屏幕尺寸的布局。当需要 UI 在移动端和平板/桌面端外观良好时使用。 | 使主屏幕具备响应式特性，在平板上显示网格，在手机上显示列表 | | [flutter-fix-layout-issues](skills/flutter-fix-layout-issues/SKILL.md) | 使用 Dart 和 Flutter MCP 工具修复 Flutter 布局错误（溢出、无界约束）。当处理“RenderFlex overflowed”、“Vertical viewport was given unbounded height”或类似布局问题时使用。 | 修复当键盘可见时个人资料页面上的溢出错误 | | [flutter-implement-json-serialization](skills/flutter-implement-json-serialization/SKILL.md) | 使用 `dart:convert` 创建带有 `fromJson` 和 `toJson` 方法的模型类。当需要手动将 JSON 键映射到类属性以处理简单数据结构时使用。 | 为 User 模型类实现 JSON 序列化 | | [flutter-setup-declarative-routing](skills/flutter-setup-declarative-routing/SKILL.md) | 使用 `go_router` 等包配置 `MaterialApp.router`，实现高级的基于 URL 的导航。在开发需要特定深度链接和浏览器历史记录支持的 Web 应用或移动应用时使用。 | 设置 GoRouter，包含主页、详情页和设置页的路径 | | [flutter-setup-localization](skills/flutter-setup-localization/SKILL.md) | 添加 `flutter_localizations` 和 `intl` 依赖项，在 `pubspec.yaml` 中启用 "generate true"，并创建 `l10n.yaml` 配置文件。在为新的 Flutter 项目初始化本地化支持时使用。 | 设置本地化并添加英文和西班牙文翻译 | | [flutter-use-http-package](skills/flutter-use-http-package/SKILL.md) | 使用 `http` 包执行 GET、POST、PUT 或 DELETE 请求。当需要从 REST API 获取或向其发送数据时使用。 | 使用 http 包从 API 获取产品列表 | ## 贡献 我们目前不接受 Pull Request，但我们非常乐意听取您的反馈！ 有关更多信息，请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。 ## 行为准则 有关更多信息，请参阅 [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)。

标签：Agent Skills, AI代理, Dart, Flutter, Flutter Driver, MCP, npx, UI组件预览, WidgetTester, 代码生成, 单元测试, 威胁情报, 工作流自动化, 开发者工具, 数据管道, 最佳实践, 渗透测试工具, 移动应用开发, 跨平台开发, 软件工程, 集成测试