# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexbase.in/flexbase-mcp-ai-prompts/blazor-fluent-ui-guide-prompts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.