fluentui-blazor
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.
Profile →npx skills add github/awesome-copilot --skill fluentui-blazor --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Fluent UI Blazor — Consumer Usage Guide This skill teaches how to correctly use the **Microsoft.FluentUI.AspNetCore.Components** (version 4) NuGet package in Blazor applications. ## Critical Rules ### 1. No manual `<script>` or `<link>` tags needed The library auto-loads all CSS and JS via Blazor's static web assets and JS initializers. **Never tell users to add `<script>` or `<link>` tags for the core library.** ### 2. Providers are mandatory for service-based components These provider components **MUST** be added to the root layout (e.g. `MainLayout.razor`) for their corresponding services to work. Without them, service calls **fail silently** (no error, no UI). ```razor <FluentToastProvider /> <FluentDialogProvider /> <FluentMessageBarProvider /> <FluentTooltipProvider /> <FluentKeyCodeProvider /> ``` ### 3. Service registration in Program.cs ```csharp builder.Services.AddFluentUIComponents(); // Or with configuration: builder.Services.AddFluentUIComponents(options => { options.UseTooltipServiceProvider = true; // default: true options.ServiceLifetime = ServiceLifetime.Scoped; // default }); ``` **ServiceLifetime rules:** - `ServiceLifetime.Scoped` — for Blazor Server / Intera
- 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
What does the fluentui-blazor skill do?
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.
How do I install it?
Run `npx skills add github/awesome-copilot --skill fluentui-blazor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.