vsa-ui-enhancer_skill

Overview

This skill enhances the UI of Vertical Slice Architecture (VSA) generated razor pages without changing the architecture. It transforms plain .razor HTML into MudBlazor-based components and injects visual behavior driven by domain CanXxx() results. The skill focuses purely on presentation: components, decoration, validation display, tooltips, and loading states.

How this skill works

The tool parses Phase 1 generated .razor files and maps basic HTML elements to MudBlazor components per a component-mapping. It inspects related Command/Query and Domain Entity files to bind form fields and read CanXxx() results. The output is a rewritten .razor using MudBlazor components with disabled states, tooltips, badges, colors, and validation integrated based on domain rules and current state.

When to use it

• You have Phase 1 generated .razor files (plain HTML) and want a richer UI without touching architecture
• You need buttons, links, or badges to reflect Domain Entity CanXxx() results (enabled/disabled, tooltip reasons)
• You want consistent MudBlazor-based forms, lists, detail pages, or dialogs across slices
• You need improved validation displays and loading indicators on existing pages
• You must preserve Command/Query/Handler and state management while upgrading presentation

Best practices

• Provide the corresponding Command/Query and Domain Entity files so field mappings and CanXxx() checks are accurate
• Keep architecture code (handlers, stores, entities) unchanged; only accept UI file inputs for transformation
• Review component-mapping rules to verify how tags map to MudBlazor components before conversion
• Use UI pattern mapping (form/list/detail/dialog) to ensure consistent layouts and interaction models
• Include Validator files when you want enhanced validation rendering

Example use cases

• Convert a CRUD form generated as plain <input>/<select> markup into a MudTextField/MudSelect form with built-in validation
• Enhance a detail page so action buttons respect loan.CanExtend() result, showing disabled state and tooltip reason with a loading spinner on submit
• Transform a generated list into a MudTable or MudDataGrid with status badges and color-coded rows driven by domain state
• Apply consistent dialog confirmation UI using MudBlazor for all slices without changing handlers or domain logic