$npx -y skills add MADTeacher/mad-agents-skills --skill flutter-duit-bduiIntegrate, fix, review, migrate, test, or debug Duit / flutter_duit backend-driven UI in Flutter applications. Use when a task mentions DUIT, flutter_duit, backend-driven UI, BDUI, server-driven UI, XDriver, DuitViewHost, DuitRegistry, HTTP or WebSocket transports, custom Duit wi
| 1 | # Flutter Duit Backend-Driven UI |
| 2 | |
| 3 | You are a Flutter BDUI integration engineer for Duit and `flutter_duit`. |
| 4 | |
| 5 | ## Principle 0 |
| 6 | |
| 7 | `flutter_duit` has changed its public API across major versions. Do not write |
| 8 | driver, transport, registry, or widget-host code from memory. First identify the |
| 9 | installed or target package version, then use examples and API shapes that match |
| 10 | that version. If the version cannot be determined, use current official docs as |
| 11 | the default and state the assumption. |
| 12 | |
| 13 | ## Workflow |
| 14 | |
| 15 | 1. Identify the task type: install, render a remote/static layout, add a custom |
| 16 | widget, register components, configure transport, customize capabilities, |
| 17 | tune compile-time flags, or debug rendering/lifecycle issues. |
| 18 | 2. Inspect the target Flutter project before editing: `pubspec.yaml`, |
| 19 | `pubspec.lock` when present, existing Duit setup, app entrypoint, state |
| 20 | management, routing, and test conventions. |
| 21 | 3. Determine the `flutter_duit` version: |
| 22 | - Prefer `pubspec.lock` or the existing dependency constraint. |
| 23 | - If adding the package, check current official package docs or run |
| 24 | `flutter pub add flutter_duit` when dependency installation is part of the |
| 25 | user request. |
| 26 | - If the package major version is not 4.x, verify API names before using any |
| 27 | examples from this skill. |
| 28 | 4. Choose the smallest integration path that fits the product need: |
| 29 | - Use `XDriver.remote` for backend-driven screens loaded from a server. |
| 30 | - Use `XDriver.static` for local JSON, tests, previews, or offline fixtures. |
| 31 | - Use custom widgets/components only when server JSON must render UI that the |
| 32 | built-in collection cannot represent. |
| 33 | - Use capability delegates only for framework behavior changes such as |
| 34 | custom transport, logging, focus, scripting, native modules, or action |
| 35 | execution. |
| 36 | 5. Read only the routed resources needed for the scenario. |
| 37 | 6. Implement with normal Flutter ownership rules: keep driver lifecycle in a |
| 38 | `StatefulWidget` or equivalent owner, register custom widgets before |
| 39 | rendering layouts, and dispose drivers/managers that own resources. |
| 40 | 7. Validate in the target project. If validation cannot run, report the blocker |
| 41 | and the residual risk instead of implying the integration is proven. |
| 42 | |
| 43 | ## Current 4.x API Guardrail |
| 44 | |
| 45 | For `flutter_duit` 4.x, prefer the public shapes shown by current package |
| 46 | examples: |
| 47 | |
| 48 | ```dart |
| 49 | final driver = XDriver.remote( |
| 50 | transportManager: HttpTransportManager( |
| 51 | url: "/layout", |
| 52 | baseUrl: "http://localhost:3000", |
| 53 | defaultHeaders: { |
| 54 | "Content-Type": "application/json", |
| 55 | }, |
| 56 | ), |
| 57 | ); |
| 58 | ``` |
| 59 | |
| 60 | ```dart |
| 61 | DuitViewHost.withDriver( |
| 62 | driver: driver, |
| 63 | placeholder: const CircularProgressIndicator(), |
| 64 | ); |
| 65 | ``` |
| 66 | |
| 67 | ```dart |
| 68 | final driver = XDriver.static( |
| 69 | { |
| 70 | "type": "Text", |
| 71 | "id": "1", |
| 72 | "attributes": { |
| 73 | "data": "Hello, World!", |
| 74 | }, |
| 75 | }, |
| 76 | transportManager: StubTransportManager(), |
| 77 | ); |
| 78 | ``` |
| 79 | |
| 80 | Do not use older or unverified constructor shapes such as |
| 81 | `XDriver(...)`, `HttpTransportManager(options: ...)`, `headers`, or |
| 82 | `WSTransportManager` unless the installed package version and API reference |
| 83 | confirm them. |
| 84 | |
| 85 | ## Resource Routing |
| 86 | |
| 87 | | Task | Read | Why | |
| 88 | |---|---|---| |
| 89 | | Driver lifecycle, remote/static/native mode, event streams, or public methods | `references/public_api.md` | Version-aware API contracts and 4.x examples | |
| 90 | | Custom capabilities, custom transport, logging, focus, scripting, native modules, or action execution | `references/capabilities.md` | Delegate responsibilities and implementation guardrails | |
| 91 | | Compile-time DUIT behavior flags or `--dart-define` usage | `references/environment_vars.md` | Supported flags, defaults, and command examples | |
| 92 | | Rendering failures, initialization errors, theme issues, or memory leaks | `references/troubleshooting.md` | Symptom-to-action debugging checklist | |
| 93 | |
| 94 | External sources to verify when API details matter: |
| 95 | |
| 96 | - `https://pub.dev/packages/flutter_duit` |
| 97 | - `https://pub.dev/documentation/flutter_duit/latest/` |
| 98 | - `https://github.com/Duit-Foundation/flutter_duit` |
| 99 | - `https://www.duit.pro/docs/` |
| 100 | |
| 101 | ## Constraints |
| 102 | |
| 103 | - Do not invent server JSON schema, action payloads, event formats, or widget |
| 104 | attributes. Inspect existing backend contracts, fixtures, docs, or tests. |
| 105 | - Do not add `duit_kernel` directly unless the task requires kernel models, |
| 106 | custom extensions, or APIs not exported by `flutter_duit`. |
| 107 | - Do not register custom widgets after the app has already tried to render |
| 108 | layouts that use them. |
| 109 | - Do not keep a driver as an unowned global unless the existing architecture has |
| 110 | a clear lifecycle o |