mcpField
F
flutter-duit-bdui

flutter-duit-bdui

github.com/madteacher開発110344 回インストール26 週間前に更新
リポジトリ

flutter-duit-bdui について

flutter-duit-bdui は、Flutter アプリに Duit と flutter_duit を統合し、バックエンド駆動 UI を表示するためのスキルです。バージョンに応じた API 選択やドライバー構成、変更の検証を重視します。

主な機能

  1. 01flutter_duit のバージョン確認
  2. 02リモート・静的ドライバーの案内
  3. 03カスタムウィジェットと機能の選択
  4. 04ライフサイクルと描画の注意点
  5. 05Flutter の検証チェックリスト

活用シーン

  1. 01サーバーから届くレイアウトの描画
  2. 02ローカル JSON レイアウトのプレビュー
  3. 03独自のサーバー UI 要素向けウィジェット追加
  4. 04描画やライフサイクルの問題調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-duit-bdui

インストール後、Claude Code で/flutter-duit-bduiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
capabilities.md
environment_vars.md
public_api.md
troubleshooting.md

詳細

Flutter Duit バックエンド駆動 UI

Duit と flutter_duit の Flutter BDUI 統合エンジニアです。

原則 0

flutter_duit のパブリック API はメジャーバージョンによって変更されています。記憶に頼ってドライバー、トランスポート、レジストリ、ウィジェットホストのコードを書かないでください。まずインストール済み、または対象となるパッケージのバージョンを特定し、そのバージョンに合った例と API の形式を使用してください。バージョンを特定できない場合は、現行の公式ドキュメントを既定値として使用し、その前提を明記してください。

ワークフロー

  1. タスクの種類を特定します。インストール、リモート/静的レイアウトのレンダリング、カスタムウィジェットの追加、コンポーネントの登録、トランスポートの設定、機能のカスタマイズ、コンパイル時フラグの調整、またはレンダリング/ライフサイクルの問題のデバッグです。
  2. 編集前に対象の Flutter プロジェクトを調査します。pubspec.yaml、存在する場合は pubspec.lock、既存の Duit 設定、アプリのエントリーポイント、状態管理、ルーティング、テストの規約を確認します。
  3. flutter_duit のバージョンを特定します。
    • pubspec.lock または既存の依存関係の制約を優先します。
    • パッケージを追加する場合、現行の公式パッケージドキュメントを確認するか、依存関係のインストールがユーザーのリクエストに含まれる場合は flutter pub add flutter_duit を実行します。
    • パッケージのメジャーバージョンが 4.x でない場合、このスキルの例を使用する前に API 名を確認します。
  4. 製品のニーズに合う、最小限の統合方法を選択します。
    • サーバーから読み込むバックエンド駆動画面には XDriver.remote を使用します。
    • ローカル JSON、テスト、プレビュー、オフラインのフィクスチャには XDriver.static を使用します。
    • サーバー JSON で組み込みコレクションでは表現できない UI をレンダリングする必要がある場合に限り、カスタムウィジェット/コンポーネントを使用します。
    • カスタムトランスポート、ロギング、フォーカス、スクリプティング、ネイティブモジュール、アクション実行など、フレームワークの動作を変更する場合に限り、機能デリゲートを使用します。
  5. シナリオに必要な、ルーティングされたリソースだけを読みます。
  6. Flutter の通常の所有権ルールに従って実装します。ドライバーのライフサイクルは StatefulWidget または同等の所有者で管理し、レイアウトをレンダリングする前にカスタムウィジェットを登録し、リソースを所有するドライバー/マネージャーを破棄します。
  7. 対象のプロジェクトで検証します。検証を実行できない場合は、統合が検証済みであるかのように示すのではなく、実行を妨げる要因と残存リスクを報告します。

現行 4.x API のガードレール

flutter_duit 4.x では、現行のパッケージ例に示されたパブリック API の形式を優先してください。

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(),
);

インストール済みのパッケージバージョンと API リファレンスで確認できない限り、XDriver(...)、HttpTransportManager(options: ...)、headers、WSTransportManager など、古い、または未検証のコンストラクター形式は使用しないでください。

リソースのルーティング

タスク読むもの理由
ドライバーのライフサイクル、リモート/静的/ネイティブモード、イベントストリーム、またはパブリックメソッドreferences/public_api.mdバージョンに対応した API コントラクトと 4.x の例
カスタム機能、カスタムトランスポート、ロギング、フォーカス、スクリプティング、ネイティブモジュール、またはアクション実行references/capabilities.mdデリゲートの責務と実装上のガードレール
コンパイル時の DUIT 動作フラグ、または --dart-define の使用references/environment_vars.mdサポートされるフラグ、既定値、コマンド例
レンダリングの失敗、初期化エラー、テーマの問題、またはメモリリークreferences/troubleshooting.md症状から対処法を導くデバッグチェックリスト

API の詳細が重要な場合は、以下の外部ソースで確認してください。

  • 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/

制約

  • サーバーの JSON スキーマ、アクションのペイロード、イベント形式、ウィジェット属性を捏造しないでください。既存のバックエンドの契約、フィクスチャ、ドキュメント、テストを確認してください。
  • カーネルモデル、カスタム拡張機能、または flutter_duit が公開していない API が必要な場合を除き、duit_kernel を直接追加しないでください。
  • カスタムウィジェットを使うレイアウトのレンダリングがアプリですでに試行された後に、カスタムウィジェットを登録しないでください。
  • 既存のアーキテクチャで明確なライフサイクルの所有者とクリーンアップ方法が定められていない限り、ドライバーを所有者のないグローバルとして保持しないでください。
  • 開発時に、未知のウィジェットの動作を警告なしにダウングレードしないでください。ユーザーが明示的に寛容なフォールバック動作を求めている場合を除き、スキーマの問題は早い段階で表面化させてください。
  • このスキルだけで WebSocket、ネイティブモジュール、スクリプト、コンポーネントがサポートされると約束しないでください。インストール済みパッケージのバージョンで利用できる正確な API を確認してください。

検証

対象プロジェクトで利用可能な最も強力な検証を実行してください。

  1. 依存関係を変更した後に flutter pub get を実行します。
  2. 編集した Dart ファイルに dart format を実行します。
  3. Flutter プロジェクトでは flutter analyze を実行します。
  4. 既存の関連テストを実行します。変更が共有 UI、アクション、解析、またはライフサイクルの動作に影響する場合は、flutter test を実行します。
  5. 静的レイアウトの作業では、最小限の DuitViewHost.withDriver をレンダリングするスモークテストまたはウィジェットプレビューを追加するか、実行します。
  6. リモートトランスポートの作業では、ベース URL、ルート、ヘッダー、認証処理、読み込み状態、エラー状態、ドライバーの破棄を検証します。

依存関係のダウンロード、プラットフォームのセットアップ、プロジェクト情報の不足などにより、検証コマンドを利用できない、または実行が妨げられる場合は、実行できなかったチェックとその理由を伝えてください。

フォールバック

対象のバージョンまたは API を検証できない場合は、コンパイルできない可能性のある憶測に基づく Duit コードを書き始める前に作業を止めてください。意図する flutter_duit のバージョンを尋ねるか、依存関係を調査・インストールする許可を求めてください。それでも最善努力のドラフトを求められた場合は、コードが特定のバージョンを前提としていることを明記し、引き続き必要な検証を列挙してください。

コメント