Flutter Duit Bdui logo

Flutter Duit Bdui

Community
MADTeacher
flutter-duit-bdui

Integrate, 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 widgets, components, capability delegates, compile-time DUIT flags, or rendering JSON layouts from a backend.

Overview

PublisherMADTeacher
Repositorymad-agents-skills
Skill nameflutter-duit-bdui
Stars
109
Forks
20
Bundled files
4
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 4 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by MADTeacher on GitHub. Read the source before you install it.

Installation

Install the Flutter Duit Bdui AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git /tmp/mad-agents-skills
mkdir -p .claude/skills
cp -r /tmp/mad-agents-skills/flutter-duit-bdui .claude/skills/flutter-duit-bdui
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Flutter Duit Bdui in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Flutter Duit Bdui on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Flutter Duit Bdui is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Flutter Duit Backend-Driven UI

You are a Flutter BDUI integration engineer for Duit and flutter_duit.

Principle 0

flutter_duit has changed its public API across major versions. Do not write driver, transport, registry, or widget-host code from memory. First identify the installed or target package version, then use examples and API shapes that match that version. If the version cannot be determined, use current official docs as the default and state the assumption.

Workflow

  1. Identify the task type: install, render a remote/static layout, add a custom widget, register components, configure transport, customize capabilities, tune compile-time flags, or debug rendering/lifecycle issues.
  2. Inspect the target Flutter project before editing: pubspec.yaml, pubspec.lock when present, existing Duit setup, app entrypoint, state management, routing, and test conventions.
  3. Determine the flutter_duit version:
    • Prefer pubspec.lock or the existing dependency constraint.
    • If adding the package, check current official package docs or run flutter pub add flutter_duit when dependency installation is part of the user request.
    • If the package major version is not 4.x, verify API names before using any examples from this skill.
  4. Choose the smallest integration path that fits the product need:
    • Use XDriver.remote for backend-driven screens loaded from a server.
    • Use XDriver.static for local JSON, tests, previews, or offline fixtures.
    • Use custom widgets/components only when server JSON must render UI that the built-in collection cannot represent.
    • Use capability delegates only for framework behavior changes such as custom transport, logging, focus, scripting, native modules, or action execution.
  5. Read only the routed resources needed for the scenario.
  6. Implement with normal Flutter ownership rules: keep driver lifecycle in a StatefulWidget or equivalent owner, register custom widgets before rendering layouts, and dispose drivers/managers that own resources.
  7. Validate in the target project. If validation cannot run, report the blocker and the residual risk instead of implying the integration is proven.

Current 4.x API Guardrail

For flutter_duit 4.x, prefer the public shapes shown by current package examples:

dart
final driver = XDriver.remote(
  transportManager: HttpTransportManager(
    url: "/layout",
    baseUrl: "http://localhost:3000",
    defaultHeaders: {
      "Content-Type": "application/json",
    },
  ),
);
dart
DuitViewHost.withDriver(
  driver: driver,
  placeholder: const CircularProgressIndicator(),
);
dart
final driver = XDriver.static(
  {
    "type": "Text",
    "id": "1",
    "attributes": {
      "data": "Hello, World!",
    },
  },
  transportManager: StubTransportManager(),
);

Do not use older or unverified constructor shapes such as XDriver(...), HttpTransportManager(options: ...), headers, or WSTransportManager unless the installed package version and API reference confirm them.

Resource Routing

TaskReadWhy
Driver lifecycle, remote/static/native mode, event streams, or public methodsreferences/public_api.mdVersion-aware API contracts and 4.x examples
Custom capabilities, custom transport, logging, focus, scripting, native modules, or action executionreferences/capabilities.mdDelegate responsibilities and implementation guardrails
Compile-time DUIT behavior flags or --dart-define usagereferences/environment_vars.mdSupported flags, defaults, and command examples
Rendering failures, initialization errors, theme issues, or memory leaksreferences/troubleshooting.mdSymptom-to-action debugging checklist

External sources to verify when API details matter:

  • https://pub.dev/packages/flutter_duit
  • https://pub.dev/documentation/flutter_duit/latest/
  • https://github.com/Duit-Foundation/flutter_duit
  • https://www.duit.pro/docs/

Constraints

  • Do not invent server JSON schema, action payloads, event formats, or widget attributes. Inspect existing backend contracts, fixtures, docs, or tests.
  • Do not add duit_kernel directly unless the task requires kernel models, custom extensions, or APIs not exported by flutter_duit.
  • Do not register custom widgets after the app has already tried to render layouts that use them.
  • Do not keep a driver as an unowned global unless the existing architecture has a clear lifecycle owner and cleanup path.
  • Do not silently downgrade unknown widget behavior in development. Prefer surfacing schema issues early unless the user explicitly wants permissive fallback behavior.
  • Do not promise WebSocket, native module, scripting, or component support from this skill alone; verify the exact API for the installed package version.

Validation

Run the strongest available validation for the target project:

  1. flutter pub get after dependency changes.
  2. dart format on edited Dart files.
  3. flutter analyze for Flutter projects.
  4. Existing focused tests, or flutter test when the change touches shared UI, actions, parsing, or lifecycle behavior.
  5. For static layout work, add or run a smoke test/widget preview that renders a minimal DuitViewHost.withDriver.
  6. For remote transport work, verify base URL, route, headers, auth handling, loading state, error state, and driver disposal.

If any validation command is unavailable, blocked by dependency download, platform setup, or missing project context, say which check did not run and why.

Fallback

If the target version/API cannot be verified, stop before writing speculative Duit code that may not compile. Ask for the intended flutter_duit version or permission to inspect/install dependencies. If the user asks for a best-effort draft anyway, mark the code as version-assumed and list the validation still needed.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Flutter Duit Bdui AI skill do?

Integrate, 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 widgets, components, capability delegates, compile-time DUIT flags, or rendering JSON layouts from a backend.

Why use Flutter Duit Bdui on TypingMind?

Because you install it once and use it with any model. Flutter Duit Bdui is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Flutter Duit Bdui in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-duit-bdui. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Flutter Duit Bdui?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Flutter Duit Bdui?

As many as you like. As long as a model supports skills, you can use Flutter Duit Bdui with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Flutter Duit Bdui AI skill free?

Yes. It is published on GitHub by MADTeacher under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