AgentSkillsCN

vsa-ui-enhancer

面向垂直切片架构（VSA）的 UI 强化技能。在 Phase 1（spec-kit + 目录）生成的纯 .razor 文件基础上，在 Phase 2 中将其转换为 MudBlazor 基础的丰富 UI。完全不触碰架构，只强化 UI。

SKILL.md
--- frontmatter
name: vsa-ui-enhancer
description: >
  Vertical Slice Architecture (VSA) 向け UI 強化スキル。
  Phase 1（spec-kit + カタログ）で生成されたプレーンな .razor ファイルを、
  Phase 2 で MudBlazor ベースのリッチな UI に変換する。
  アーキテクチャには一切手を触れず、UI だけを強化する。
allowed-tools:
  - Read
  - Glob
  - Grep
  - Edit
  - Write

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 EntityCanXxx() がある場合
任意Validatorバリデーション表示を強化する場合

変換ルール

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

HTMLMudBlazor
<input type="text"><MudTextField>
<select><MudSelect>
<button><MudButton>
<table><MudTable> / <MudDataGrid>
<input type="checkbox"><MudCheckBox>

Boundary 連携

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

CanXxx() パターン

razor
@{
    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確認・入力ダイアログ

変換の流れ

  1. •.razor の構造を解析して、UI 要素を抽出
  2. •それぞれを既存の UI パターン（form/list/detail/dialog）にマッピング
  3. •component-mapping.md に従って HTML → MudBlazor に変換
  4. •Domain Entity の CanXxx() を参照し、UI 制御を追加
  5. •必要に応じて Validator を読み込み、バリデーション表示を拡張

責務の分離

レイヤー担当説明
Command / Handler / Storespec-kit + カタログUI 強化では変更しない
Domain Entity (CanXxx())Domain モデルUI はこれを利用するだけ
UI 見た目本 Skillプレゼンテーションのみ

チェックリスト

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

参照

  • •input-requirements.md - 入力要件の詳細
  • •component-mapping.md - HTML → MudBlazor 対応表
  • •boundary-integration.md - CanXxx() 連携パターン
  • •ui-patterns/*.md - UI パターン定義