New to Claude Skills? Learn how to install them →

dotnet on GitHub

Blazor Component Development

Free

Streamline your Blazor component creation process.

by dotnet5.1k stars on dotnet/skills
3 views
Updated Aug 10, 2026
Get this skill

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 source

1. Install with the skills CLI

npx skills add dotnet/skills/author-component --agent claude-code

2. 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 dotnet

Author Blazor Component

Core Rules

  • Data flows down via [Parameter]. Events flow up via EventCallback<T> (never Action/Func).
  • Never mutate [Parameter] properties. Copy to a private field in OnParametersSet.
  • Use [Parameter] public T Prop { get; set; } — never required or init (causes BL0007).
  • Use [EditorRequired] for required parameters.
  • Handle all states: loading, empty, loaded, error — each with @if/@else.
  • Use @key on repeated elements in loops for efficient diffing.
  • Use IReadOnlyList<T> (not IEnumerable<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: .razor with @code block when logic < ~50 lines.
  • Code-behind: .razor + .razor.cs with partial class when 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

  • await every 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 use System.Threading.Timer or System.Timers.Timer.
  • Polling: Loop in OnInitializedAsync with await Task.Delay(interval, token) — stays on sync context.
  • External events (Action<T>): Use async void handler + await InvokeAsync(() => { state++; StateHasChanged(); }) + catchDispatchExceptionAsync. Never _ = InvokeAsync(...).
  • Cancel CTS in DisposeAsync. Don't catch ObjectDisposedException — use CTS cancellation.

Don'ts

  • required/init on [Parameter] — runtime failure
  • Mutate [Parameter] — copy to private field in OnParametersSet
  • Action/Func for events — use EventCallback<T>
  • Task.Run/.Result/.Wait()/Timer for debounce — deadlock or thread-pool escape
  • Inline style attributes — use CSS classes or data-* attributes
  • catch { throw; } — use when guard or let exceptions propagate
  • Gold-plating: ARIA, wrapper divs, accessibility features not requested
  • _ = InvokeAsync(...) — swallows exceptions; use async void + DispatchExceptionAsync

Frequently asked questions about Blazor Component Development

Similar skills