Fluent UI Blazor skill: Claude writes correct Fluent UI components

Teaches your AI assistant the rules for using the Microsoft Fluent UI Blazor component library in a Blazor app.

Installs: 9K; on skills.sh
Stars: 40.7K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

fluentui-blazor gives your assistant 10 rules for the Microsoft.FluentUI.AspNetCore.Components package, which its SKILL.md calls version 4. The rules cover mandatory providers, service registration, icons, list components like FluentSelect, dialogs and toasts, design tokens and forms. Four reference files cover setup, layout and navigation, the data grid and theming. It is a community skill in GitHub's awesome-copilot repo, not one from Microsoft's own repos.

Good for

Blazor developers using the Microsoft.FluentUI.AspNetCore.Components package
Anyone whose Fluent dialogs or toasts show nothing because a provider is missing
Teams setting up Fluent UI theming, icons, data grids and layout

Install fluentui-blazor

Claude Code

1
Download the skill folder from https://github.com/github/awesome-copilot/tree/HEAD/skills/fluentui-blazor.
2
Put it at ~/.claude/skills/fluentui-blazor/ so that SKILL.md sits directly inside.
3
Start a new session; the skill loads when its description matches the task.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

Guide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications. Use this when the user is building a Blazor app with Fluent UI components, setting up the library, using FluentUI components like FluentButton, FluentDataGrid, FluentDialog, FluentToast, FluentNavMenu, FluentTextField, FluentSelect, FluentAutocomplete, FluentDesignTheme, or any component prefixed with "Fluent". Also use when troubleshooting missing providers, JS interop issues, or theming.

Sections in SKILL.md

Critical Rules
1. No manual <script> or <link> tags needed
2. Providers are mandatory for service-based components
3. Service registration in Program.cs
4. Icons require a separate NuGet package
5. List component binding model
6. FluentAutocomplete specifics
7. Dialog service pattern
8. Toast notifications
9. Design tokens and themes work only after render
10. FluentEditForm vs EditForm
Reference files

Key facts

Author: Adrien Clerbois (author field of the fluentui-blazor plugin)
Repo: github/awesome-copilot
License: MIT
Installs on skills.sh: 9,003 as of 2026-11-02
GitHub stars: 40,666 for the whole github/awesome-copilot repo, 2026-11-02
Last repo commit: 2026-10-30
What is inside: 5 files including SKILL.md (4 reference files); it bundles no scripts
Part of: The fluentui-blazor plugin for Copilot CLI (this skill plus a bundled MCP server)
Targets: Microsoft.FluentUI.AspNetCore.Components version 4, per SKILL.md

What it includes

The library loads its own CSS and JS
Tells the assistant never to add script or link tags for the core library.
Write · 1. No script or link tags
Add five providers to the root layout
FluentToastProvider, FluentDialogProvider, FluentMessageBarProvider, FluentTooltipProvider and FluentKeyCodeProvider must be in the root layout. Without them, service calls fail silently.
Try: “Add a delete confirmation dialog to this page using Fluent UI Blazor.”
Write · 2. Providers are mandatory
AddFluentUIComponents in Program.cs, with lifetime rules
Scoped for Blazor Server and Interactive, Singleton for standalone WebAssembly. Transient throws NotSupportedException.
Write · 3. Service registration
Strongly-typed icons from the Icons package
Adds Microsoft.FluentUI.AspNetCore.Components.Icons with dotnet add package and uses Icons.[Variant].[Size].[Name] instead of icon name strings.
Runs code · 4. Icons need a separate package
Items, OptionText, OptionValue for selects and comboboxes
FluentSelect, FluentCombobox, FluentListbox and FluentAutocomplete do not bind like InputSelect.
Write · 5. List component binding
ValueText, OnOptionsSearch, Multiple by default
Uses ValueText for the search text and OnOptionsSearch to filter options.
Write · 6. FluentAutocomplete specifics
Content component plus IDialogService, no FluentDialog toggling
Do not toggle visibility of FluentDialog tags. Write a content component implementing IDialogContentComponent<TData> and open it with IDialogService, which also has ShowConfirmationAsync, ShowSuccessAsync and ShowErrorAsync.
Write · 7. Dialog service pattern
IToastService ShowSuccess, ShowError, ShowWarning, ShowInfo
Shows toasts through IToastService. FluentToastProvider has Position, Timeout and MaxToastCount settings.
Write · 8. Toast notifications
Set tokens in OnAfterRenderAsync, never OnInitialized
Design tokens use JS interop, so setting them early fails.
Write · 9. Design tokens after render
Use EditForm except inside FluentWizard steps
Use standard EditForm with Fluent form components, and FluentValidationMessage and FluentValidationSummary for styling.
Write · 10. FluentEditForm vs EditForm
SETUP, LAYOUT-AND-NAVIGATION, DATAGRID, THEMING
Four markdown files the assistant loads for setup, layout and navigation, the data grid and theming.
Read · Reference files

