Agent skill · software engineering · github
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.
Why this skill is useful
Provides specific usage patterns and component configurations for the Fluent UI Blazor library that the AI wouldn't reliably generate on its own.
What it needs
Requires dotnet installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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). 3. Service registration in Program.cs ServiceLifetime rules: ServiceLifetime.Scoped — for Blazor Server / Interactive (default) ServiceLifetime.Singleton — for Blazor WebAssembly standalone ServiceLifetime.Transient — throws NotSupportedException 4. Icons require a separate NuGet package Usage with a @using alias: Pattern: Icons.[Variant].[Size].[Name] Variants: Regular, Filled Sizes: Size12, Size16, Size20, Size24, Size28, Size32, Size48 Custom image: Icon.FromImageUrl("/path/to/image.png") Never use string-based icon names — icons are strongly-typed classes. 5. List component binding model FluentSelect<TOption>, FluentCombobox<TOption>, FluentListbox<TOption>, and FluentAutocomplete<TOption> do NOT work like <InputSelect>. They use: Items — the data source (IEnumerable<TOption>) OptionText — Func<TOption, string?> to extract display text OptionValue — Func<TOption, string?> to extract the value string SelectedOption / SelectedOptionChanged — for single selection binding SelectedOptions / SelectedOptionsChanged — for multi-selection binding NOT like this (wrong pattern): 6. FluentAutocomplete specifics Use ValueText (NOT Value — it's obsolete) for the search input text OnOptionsSearch is the required callback to filter options Default is Multiple="true" 7. Dialog service pattern Do NOT toggle visibility of <FluentDialog> tags. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/fluentui-blazor