reis-mobile 0.3.5

package/skills/flutter-setup-declarative-routing/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: flutter-setup-declarative-routing
+description: 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.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 21:08:03 GMT
+routing: manual
+stacks: [flutter]
+source: https://github.com/flutter/skills
+license: BSD-3-Clause
+---
+# Implementing Routing and Deep Linking
+
+## Contents
+- [Core Concepts](#core-concepts)
+- [Workflow: Initializing the Application and Router](#workflow-initializing-the-application-and-router)
+- [Workflow: Configuring Platform Deep Linking](#workflow-configuring-platform-deep-linking)
+- [Workflow: Implementing Nested Navigation](#workflow-implementing-nested-navigation)
+- [Examples](#examples)
+
+## Core Concepts
+
+Use the `go_router` package for declarative routing in Flutter. It provides a robust API for complex routing scenarios, deep linking, and nested navigation. 
+
+- **GoRouter**: The central configuration object defining the application's route tree.
+- **GoRoute**: A standard route mapping a URL path to a Flutter screen.
+- **ShellRoute / StatefulShellRoute**: Wraps child routes in a persistent UI shell (e.g., a `BottomNavigationBar`). `StatefulShellRoute` maintains the state of parallel navigation branches.
+- **Path URL Strategy**: Removes the default `#` fragment from web URLs, essential for clean deep linking across platforms.
+
+## Workflow: Initializing the Application and Router
+
+Follow this workflow to bootstrap a new Flutter application with `go_router` and configure the root routing mechanism.
+
+### Task Progress
+- [ ] Create the Flutter application.
+- [ ] Add the `go_router` dependency.
+- [ ] Configure the URL strategy for web/deep linking.
+- [ ] Implement the `GoRouter` configuration.
+- [ ] Bind the router to `MaterialApp.router`.
+
+### 1. Scaffold the Application
+Run the following commands to create the app and add the required routing package:
+```bash
+flutter create <app-name>
+cd <app-name>
+flutter pub add go_router
+```
+
+### 2. Configure the Router
+Define a top-level `GoRouter` instance. Handle authentication or state-based routing using the `redirect` parameter.
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:flutter_web_plugins/url_strategy.dart';
+
+void main() {
+  // Use path URL strategy to remove the '#' from web URLs
+  usePathUrlStrategy();
+  runApp(const MyApp());
+}
+
+final GoRouter _router = GoRouter(
+  initialLocation: '/',
+  routes: [
+    GoRoute(
+      path: '/',
+      builder: (context, state) => const HomeScreen(),
+      routes: [
+        GoRoute(
+          path: 'details/:id',
+          builder: (context, state) => DetailsScreen(id: state.pathParameters['id']!),
+        ),
+      ],
+    ),
+  ],
+  errorBuilder: (context, state) => ErrorScreen(error: state.error),
+);
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      routerConfig: _router,
+      title: 'Routing App',
+    );
+  }
+}
+```
+
+## Workflow: Configuring Platform Deep Linking
+
+Configure the native platforms to intercept specific URLs and route them into the Flutter application.
+
+### Task Progress
+- [ ] Determine target platforms (iOS, Android, or both).
+- [ ] Apply conditional configuration for Android (Manifest + Asset Links).
+- [ ] Apply conditional configuration for iOS (Plist + Entitlements + AASA).
+- [ ] Run validator -> review errors -> fix.
+
+### If configuring for Android:
+1. **Modify `AndroidManifest.xml`**: Add the intent filter inside the `<activity>` tag for `.MainActivity`.
+```xml
+<intent-filter android:autoVerify="true">
+    <action android:name="android.intent.action.VIEW" />
+    <category android:name="android.intent.category.DEFAULT" />
+    <category android:name="android.intent.category.BROWSABLE" />
+    <data android:scheme="http" android:host="yourdomain.com" />
+    <data android:scheme="https" />
+</intent-filter>
+```
+2. **Host `assetlinks.json`**: Serve the following JSON at `https://yourdomain.com/.well-known/assetlinks.json`.
+```json
+[{
+  "relation": ["delegate_permission/common.handle_all_urls"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "com.yourcompany.yourapp",
+    "sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
+  }
+}]
+```
+
+### If configuring for iOS:
+1. **Modify `Info.plist`**: Opt-in to Flutter's default deep link handler. 
+*Note: If using a third-party deep linking plugin (e.g., `app_links`), set this to `NO` to prevent conflicts.*
+```xml
+<key>FlutterDeepLinkingEnabled</key>
+<true/>
+```
+2. **Modify `Runner.entitlements`**: Add the associated domain.
+```xml
+<key>com.apple.developer.associated-domains</key>
+<array>
+  <string>applinks:yourdomain.com</string>
+</array>
+```
+3. **Host `apple-app-site-association`**: Serve the following JSON (without a `.json` extension) at `https://yourdomain.com/.well-known/apple-app-site-association`.
+```json
+{
+  "applinks": {
+    "apps": [],
+    "details": [{
+      "appIDs": ["TEAM_ID.com.yourcompany.yourapp"],
+      "paths": ["*"],
+      "components": [{"/": "/*"}]
+    }]
+  }
+}
+```
+
+### Validation Loop
+Run validator -> review errors -> fix.
+- **Android**: Test using ADB.
+  ```bash
+  adb shell 'am start -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "https://yourdomain.com/details/123"' com.yourcompany.yourapp
+  ```
+- **iOS**: Test using `xcrun` on a booted simulator.
+  ```bash
+  xcrun simctl openurl booted https://yourdomain.com/details/123
+  ```
+
+## Workflow: Implementing Nested Navigation
+
+Use `StatefulShellRoute` to implement persistent UI shells (like a bottom navigation bar) that maintain the state of their child routes.
+
+### Task Progress
+- [ ] Define `StatefulShellRoute.indexedStack` in the `GoRouter` configuration.
+- [ ] Create `StatefulShellBranch` instances for each navigation tab.
+- [ ] Implement the shell widget using `StatefulNavigationShell`.
+
+```dart
+final GoRouter _router = GoRouter(
+  initialLocation: '/home',
+  routes: [
+    StatefulShellRoute.indexedStack(
+      builder: (context, state, navigationShell) {
+        return ScaffoldWithNavBar(navigationShell: navigationShell);
+      },
+      branches: [
+        StatefulShellBranch(
+          routes: [
+            GoRoute(
+              path: '/home',
+              builder: (context, state) => const HomeScreen(),
+            ),
+          ],
+        ),
+        StatefulShellBranch(
+          routes: [
+            GoRoute(
+              path: '/settings',
+              builder: (context, state) => const SettingsScreen(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  ],
+);
+```
+
+## Examples
+
+### High-Fidelity Shell Widget Implementation
+Implement the UI shell that consumes the `StatefulNavigationShell` to handle branch switching.
+
+```dart
+class ScaffoldWithNavBar extends StatelessWidget {
+  const ScaffoldWithNavBar({
+    required this.navigationShell,
+    super.key,
+  });
+
+  final StatefulNavigationShell navigationShell;
+
+  void _goBranch(int index) {
+    navigationShell.goBranch(
+      index,
+      // Support navigating to the initial location when tapping the active tab.
+      initialLocation: index == navigationShell.currentIndex,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: navigationShell,
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: navigationShell.currentIndex,
+        onDestinationSelected: _goBranch,
+        destinations: const [
+          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
+          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
+        ],
+      ),
+    );
+  }
+}
+```
+
+### Programmatic Navigation
+Use the `context.go()` and `context.push()` extension methods provided by `go_router`.
+
+```dart
+// Replaces the current route stack with the target route (Declarative)
+context.go('/details/123');
+
+// Pushes the target route onto the existing stack (Imperative)
+context.push('/details/123');
+
+// Navigates using a named route and path parameters
+context.goNamed('details', pathParameters: {'id': '123'});
+
+// Pops the current route
+context.pop();
+```

package/skills/flutter-setup-localization/SKILL.md

@@ -0,0 +1,214 @@
+---
+name: flutter-setup-localization
+description: 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.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 21:27:35 GMT
+routing: manual
+stacks: [flutter]
+source: https://github.com/flutter/skills
+license: BSD-3-Clause
+---
+# Internationalizing Flutter Applications
+
+## Contents
+- [Core Concepts](#core-concepts)
+- [Setup Workflow](#setup-workflow)
+- [Implementation Workflow](#implementation-workflow)
+- [Advanced Formatting](#advanced-formatting)
+- [Examples](#examples)
+
+## Core Concepts
+Flutter handles internationalization (i18n) and localization (l10n) via the `flutter_localizations` and `intl` packages. The standard approach uses App Resource Bundle (`.arb`) files to define localized strings, which are then compiled into a generated `AppLocalizations` class for type-safe access within the widget tree.
+
+## Setup Workflow
+
+Copy and track this checklist when initializing internationalization in a Flutter project:
+
+- [ ] **Task Progress**
+  - [ ] 1. Add dependencies to `pubspec.yaml`.
+  - [ ] 2. Enable the `generate` flag.
+  - [ ] 3. Create the `l10n.yaml` configuration file.
+  - [ ] 4. Configure `MaterialApp` or `CupertinoApp`.
+
+### 1. Add Dependencies
+Add the required localization packages to the project. Execute the following commands in the terminal:
+```bash
+flutter pub add flutter_localizations --sdk=flutter
+flutter pub add intl:any
+```
+
+Verify your `pubspec.yaml` includes the following under `dependencies`:
+```yaml
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_localizations:
+    sdk: flutter
+  intl: any
+```
+
+### 2. Enable Code Generation
+Open `pubspec.yaml` and enable the `generate` flag within the `flutter` section to automate localization tasks:
+```yaml
+flutter:
+  generate: true
+```
+
+### 3. Create Configuration File
+Create a new file named `l10n.yaml` in the root directory of the Flutter project. Define the input directory, template file, and output file:
+```yaml
+arb-dir: lib/l10n
+template-arb-file: app_en.arb
+output-localization-file: app_localizations.dart
+synthetic-package: true
+```
+
+### 4. Configure the App Entry Point
+Import the generated localizations and the `flutter_localizations` library in your `main.dart`. Inject the delegates and supported locales into your `MaterialApp` or `CupertinoApp`.
+
+```dart
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust path if synthetic-package is false
+
+// ... inside build method
+return MaterialApp(
+  localizationsDelegates: const [
+    AppLocalizations.delegate,
+    GlobalMaterialLocalizations.delegate,
+    GlobalWidgetsLocalizations.delegate,
+    GlobalCupertinoLocalizations.delegate,
+  ],
+  supportedLocales: const [
+    Locale('en'), // English
+    Locale('es'), // Spanish
+  ],
+  home: const MyHomePage(),
+);
+```
+
+## Implementation Workflow
+
+Follow this workflow when adding or modifying localized content.
+
+### 1. Define ARB Files
+*   **If creating NEW content:** Add the base string to the template file (`lib/l10n/app_en.arb`). Include a description for context.
+*   **If EDITING existing content:** Locate the key in all supported `.arb` files and update the values.
+
+```json
+{
+  "helloWorld": "Hello World!",
+  "@helloWorld": {
+    "description": "The conventional newborn programmer greeting"
+  }
+}
+```
+
+Create corresponding files for other locales (e.g., `app_es.arb`):
+```json
+{
+  "helloWorld": "¡Hola Mundo!"
+}
+```
+
+### 2. Generate Localization Classes
+Run the following command to trigger code generation:
+```bash
+flutter pub get
+```
+*Feedback Loop:* Run validator -> review terminal output for ARB syntax errors -> fix missing commas or mismatched placeholders -> re-run `flutter pub get`.
+
+### 3. Consume Localized Strings
+Access the localized strings in your widget tree using `AppLocalizations.of(context)`. Ensure the widget calling this is a descendant of `MaterialApp`.
+
+```dart
+Text(AppLocalizations.of(context)!.helloWorld)
+```
+
+## Advanced Formatting
+
+Use placeholders for dynamic data, plurals, and conditional selects.
+
+### Placeholders
+Define parameters within curly braces and specify their type in the metadata object.
+```json
+"hello": "Hello {userName}",
+"@hello": {
+  "description": "A message with a single parameter",
+  "placeholders": {
+    "userName": {
+      "type": "String",
+      "example": "Bob"
+    }
+  }
+}
+```
+
+### Plurals
+Use the `plural` syntax to handle quantity-based string variations. The `other` case is mandatory.
+```json
+"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
+"@nWombats": {
+  "description": "A plural message",
+  "placeholders": {
+    "count": {
+      "type": "num",
+      "format": "compact"
+    }
+  }
+}
+```
+
+### Selects
+Use the `select` syntax for conditional strings, such as gendered text.
+```json
+"pronoun": "{gender, select, male{he} female{she} other{they}}",
+"@pronoun": {
+  "description": "A gendered message",
+  "placeholders": {
+    "gender": {
+      "type": "String"
+    }
+  }
+}
+```
+
+## Examples
+
+### Complete `l10n.yaml`
+```yaml
+arb-dir: lib/l10n
+template-arb-file: app_en.arb
+output-localization-file: app_localizations.dart
+synthetic-package: true
+use-escaping: true
+```
+
+### Complete Widget Implementation
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+
+class GreetingWidget extends StatelessWidget {
+  final String userName;
+  final int notificationCount;
+
+  const GreetingWidget({
+    super.key, 
+    required this.userName, 
+    required this.notificationCount,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Column(
+      children: [
+        Text(l10n.hello(userName)),
+        Text(l10n.nWombats(notificationCount)),
+      ],
+    );
+  }
+}
+```

package/skills/flutter-theming-apps/SKILL.md

@@ -0,0 +1,163 @@
+---
+name: flutter-theming-apps
+description: Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Thu, 12 Mar 2026 22:14:47 GMT
+routing: manual
+stacks: [flutter]
+source: https://github.com/flutter/skills
+license: BSD-3-Clause
+---
+# Implementing Flutter Theming and Adaptive Design
+
+## Contents
+- [Core Theming Concepts](#core-theming-concepts)
+- [Material 3 Guidelines](#material-3-guidelines)
+- [Component Theme Normalization](#component-theme-normalization)
+- [Button Styling](#button-styling)
+- [Platform Idioms & Adaptive Design](#platform-idioms--adaptive-design)
+- [Workflows](#workflows)
+- [Examples](#examples)
+
+## Core Theming Concepts
+Flutter applies styling in a strict hierarchy: styles applied to the specific widget -> themes that override the immediate parent theme -> the main app theme. 
+
+- Define app-wide themes using the `theme` property of `MaterialApp` with a `ThemeData` instance.
+- Override themes for specific widget subtrees by wrapping them in a `Theme` widget and using `Theme.of(context).copyWith(...)`.
+- **Do not** use deprecated `ThemeData` properties:
+  - Replace `accentColor` with `colorScheme.secondary`.
+  - Replace `accentTextTheme` with `textTheme` (using `colorScheme.onSecondary` for contrast).
+  - Replace `AppBarTheme.color` with `AppBarTheme.backgroundColor`.
+
+## Material 3 Guidelines
+Material 3 is the default theme as of Flutter 3.16. 
+
+- **Colors:** Generate color schemes using `ColorScheme.fromSeed(seedColor: Colors.blue)`. This ensures accessible contrast ratios.
+- **Elevation:** Material 3 uses `ColorScheme.surfaceTint` to indicate elevation instead of just drop shadows. To revert to M2 shadow behavior, set `surfaceTint: Colors.transparent` and define a `shadowColor`.
+- **Typography:** Material 3 updates font sizes, weights, and line heights. If text wrapping breaks legacy layouts, adjust `letterSpacing` on the specific `TextStyle`.
+- **Modern Components:** 
+  - Replace `BottomNavigationBar` with `NavigationBar`.
+  - Replace `Drawer` with `NavigationDrawer`.
+  - Replace `ToggleButtons` with `SegmentedButton`.
+  - Use `FilledButton` for a high-emphasis button without the elevation of `ElevatedButton`.
+
+## Component Theme Normalization
+Component themes in `ThemeData` have been normalized to use `*ThemeData` classes rather than `*Theme` widgets. 
+
+When defining `ThemeData`, strictly use the `*ThemeData` suffix for the following properties:
+- `cardTheme`: Use `CardThemeData` (Not `CardTheme`)
+- `dialogTheme`: Use `DialogThemeData` (Not `DialogTheme`)
+- `tabBarTheme`: Use `TabBarThemeData` (Not `TabBarTheme`)
+- `appBarTheme`: Use `AppBarThemeData` (Not `AppBarTheme`)
+- `bottomAppBarTheme`: Use `BottomAppBarThemeData` (Not `BottomAppBarTheme`)
+- `inputDecorationTheme`: Use `InputDecorationThemeData` (Not `InputDecorationTheme`)
+
+## Button Styling
+Legacy button classes (`FlatButton`, `RaisedButton`, `OutlineButton`) are obsolete. 
+
+- Use `TextButton`, `ElevatedButton`, and `OutlinedButton`.
+- Configure button appearance using a `ButtonStyle` object.
+- For simple overrides based on the theme's color scheme, use the static utility method: `TextButton.styleFrom(foregroundColor: Colors.blue)`.
+- For state-dependent styling (hovered, focused, pressed, disabled), use `MaterialStateProperty.resolveWith`.
+
+## Platform Idioms & Adaptive Design
+When building adaptive apps, respect platform-specific norms to reduce cognitive load and build user trust.
+
+- **Scrollbars:** Desktop users expect omnipresent scrollbars; mobile users expect them only during scrolling. Toggle `thumbVisibility` on the `Scrollbar` widget based on the platform.
+- **Selectable Text:** Web and desktop users expect text to be selectable. Wrap text in `SelectableText` or `SelectableText.rich`.
+- **Horizontal Button Order:** Windows places confirmation buttons on the left; macOS/Linux place them on the right. Use a `Row` with `TextDirection.rtl` for Windows and `TextDirection.ltr` for others.
+- **Context Menus & Tooltips:** Desktop users expect hover and right-click interactions. Implement `Tooltip` for hover states and use context menu packages for right-click actions.
+
+## Workflows
+
+### Workflow: Migrating Legacy Themes to Material 3
+Use this workflow when updating an older Flutter codebase.
+
+**Task Progress:**
+- [ ] 1. Remove `useMaterial3: false` from `ThemeData` (it is true by default).
+- [ ] 2. Replace manual `ColorScheme` definitions with `ColorScheme.fromSeed()`.
+- [ ] 3. Run validator -> review errors -> fix: Search for and replace deprecated `accentColor`, `accentColorBrightness`, `accentIconTheme`, and `accentTextTheme`.
+- [ ] 4. Run validator -> review errors -> fix: Search for `AppBarTheme(color: ...)` and replace with `backgroundColor`.
+- [ ] 5. Update `ThemeData` component properties to use `*ThemeData` classes (e.g., `cardTheme: CardThemeData()`).
+- [ ] 6. Replace legacy buttons (`FlatButton` -> `TextButton`, `RaisedButton` -> `ElevatedButton`, `OutlineButton` -> `OutlinedButton`).
+- [ ] 7. Replace legacy navigation components (`BottomNavigationBar` -> `NavigationBar`, `Drawer` -> `NavigationDrawer`).
+
+### Workflow: Implementing Adaptive UI Components
+Use this workflow when building a widget intended for both mobile and desktop/web.
+
+**Task Progress:**
+- [ ] 1. If displaying a list/grid, wrap it in a `Scrollbar` and set `thumbVisibility: DeviceType.isDesktop`.
+- [ ] 2. If displaying read-only data, use `SelectableText` instead of `Text`.
+- [ ] 3. If implementing a dialog with action buttons, check the platform. If Windows, set `TextDirection.rtl` on the button `Row`.
+- [ ] 4. If implementing interactive elements, wrap them in `Tooltip` widgets to support mouse hover states.
+
+## Examples
+
+### Example: Modern Material 3 ThemeData Setup
+```dart
+MaterialApp(
+  title: 'Adaptive App',
+  theme: ThemeData(
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: Colors.deepPurple,
+      brightness: Brightness.light,
+    ),
+    // Use *ThemeData classes for component normalization
+    appBarTheme: const AppBarThemeData(
+      backgroundColor: Colors.deepPurple, // Do not use 'color'
+      elevation: 0,
+    ),
+    cardTheme: const CardThemeData(
+      elevation: 2,
+    ),
+    textTheme: const TextTheme(
+      bodyMedium: TextStyle(letterSpacing: 0.2),
+    ),
+  ),
+  home: const MyHomePage(),
+);
+```
+
+### Example: State-Dependent ButtonStyle
+```dart
+TextButton(
+  style: ButtonStyle(
+    // Default color
+    foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
+    // State-dependent overlay color
+    overlayColor: MaterialStateProperty.resolveWith<Color?>(
+      (Set<MaterialState> states) {
+        if (states.contains(MaterialState.hovered)) {
+          return Colors.blue.withOpacity(0.04);
+        }
+        if (states.contains(MaterialState.focused) || states.contains(MaterialState.pressed)) {
+          return Colors.blue.withOpacity(0.12);
+        }
+        return null; // Defer to the widget's default.
+      },
+    ),
+  ),
+  onPressed: () {},
+  child: const Text('Adaptive Button'),
+)
+```
+
+### Example: Adaptive Dialog Button Order
+```dart
+Row(
+  // Windows expects confirmation on the left (RTL reverses the standard LTR Row)
+  textDirection: Platform.isWindows ? TextDirection.rtl : TextDirection.ltr,
+  mainAxisAlignment: MainAxisAlignment.end,
+  children: [
+    TextButton(
+      onPressed: () => Navigator.pop(context, false),
+      child: const Text('Cancel'),
+    ),
+    FilledButton(
+      onPressed: () => Navigator.pop(context, true),
+      child: const Text('Confirm'),
+    ),
+  ],
+)
+```