Flutter Agent Skills

Agent skills for Flutter, maintained by the Flutter team. A collection of skills providing tailored instructions for happy path Flutter app development workflows. By giving the agent actual domain expertise and repeatable workflows, you drastically reduce mistakes and ensure agents reliably complete the task following best practices.

Skills are essentially simple folders of files that can be seen as complementary to MCP, where MCP gives an agent access to specialized tools and a Skill teaches the agent “how” to use tools for a specific task.

You can also install the Agent Skills for Dart for Dart tasks.

Installation

To install all skills into your project, run the following command. The --agent universal flag puts it in the standard .agents/skills folder that most agents use.

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

Updating Skills

To update, run the following command:

npx skills update

Available Skills

Skill	Description
flutter-accessibility-audit	Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.
flutter-add-integration-test	Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.
flutter-add-widget-preview	Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
flutter-add-widget-test	Implement a component-level test using WidgetTester to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
flutter-apply-architecture-best-practices	Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
flutter-build-responsive-layout	Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
flutter-fix-layout-issues	Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.
flutter-implement-json-serialization	Create model classes with fromJson and toJson methods using dart:convert. Use when manually mapping JSON keys to class properties for simple data structures.
flutter-setup-declarative-routing	Configure MaterialApp.router using a package like go_router for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.
flutter-setup-localization	Add flutter_localizations and intl dependencies, enable "generate true" in pubspec.yaml, and create an l10n.yaml configuration file. Use when initializing localization support for a new Flutter project.
flutter-use-http-package	Use the http package to execute GET, POST, PUT, or DELETE requests. Use when you need to fetch from or send data to a REST API.

Contributing

We aren't accepting pull requests at this time, but we would love to hear your feedback!

Please see CONTRIBUTING.md for more information.

Code of Conduct

Please see CODE_OF_CONDUCT.md for more information.