flutter-duit-bdui
Integrate, fix, review, migrate, test, or debug Duit / flutterduit backend-driven UI in Flutter applications. Use when a task mentions DUIT, flutterduit, 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.
- Installs
- 344
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-duit-bdui- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads flutter-duit-bdui automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
- 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.
- Inspect the target Flutter project before editing:
pubspec.yaml,pubspec.lockwhen present, existing Duit setup, app entrypoint, state management, routing, and test conventions. - Determine the
flutter_duitversion:- Prefer
pubspec.lockor the existing dependency constraint. - If adding the package, check current official package docs or run
flutter pub add flutter_duitwhen 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.
- Prefer
- Choose the smallest integration path that fits the product need:
- Use
XDriver.remotefor backend-driven screens loaded from a server. - Use
XDriver.staticfor 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.
- Use
- Read only the routed resources needed for the scenario.
- Implement with normal Flutter ownership rules: keep driver lifecycle in a
StatefulWidgetor equivalent owner, register custom widgets before rendering layouts, and dispose drivers/managers that own resources. - 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:
final driver = XDriver.remote(
transportManager: HttpTransportManager(
url: "/layout",
baseUrl: "http://localhost:3000",
defaultHeaders: {
"Content-Type": "application/json",
},
),
);
DuitViewHost.withDriver(
driver: driver,
placeholder: const CircularProgressIndicator(),
);
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
| Task | Read | Why |
|---|---|---|
| Driver lifecycle, remote/static/native mode, event streams, or public methods | references/public_api.md | Version-aware API contracts and 4.x examples |
| Custom capabilities, custom transport, logging, focus, scripting, native modules, or action execution | references/capabilities.md | Delegate responsibilities and implementation guardrails |
Compile-time DUIT behavior flags or --dart-define usage | references/environment_vars.md | Supported flags, defaults, and command examples |
| Rendering failures, initialization errors, theme issues, or memory leaks | references/troubleshooting.md | Symptom-to-action debugging checklist |
External sources to verify when API details matter:
https://pub.dev/packages/flutter_duithttps://pub.dev/documentation/flutter_duit/latest/https://github.com/Duit-Foundation/flutter_duithttps://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_kerneldirectly unless the task requires kernel models, custom extensions, or APIs not exported byflutter_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:
flutter pub getafter dependency changes.dart formaton edited Dart files.flutter analyzefor Flutter projects.- Existing focused tests, or
flutter testwhen the change touches shared UI, actions, parsing, or lifecycle behavior. - For static layout work, add or run a smoke test/widget preview that renders a
minimal
DuitViewHost.withDriver. - 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.
FAQ
What does the flutter-duit-bdui skill do?
Integrate, fix, review, migrate, test, or debug Duit / flutterduit backend-driven UI in Flutter applications. Use when a task mentions DUIT, flutterduit, 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.
How do I install flutter-duit-bdui?
Run npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-duit-bdui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-duit-bdui/ (personal) or .claude/skills/flutter-duit-bdui/ (project).
Which AI agents can use flutter-duit-bdui?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is flutter-duit-bdui safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains flutter-duit-bdui?
It is published by madteacher in madteacher/mad-agents-skills. It has 344 recorded installs.
More from madteacher/mad-agents-skills
flutter-animations
madteacher/mad-agents-skills
Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use when working with implicit animations such as AnimatedContainer, AnimatedOpacity, AnimatedSwitcher, and TweenAnimationBuilder; explicit animations using AnimationController, Tween, CurvedAnimation, AnimatedWidget, AnimatedBuilder, and built-in transitions; Hero/shared-element route transitions; staggered or sequenced animations; physics-based motion, gestures, springs, flings, scroll physics, curves, performance, accessibility, reduced motion, and animation lifecycle bugs.
flutter-adaptive-ui
madteacher/mad-agents-skills
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation, adaptive dialogs/lists/grids, keyboard/mouse/touch behavior, window-size decisions with MediaQuery or LayoutBuilder, or Capability and Policy patterns for platform-specific behavior.
flutter-architecture
madteacher/mad-agents-skills
Design, refactor, review, or implement Flutter app architecture using MVVM, layered UI/Data/optional Domain boundaries, feature-first or layer-first project structure, repositories, services, dependency injection, Result and Command patterns, offline-first or optimistic UI flows. Use when asked to add a Flutter feature, audit layer dependencies, fix cross-feature imports, migrate to feature-first, choose architecture for a Flutter project, or create scalable maintainable Flutter code organization.
flutter-testing
madteacher/mad-agents-skills
Write, fix, review, debug, and validate Flutter tests for apps, packages, and plugins. Use when adding unit tests, widget tests, integration tests, MethodChannel or plugin mocks, Mockito or mocktail test doubles, golden or accessibility checks, CI test commands, test failures, MissingPluginException, pump or pumpAndSettle problems, finder errors, buildrunner mock generation, device integration testing, web integration testing, or flaky Flutter tests.
flutter-networking
madteacher/mad-agents-skills
Implement, fix, debug, review, or refactor Flutter networking code for HTTP/REST APIs, WebSocket realtime flows, authentication and token refresh, request headers, timeouts, retries, JSON parsing, caching, background isolates, repositories, services, and adaptation to existing http, Dio, Retrofit, Chopper, or custom API clients. Use when asked to add network requests, investigate network errors, harden API clients, handle auth, or validate Flutter network behavior.
flutter-drift
madteacher/mad-agents-skills
Implement, fix, review, migrate, test, or debug Drift persistence in Flutter apps using SQLite, driftflutter, type-safe Dart queries, generated tables, StreamBuilder or Riverpod StreamProvider UI, write operations, transactions, schema migrations, web assets, isolate sharing, and local database testing. Use when a Flutter task mentions drift, local database storage, SQLite, reactive database streams, CRUD, schemaVersion, buildrunner, driftdev make-migrations, migration tests, or Flutter-specific database setup across mobile, web, or desktop.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.