Author Component
.NET (Microsoft)OfficialPublished by .NET (Microsoft)
- Skill
- Guidelines
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a structured approach to building Blazor components, focusing on correct architectural patterns, lifecycle management, and asynchronous programming. It emphasizes maintaining the Blazor synchronization context, proper data flow using Parameters and EventCallbacks, and efficient component decomposition. The guidelines cover best practices for handling component state, implementing IAsyncDisposable, and avoiding common pitfalls like thread-pool escapes or incorrect parameter usage.
What it does
- Defines standards for data flow using Parameters and EventCallbacks.
- Provides patterns for component lifecycle management and asynchronous operations.
- Outlines rules for component decomposition and sibling extraction.
- Specifies implementation details for IAsyncDisposable and resource cleanup.
- Enforces architectural constraints to prevent deadlocks and synchronization issues.
- Guides the use of RenderFragments and generic component templates.
When to use it
- When creating new Blazor components that require custom logic.
- When refactoring complex components into smaller, maintainable pieces.
- When implementing asynchronous data loading or event handling within a component.
- When ensuring components correctly handle disposal of subscriptions or timers.
- When standardizing code-behind or single-file component structures.
Advantages
- Prevents common Blazor-specific runtime errors and deadlocks.
- Promotes clean, modular component architecture.
- Ensures consistent handling of asynchronous tasks and UI synchronization.
- Reduces technical debt by enforcing established best practices.
- Improves component performance through efficient diffing and state management.
Usage examples
- “Create a reusable Card component that accepts a title and a child content template.”
- Generates a .razor file using [Parameter] for the title and a RenderFragment for the ChildContent, following the recommended data flow and structure.
- “How should I handle an async timer in a Blazor component?”
- Provides a pattern using Task.Delay and CancellationTokenSource within the component lifecycle, ensuring proper disposal via IAsyncDisposable.
- “Refactor this large component that has too much logic in the @code block.”
- Suggests splitting the component into a .razor file and a .razor.cs code-behind file, or extracting sub-components if the logic involves independent blocks.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/dotnet/author-component/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip author-component.zip -d .agents/skills
Documentation by .NET (Microsoft)
Author 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 templateUse @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 failureMutate
[Parameter]— copy to private field inOnParametersSetAction/Funcfor events — useEventCallback<T>Task.Run/.Result/.Wait()/Timer for debounce — deadlock or thread-pool escapeInline
styleattributes — use CSS classes ordata-*attributescatch { throw; }— usewhenguard or let exceptions propagateGold-plating: ARIA, wrapper divs, accessibility features not requested
_ = InvokeAsync(...)— swallows exceptions; useasync void+DispatchExceptionAsync
Files
- ATTRIBUTION.mdAdded by AutoGineer845 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md3.3 KiB
- references/async-programming-rules.md6.8 KiB
- references/breaking-down-components.md3.2 KiB
- references/component-disposal.md2.7 KiB
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Published by
- .NET (Microsoft)
- Publisher
- .NET (Microsoft) (Official)
- Source
- dotnet/skills · plugins/dotnet-blazor/skills/author-component · commit 96c3d68
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by .NET (Microsoft).
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download author-component.zip