From the official docs

Permissions

Medium risk

The skill makes your assistant edit Blazor code and add a NuGet package. The Copilot CLI plugin route also starts an MCP server that downloads a package from nuget.org.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

The plugin route runs a downloaded MCP server
The plugin starts an MCP server with dnx, pinned in mcp.json to Microsoft.FluentUI.AspNetCore.McpServer 5.0.0-rc.5-26219.1 with --yes. It needs the .NET 10 SDK and downloads the package from nuget.org on first launch. Use the skills CLI tab to skip it. github.com
It edits your project and adds a package
Rule 4 uses dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons, and the rules rewrite component code. Commit first and review the diff. github.com
Skill and MCP server target different versions
SKILL.md says version 4. The plugin README says the MCP server and library share a version number, and the pinned server is 5.0.0-rc, with check_project_version to compare. github.com

Technical details

Turning on read-only	No read-only mode. The skill is built to write component code.
Talks to	nuget.org (plugin route: first launch of the MCP server downloads the package)
Scopes	Edits Razor and C# files in your Blazor app Tells the assistant to run dotnet add package for the Icons package Plugin route only: starts the fluent-ui-blazor MCP server with dnx

Questions

What does the fluentui-blazor skill do?

It gives your assistant 10 rules for Microsoft Fluent UI Blazor, such as adding providers to the root layout and using strongly-typed icons. Rule 2 says that without a provider, service calls fail silently.

How do I install it?

Use the install box at the top. In Claude Code, copy the skill folder (SKILL.md and its references folder) into ~/.claude/skills/ or .claude/skills/. In Claude on the web or desktop, zip the folder and upload it under Customize, then Skills.

Is it from Microsoft?

The skill itself is in GitHub's community awesome-copilot repo, not in a Microsoft repo, and the plugin lists Adrien Clerbois as author. The library it covers is Microsoft's Fluent UI Blazor, and the MCP server bundled in the plugin is maintained in microsoft/fluentui-blazor, according to the plugin README.

Which Fluent UI Blazor version does it cover?

SKILL.md says version 4 of the Microsoft.FluentUI.AspNetCore.Components package. The plugin also bundles an MCP server pinned to a 5.0.0 release candidate, so check which version your project uses.

What is the difference between the skill and the plugin?

The skill is the 10 rules and 4 reference files. The Copilot CLI plugin adds the fluent-ui-blazor MCP server, which looks up components, enums, icons and docs. It needs the .NET 10 SDK and dnx.

Does it need an API key?

The skill names no key and bundles no scripts. The plugin MCP server is started with dnx and downloads from nuget.org.

Is it safe?

The skill bundles no scripts but makes your assistant change Blazor code and add a NuGet package. The plugin route also runs an MCP server with dnx --yes. Commit first and review the diff. See the permissions section.

Information

updated Nov 2, 2026

Repository: github/awesome-copilot
Folder: skills/fluentui-blazor

github/awesome-copilot skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

fluentui-blazor SKILL.md · github.com
awesome-copilot README, Install a Plugin · github.com
fluentui-blazor plugin README · github.com
fluentui-blazor plugin mcp.json · github.com
references/SETUP.md · github.com