> For the complete documentation index, see [llms.txt](https://docs.flexbase.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexbase.in/flexbase-mcp-ai-prompts/blazor-fluent-ui-guide-prompts.md).

# 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

* **API patterns (build API first):** [FlexBase API Patterns](/flexbase-mcp-ai-prompts/flexbase-api-guide-prompts.md)
* **Generate UI from extraction JSON:** [Implementation Completion](/flexbase-mcp-ai-prompts/implementation-completion-prompts.md)
* **Angular alternative:** [Angular UI](/flexbase-mcp-ai-prompts/angular-ui-guide-prompts.md)
* **React alternative:** [React UI](/flexbase-mcp-ai-prompts/react-js-ui-guide-prompts.md)