SKILL.md
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 パターン定義