Add flutter-app-runtime skill for runtime interaction and proactive hot reload - #219
Add flutter-app-runtime skill for runtime interaction and proactive hot reload#219jwren wants to merge 1 commit into
Conversation
…ot reload - Add the `flutter-app-runtime` skill definition to `resources/flutter_skills.yaml`. - Generate `skills/flutter-app-runtime/SKILL.md` to guide agents in discovering running applications via DTD/MCP, proactively hot reloading on widget changes, and diagnosing runtime errors. - Update `README.md` with the new skill entry.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces the flutter-app-runtime skill, enabling interaction with running Dart and Flutter applications via the Dart MCP server. The feedback focuses on adding missing example prompts in README.md and resources/flutter_skills.yaml, as well as correcting the integration of flutter_driver by recommending it be added as a development dependency with a separate entry point (e.g., lib/main_test.dart) to prevent production build bloat and compilation errors.
| | [flutter-add-integration-test](skills/flutter-add-integration-test/SKILL.md) | 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. | Add an integration test that validates the checkout experience | | ||
| | [flutter-add-widget-preview](skills/flutter-add-widget-preview/SKILL.md) | 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. | Create a preview for the ProductCard widget with different price states | | ||
| | [flutter-add-widget-test](skills/flutter-add-widget-test/SKILL.md) | 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. | Add a widget test for the CustomButton to verify the onTap callback is called | | ||
| | [flutter-app-runtime](skills/flutter-app-runtime/SKILL.md) | Interacts with running Dart and Flutter applications via the Dart MCP server to enable hot reload, hot restart, widget inspection, and error fetching. Use when modifying UI widgets, debugging errors, inspecting running apps, or proactively hot reloading whenever changes are made to Flutter UI widgets. | | |
There was a problem hiding this comment.
The example prompt column for the flutter-app-runtime skill is currently empty. To maintain consistency with other skills in the table, please provide a representative example prompt.
| | [flutter-app-runtime](skills/flutter-app-runtime/SKILL.md) | Interacts with running Dart and Flutter applications via the Dart MCP server to enable hot reload, hot restart, widget inspection, and error fetching. Use when modifying UI widgets, debugging errors, inspecting running apps, or proactively hot reloading whenever changes are made to Flutter UI widgets. | | | |
| | [flutter-app-runtime](skills/flutter-app-runtime/SKILL.md) | Interacts with running Dart and Flutter applications via the Dart MCP server to enable hot reload, hot restart, widget inspection, and error fetching. Use when modifying UI widgets, debugging errors, inspecting running apps, or proactively hot reloading whenever changes are made to Flutter UI widgets. | Proactively hot reload the app when making UI changes | |
| - name: flutter-app-runtime | ||
| description: Interacts with running Dart and Flutter applications via the | ||
| Dart MCP server to enable hot reload, hot restart, widget inspection, and | ||
| error fetching. Use when modifying UI widgets, debugging errors, inspecting | ||
| running apps, or proactively hot reloading whenever changes are made to | ||
| Flutter UI widgets. | ||
|
|
There was a problem hiding this comment.
The examplePrompt field is missing for the flutter-app-runtime skill definition. Every other skill in this file defines an examplePrompt to guide users on how to invoke the skill. Adding it here will also allow the README table to be populated correctly.
- name: flutter-app-runtime
description: Interacts with running Dart and Flutter applications via the
Dart MCP server to enable hot reload, hot restart, widget inspection, and
error fetching. Use when modifying UI widgets, debugging errors, inspecting
running apps, or proactively hot reloading whenever changes are made to
Flutter UI widgets.
examplePrompt: "Proactively hot reload the app when making UI changes"
instructions: ||
|
||
| To drive a running Flutter app (take screenshots, tap buttons, enter text), the app must be instrumented with `flutter_driver`. | ||
|
|
||
| - [ ] 1. Verify `flutter_driver` is in `pubspec.yaml`. If not, run `flutter pub add "flutter_driver:{sdk: flutter}"`. |
There was a problem hiding this comment.
flutter_driver is a testing utility and should be added as a development dependency (dev_dependencies) rather than a regular dependency to avoid bloating the production application package.
Suggested change:
- [ ] 1. Verify `flutter_driver` is in `pubspec.yaml`. If not, run `flutter pub add 'dev:flutter_driver:{"sdk":"flutter"}'.`| - [ ] 2. Ensure the app's `main()` function conditionally enables the driver extension: | ||
| ```dart | ||
| import 'package:flutter_driver/driver_extension.dart'; | ||
|
|
||
| void main() { | ||
| if (const bool.fromEnvironment('ENABLE_FLUTTER_DRIVER')) { | ||
| enableFlutterDriverExtension(); | ||
| } | ||
| runApp(const MyApp()); | ||
| } | ||
| ``` | ||
| - [ ] 3. Instruct the user to launch the app with: `flutter run -d <device-id> --dart-define=ENABLE_FLUTTER_DRIVER=true`. |
There was a problem hiding this comment.
Importing package:flutter_driver/driver_extension.dart directly in lib/main.dart will cause compilation errors when building the application for production, because flutter_driver is a dev_dependency and won't be available in production builds. The standard Flutter practice is to create a separate entry point (e.g., lib/main_test.dart) that enables the driver extension and then imports and runs the main application. This also simplifies the launch command by avoiding the need for --dart-define flags.
Suggested change:
- [ ] 2. Ensure a separate entry point (e.g., `lib/main_test.dart`) is created to enable the driver extension without affecting production builds:
```dart
import 'package:flutter_driver/driver_extension.dart';
import 'main.dart' as app;
void main() {
enableFlutterDriverExtension();
app.main();
}- 3. Instruct the user to launch the app with:
flutter run -t lib/main_test.dart -d <device-id>.
1 participant
flutter-app-runtimeskill definition toresources/flutter_skills.yaml.skills/flutter-app-runtime/SKILL.mdto guide agents in discovering running applications via DTD/MCP, proactively hot reloading on widget changes, and diagnosing runtime errors.README.mdwith the new skill entry.