
Blazor Component Development
FreeStreamline your Blazor component creation process.
Free · Opens the source repo
What Blazor Component Development does
The Author Blazor Component skill is designed to assist developers in creating or reviewing Blazor components (.razor files) with a focus on architectural correctness. This skill is particularly useful for those working on new Blazor components that do not require JavaScript interop. It provides clear guidelines on implementing parameters, EventCallback, RenderFragment slots, and managing component lifecycle methods such as OnInitializedAsync and OnParametersSet. Additionally, it emphasizes best practices for async programming, IAsyncDisposable, CancellationToken management, CSS isolation, and code-behind structures.
Developers will benefit from the core rules outlined in this skill, which stress the importance of data flow direction, immutability of parameter properties, and efficient rendering techniques. By adhering to these rules, developers can ensure their components are robust and maintainable. The skill also covers advanced patterns for async operations, including debouncing and polling, which are essential for responsive user interfaces.
This skill is particularly targeted at developers who are familiar with Blazor and want to enhance their component development practices. By following the provided guidelines, they can avoid common pitfalls that lead to runtime errors or performance issues. The skill serves as a comprehensive reference for best practices in Blazor component architecture, making it an invaluable resource for both new and experienced developers.
While the skill is focused on component creation, it is not suitable for creating new Blazor projects or handling JavaScript interop. Developers should consider using other tools for those specific tasks. Overall, the Author Blazor Component skill is a practical addition for any developer looking to improve their Blazor component development workflow.
When to use it
Use this skill when writing new Blazor components that do not involve JavaScript interop and require adherence to best practices.
When not to use it
Avoid this skill for tasks involving JavaScript interop, form validation, or creating new Blazor projects.
What you can build with it
Creating a New Component
Use this skill to ensure your new Blazor component adheres to best practices, avoiding common architectural mistakes.
Reviewing Existing Components
Leverage this skill to assess the architecture of existing Blazor components, ensuring they comply with recommended guidelines.
Implementing Async Patterns
Utilize the async programming rules in this skill to enhance the responsiveness and reliability of your Blazor components.
How to install Blazor Component Development
View source1. Install with the skills CLI
npx skills add dotnet/skills/author-component --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by dotnetAuthor Blazor Component
Core Rules
- Data flows down via
[Parameter]. Events flow up viaEventCallback<T>(neverAction/Func). - Never mutate
[Parameter]properties. Copy to a private field inOnParametersSet. - Use
[Parameter] public T Prop { get; set; }— neverrequiredorinit(causes BL0007). - Use
[EditorRequired]for required parameters. - Handle all states: loading, empty, loaded, error — each with
@if/@else. - Use
@keyon repeated elements in loops for efficient diffing. - Use
IReadOnlyList<T>(notIEnumerable<T>) for collection parameters.
RenderFragment & Generics
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public RenderFragment<TItem>? RowTemplate { get; set; } // generic template
Use @typeparam TItem for generic components.
File Patterns
- Single-file:
.razorwith@codeblock when logic < ~50 lines. - Code-behind:
.razor+.razor.cswithpartial classwhen logic > ~50 lines.
Disposal
Implement IAsyncDisposable (not IDisposable) when the component owns subscriptions, timers, or CTS.
In DisposeAsync: unsubscribe (-=), cancel CTS, dispose resources. Never call StateHasChanged.
Async Patterns
awaitevery async operation. Never use.Result,.Wait(),Task.Run,ContinueWith,Thread.Start.- Debounce:
Task.Delay+CancellationTokenSource. Cancel old CTS, create new, await delay, do work. Never useSystem.Threading.TimerorSystem.Timers.Timer. - Polling: Loop in
OnInitializedAsyncwithawait Task.Delay(interval, token)— stays on sync context. - External events (
Action<T>): Useasync voidhandler +await InvokeAsync(() => { state++; StateHasChanged(); })+catch→DispatchExceptionAsync. Never_ = InvokeAsync(...). - Cancel CTS in
DisposeAsync. Don't catchObjectDisposedException— use CTS cancellation.
Don'ts
required/initon[Parameter]— runtime failure- Mutate
[Parameter]— copy to private field inOnParametersSet Action/Funcfor events — useEventCallback<T>Task.Run/.Result/.Wait()/Timer for debounce — deadlock or thread-pool escape- Inline
styleattributes — use CSS classes ordata-*attributes catch { throw; }— usewhenguard or let exceptions propagate- Gold-plating: ARIA, wrapper divs, accessibility features not requested
_ = InvokeAsync(...)— swallows exceptions; useasync void+DispatchExceptionAsync
Frequently asked questions about Blazor Component Development
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.
