How to use the Fluent UI Blazor Guide agent skill

What is an agent skill, and what does this one do?

An agent skill is a folder of instructions that an AI agent can load when a task matches it. This skill is named fluentui-blazor and is built around a SKILL.md file plus reference files on setup, layout and navigation, the data grid, and theming.

Once installed, the agent knows the required setup steps, service registrations, provider components, icon package usage, and the right data-binding patterns for components such as FluentDataGrid, FluentDialog, FluentToast and FluentSelect. The guidance is meant to stop common mistakes, such as using the wrong binding style or leaving out a provider, which causes service calls to fail silently.

• Adds the required providers such as FluentToastProvider and FluentDialogProvider to the root layout.
• Registers services with AddFluentUIComponents in Program.cs.
• Uses strongly-typed icons from the Icons package instead of string names.
• Uses Items, OptionText and OptionValue for FluentSelect-style components instead of InputSelect patterns.
• Shows the dialog service and toast service patterns instead of toggling FluentDialog visibility.

Install the fluentui-blazor skill

Download the skill ZIP from this page and unzip it. To make it available to Claude Code, put the unzipped fluentui-blazor folder in ~/.claude/skills/ for your user account, or in .claude/skills/ inside a specific project if you want it to apply only to that project.

If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.

• Personal install: place the folder in ~/.claude/skills/.
• Project install: place the folder in .claude/skills/ inside your project.
• Claude apps: upload the ZIP under Settings → Capabilities → Skills.

Check that your project meets the requirements

The skill assumes you have .NET and a Blazor application. It guides use of the core NuGet package Microsoft.FluentUI.AspNetCore.Components, version 4. The Icons package, Microsoft.FluentUI.AspNetCore.Components.Icons, is optional but needed if you want the icon classes the skill describes.

If you do not yet have the core package, the skill's setup steps show the command to add the icons package. Add the core package to your project in the way you normally manage NuGet packages.

• A .NET project with a Blazor application (Blazor Server or Blazor WebAssembly).
• Microsoft.FluentUI.AspNetCore.Components, version 4 (required).
• Microsoft.FluentUI.AspNetCore.Components.Icons (optional, for icons).

Trigger the skill with natural requests

You do not need a special command. Describe what you are building in plain language and mention Fluent UI or a Fluent component by name. The skill's description lists components such as FluentButton, FluentDataGrid, FluentDialog, FluentToast, FluentNavMenu, FluentTextField, FluentSelect, FluentAutocomplete and FluentDesignTheme, and it also covers troubleshooting missing providers, JS interop issues and theming.

Be specific about your goal. A request that names the component and the problem gets better code than a general request.

• "Add a FluentDataGrid of customers with sortable Name and Email columns."
• "My FluentToast messages never show up. Why?"
• "Set up Fluent UI in my Blazor Server app and register the services."
• "Replace this InputSelect with a FluentSelect bound to my Country list."
• "Show a confirmation dialog with the Fluent dialog service before deleting a row."

Example: a Fluent select and a data grid

For a select, the skill expects Items, OptionText and OptionValue, with @bind-SelectedOption for single selection. It warns against wrapping options in <option> tags with @bind-Value, which is the InputSelect pattern.

For a data grid, the skill says columns are child components, not properties. You use PropertyColumn, TemplateColumn or SelectColumn inside FluentDataGrid. Ask the agent to build a grid and it should produce that structure.

Safety notes: scripts and network

According to the skill's listing, this skill does not run scripts and does not use the network. It consists of instructions and reference files that guide the agent's code. The code the agent writes still runs in your own project, so review it as you would any other code change.

The skill's guidance says not to add manual script or link tags for the core library, because the library loads its CSS and JS automatically. If the agent suggests adding them, check the suggestion against the official setup.

• Runs scripts: no.
• Uses network: no.
• Licence: MIT.
• Review generated code and run your build and tests before committing.

Tips for better results

Tell the agent your hosting model. The skill says the service lifetime differs: Scoped is the default for Blazor Server and interactive apps, and Singleton is for Blazor WebAssembly standalone. Transient throws NotSupportedException.

If a toast, dialog or theme does not appear, mention that in your request. The skill covers missing providers, JS interop issues and theming, and it notes that design tokens must be set in OnAfterRenderAsync, not OnInitialized.

• Name your Blazor hosting model (Server or WebAssembly).
• Mention the exact component and the symptom.
• Ask for the required providers when using toasts, dialogs, message bars or tooltips.
• Do not use this skill for MudBlazor or Radzen projects, because their component APIs differ.