Ctrlk

Blazor Fluent UI Guide Prompts

Implement FlexBase UI with Microsoft FluentUI Blazor v4.x: pages, dialogs, data grids, REST clients, design system, and more.

How to Use

Tell your AI agent what UI you want to build. It will load Blazor conventions and guide sections automatically.

Example prompts you can give your AI agent:

Create a CRUD list page for Customers with data grid
Create an edit dialog for the Order entity
Set up the REST client service for the Products module
Fix the response deserialization issue in my service
Review all DTOs and fix missing Id properties
Implement the complete UI for the Invoices entity

Task Catalog

Theme Setup (One-Time — Do This First)

Configure the FluentDesignTheme with a business-domain-specific color, admin layout pattern (sidebar + header), CSS design system, and FluentUI providers. This is the first step before any functional UI work.

Task
Goal

Setup FlexBase Theme

Configure domain-themed admin layout + design system CSS + FluentUI providers

Setup & Layout Tasks

Task
Goal

Setup FluentUI Providers

Configure MainLayout with FluentUI provider tree

Integrate Design System CSS

Add FlexBase design tokens, spacing, typography

Implement FluentStack Layout

Use FluentStack for horizontal/vertical layouts

Implement FluentToolbar

Command bar with actions, filters, search

Apply Layout & Spacing

Consistent spacing using design system utilities

Generate Complete Module UI (End-to-End)

This is the primary task for module-level UI generation. One command generates all artifacts.

Task
Goal

Generate Blazor pages for {Module}

Complete module: REST client + DTOs + dialog + list page + nav

What gets generated:

  1. UI DTOs (list + detail with validation annotations)

  2. REST client service with CRUD methods

  3. DI registration

  4. Edit dialog (view/edit/create modes)

  5. List page (DataGrid with search, filter, CRUD, pagination)

  6. Sidebar/navigation entry

REST Client & Data Tasks

Task
Goal

Create REST Client Service

HTTP service with response unwrapping and resilience

Review REST Client Services

Audit existing services for convention violations

Fix Response Deserialization

Resolve JSON deserialization issues

Diagnose Deserialization Errors

Debug response handling failures

Dialog Tasks

Task
Goal

Create Edit Dialog

Three-mode dialog (view/edit/create)

Create View Dialog

Read-only detail dialog

Create Lookup Dialog

Search/select dialog for foreign key fields

Page Tasks

Task
Goal

Create CRUD List Page

DataGrid with pagination, sorting, search, CRUD actions

Create Detail Page

Entity detail view with related data

UX Pattern Tasks

Task
Goal

Loading States

Skeleton loading, spinners, three-state pattern

Validation Error Display

Form validation with field-level messages

Toast Notifications

Success/error/warning toast messages

Confirmation Dialogs

Delete/action confirmation patterns

Breadcrumbs

Page breadcrumb navigation

Authentication Tasks

Task
Goal

Token Validation Service

Implement token storage and validation

Logout Pattern

Implement proper logout flow

Critical DTO Rules

Task
Goal

Verify Update DTOs Have Id

Audit all Update/Delete DTOs for mandatory Id

Review DTO ID Types

Ensure all IDs are string type

Related

Last updated