vsa-ui-enhancer

Convert plain Razor UI files into MudBlazor components with CanXxx() interactivity.

1|Updated Oct 28, 2025
One-click install
npx skills add https://github.com/akiramei/blazor-enterprise-architecture-poc --skill vsa-ui-enhancer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vsa-ui-enhancer
Source: https://github.com/akiramei/blazor-enterprise-architecture-poc/tree/main/catalog/skills/vsa-ui-enhancer
Command: npx skills add https://github.com/akiramei/blazor-enterprise-architecture-poc --skill vsa-ui-enhancer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Blazor VSA で UI 層だけをリッチ化したいが、アーキテクチャを変更せずにプレーンな .razor を MudBlazor コンポーネントに置換するのが難しい問題を解決します。CanXxx() の結果を UI に反映し、UI の状態・装飾を柔軟に設定します。

Core Features & Use Cases

  • HTML → MudBlazor 変換: プレーンな HTML/ Razor を MudBlazor コンポーネントへ自動置換
  • CanXxx() 連携: ボタン活性、ツールチップ、色、バッジなど UI 要素を動的に制御
  • UI アーキテクチャの維持: アーキテクチャやドメインロジックは変更せず、UI 表現だけを強化

Quick Start

Phase 1 で生成されたプレーンな .razor を対象として、Phase 2 の UI-Skill で MudBlazor 化を実行します。AI に対して、Phase 1 の出力と対応する Domain Entity を渡すと、MudBlazor へ適切に変換された .razor が出力されます。

Frequently Asked Questions about vsa-ui-enhancer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert plain Razor UI to MudBlazor components?

Convert plain Razor UI by replacing HTML elements with MudBlazor components while preserving your architecture. The Skill transforms .razor files into MudBlazor-based UIs, mapping standard HTML inputs, buttons, and layouts to their MudBlazor equivalents without modifying domain logic or command/query layers.

Can I use CanXxx() methods to control UI element states in Blazor?

Yes. CanXxx() outcomes from Domain Entities directly control UI interactivity—button enablement, tooltip text, colors, and badge decorations. The Skill reflects these business rule results in the UI layer, making buttons, fields, and visual states respond to domain state without architectural changes.

What's the best way to enhance Blazor UI without rewriting architecture?

Replace plain HTML with MudBlazor components while keeping your existing Command/Query and Domain Entity structure intact. This Skill handles the UI-layer transformation, applying CanXxx() logic and validation rules to create rich, interactive interfaces without touching core logic.

Do I need to modify my domain entities to use MudBlazor UI enhancement?

No. Existing CanXxx() methods on your Domain Entities are leveraged as-is. The Skill reads their outcomes and translates them into MudBlazor UI decorations, buttons states, and tooltips—zero modifications to your entity or business logic required.

How does MudBlazor UI enhancement handle validation in Razor forms?

Enhanced validation integrates optional Validator components with MudBlazor inputs and feedback components. The Skill combines domain rules with UI-layer validators, surfacing validation errors and state through MudBlazor's built-in messaging and styling mechanisms.

What input files do I need to convert Razor to MudBlazor UI?

Provide plain .razor files, their corresponding Command or Query, and the related Domain Entity with CanXxx() methods if present. Optional Validator classes enhance validation logic. The Skill outputs rewritten .razor files with MudBlazor components and integrated interactivity.