VSA UI Enhancer

このスキルは、アーキテクチャには一切手を触れずに、UI だけを強化する ことを目的とする。

適用場面

• プレーンな HTML ベースの .razor を MudBlazor コンポーネントベースに変換する

• Domain Entity の CanXxx() 結果を UI（ボタン活性/ツールチップ/色/バッジ等）に反映する

• 状態・ロール・ビジネスルールに応じた UI 制御を行う

やること / やらないこと

やること

項目 説明

HTML → MudBlazor 変換 <input> → <MudTextField> など

CanXxx() 連携 ボタン活性/非活性、ツールチップ表示

状態に応じた装飾 色、バッジ、アイコンの切り替え

バリデーション表示強化 MudBlazor のバリデーション機能活用

やらないこと

項目 説明

Command/Query/Handler 変更 アーキテクチャの骨格は維持

Store/PageActions 変更 状態管理の構造は維持

ドメインロジック変更 Entity/ValueObject は変更しない

インフラ層変更 Repository/DbContext は変更しない

2フェーズアプローチ

Phase 1: spec-kit + カタログ

• 責務: アーキテクチャと最低限 UI の生成

• 代表的な生成物:

• Command / Query / Handler

• Validator

• Entity（CanXxx() を含む）

• Store / PageActions

• プレーンな .razor （基本的な HTML + @code ）

Phase 2: UI-Skill（本 Skill）

• 責務: 見た目のリッチ化のみ

• 入力:

• .razor （Phase 1 で生成済み）

• 対応する Command / Query

• 対応する Domain Entity（CanXxx() を含む場合）

• 出力:

• MudBlazor コンポーネントベースに書き換えられた .razor

• CanXxx() 連動済みのボタン/リンク/バッジ

• 状態に応じた色・装飾

入力要件

詳細は input-requirements.md を参照。

分類 ファイル 目的

必須 .razor 現在の UI 構造を把握

必須 Command / Query フォーム項目との対応を理解

条件付き必須 Domain Entity CanXxx() がある場合

任意 Validator バリデーション表示を強化する場合

変換ルール

詳細は component-mapping.md を参照。

HTML MudBlazor

<input type="text">

<MudTextField>

<select>

<MudSelect>

<button>

<MudButton>

<table>

<MudTable> / <MudDataGrid>

<input type="checkbox">

<MudCheckBox>

Boundary 連携

詳細は boundary-integration.md を参照。

CanXxx() パターン

@{ var canExtend = loan.CanExtend(hasReservations); }

<MudTooltip Text="@(canExtend.IsAllowed ? string.Empty : canExtend.Reason)"> <MudButton ButtonType="ButtonType.Submit" Disabled="@(!canExtend.IsAllowed || isSubmitting)" Color="Color.Primary" Variant="Variant.Filled"> @if (isSubmitting) { <MudProgressCircular Size="Size.Small" Indeterminate="true" /> } 延長する </MudButton> </MudTooltip>

• CanExtend() の結果でボタン活性/非活性を制御

• Reason をツールチップで表示

• 送信中はローディングインジケータを表示

UI パターン

詳細は ui-patterns/*.md を参照。

パターン ファイル 用途

フォーム form-pattern.md

作成・編集フォーム

一覧 list-pattern.md

データ一覧表示

詳細 detail-pattern.md

詳細表示 + 操作ボタン

ダイアログ dialog-pattern.md

確認・入力ダイアログ

変換の流れ

• .razor の構造を解析して、UI 要素を抽出

• それぞれを既存の UI パターン（form/list/detail/dialog）にマッピング

• component-mapping.md に従って HTML → MudBlazor に変換

• Domain Entity の CanXxx() を参照し、UI 制御を追加

• 必要に応じて Validator を読み込み、バリデーション表示を拡張

責務の分離

レイヤー 担当 説明

Command / Handler / Store spec-kit + カタログ UI 強化では変更しない

Domain Entity (CanXxx() ) Domain モデル UI はこれを利用するだけ

UI 見た目 本 Skill プレゼンテーションのみ

チェックリスト

□ HTML → MudBlazor コンポーネントに変換されているか？ □ CanXxx() があれば Disabled/Tooltip に反映されているか？ □ Command/Handler/Store の構造は維持されているか？ □ バリデーションエラーが適切に表示されるか？ □ ローディング状態が表示されるか？

参照

• input-requirements.md

• 入力要件の詳細

• component-mapping.md

• HTML → MudBlazor 対応表

• boundary-integration.md

• CanXxx() 連携パターン

• ui-patterns/*.md

• UI パターン定義