Fluent UI Blazor Guide
Build Blazor apps correctly with Microsoft's Fluent UI component library
- Repository
- github/awesome-copilot
- Stars
- 40,703
- Licence
- MIT
- Files
- 5 files
What it does
Teaches the agent the correct way to use Microsoft's Fluent UI Blazor component library in .NET web apps. Once installed, the agent knows the required setup steps, service registrations, provider components, icon package usage, and the right data-binding patterns for components like FluentDataGrid, FluentDialog, FluentToast, and FluentSelect, so it avoids common mistakes such as using the wrong binding style or silently missing providers.
Great for
- C# developers building Blazor Server or Blazor WebAssembly apps with Fluent UI
- Teams setting up Microsoft.FluentUI.AspNetCore.Components for the first time
- Developers troubleshooting missing toasts, dialogs, or theme issues in Fluent UI
Skip it if
- Projects that use other UI libraries such as MudBlazor or Radzen, since the component APIs differ
- Non-.NET front-end work, because the guidance only covers Blazor and NuGet packages
Try asking
- “Set up Fluent UI Blazor in my new Blazor Server app and add the required providers”
- “Create a FluentDataGrid with sorting and paging for my list of orders”
- “Show a confirmation dialog using the Fluent UI dialog service and handle the result”
- “Add a FluentSelect bound to a list of countries using the correct OptionText and OptionValue pattern”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 5 original files, the MIT licence and an attribution note.
fluentui-blazor.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip fluentui-blazor.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip fluentui-blazor.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Mention whether you use Blazor Server or Blazor WebAssembly, since the service lifetime setting depends on it
- Paste the component or error message you are seeing so the agent can match it to the right section of the guide
- Ask the agent to add the provider components to your root layout, since missing providers fail silently
What's inside
- references/DATAGRID.md
- references/LAYOUT-AND-NAVIGATION.md
- references/SETUP.md
- references/THEMING.md
- SKILL.md
Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.