Create or review Blazor components using correct architectural patterns for parameters, lifecycle, and async operations.
- GitHub stars
- 5,942
- Files
- 4
- Last commit
- Nov 11, 2026
- License
- MIT
- Allowed tools
- —
What does the author-component skill do?
author-component creates or review Blazor components using correct architectural patterns for parameters, lifecycle, and async operations.
Summary generated from the skill's SKILL.md.
About the author-component skill
Developing or auditing Blazor components with proper architectural patterns is the primary function of this skill. It assists developers in writing .razor files that correctly implement parameters, lifecycle methods like OnInitializedAsync, and async operations. An agent should load this skill when tasked with creating new components or reviewing existing code to ensure it follows specific Blazor standards, such as using EventCallback instead of Action or Func for event flow.
The tool enforces strict rules regarding data flow, such as copying parameters to private fields in OnParametersSet to avoid mutation. It provides guidance on choosing between single-file components and code-behind patterns based on logic length, and it mandates the use of IAsyncDisposable for resource management. This skill is specifically designed for component logic and does not handle JavaScript interop, project creation, form validation, or HTTP data fetching.
What an agent can do with it
- 1Implement a generic componentCreate a generic Blazor component using a RenderFragment template and the typeparam directive.
- 2Review component lifecycle logicCheck if a component correctly handles asynchronous operations and parameter updates.
- 3Apply debouncing patternsWrite an asynchronous debounce mechanism using Task.Delay and a CancellationTokenSource.
- 4Manage component disposalEnsure that subscriptions and timers are properly cleaned up when a component is destroyed.
Written from the skill's SKILL.md. Every use case is checked against a quote from it.
How to install the author-component skill
Each command copies the skill folder into the client's skills directory. Restart the client or start a new session to load it.Install the author-component skill in Plugin
/plugin marketplace add dotnet/skills /plugin install dotnet-blazor@dotnet-agent-skills
Install the author-component skill in Claude Code
~/.claude/skills/author-component/SKILL.md
$ npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component ~/.claude/skills/author-componentInstall the author-component skill in Claude Code (project)
.claude/skills/author-component/SKILL.md
$ npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component .claude/skills/author-componentInstall the author-component skill in Codex
~/.agents/skills/author-component/SKILL.md
$ npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component ~/.agents/skills/author-componentInstall the author-component skill in Gemini CLI
~/.gemini/skills/author-component/SKILL.md
$ npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component ~/.gemini/skills/author-componentInstall the author-component skill in Claude.ai
npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component author-component && zip -r author-component.zip author-component # claude.ai → Customize → Skills → + → Create skill → Upload a skill → author-component.zip
Automated checks
Ran Nov 15, 2026Full report →Passed our automated checks. That is not a security audit: read the scripts before you let an agent run them. How checks work
- Source repository linked and reachabledotnet/skills/plugins/dotnet-blazor/skills/author-component is public and reachablegithub.com/dotnet/skills/tree/HEAD/plugins/dotnet-blazor/ski ↗Pass
- Open source license (OSI)MITspdx.org/licenses/MIT.html ↗Pass
- Commit or release in the last yearLast commit 2026-11-11github.com/dotnet/skills/commits ↗Pass
- No download-and-run or credential theft in scriptsNo scripts in the skill folderPass
- No hidden instructions in SKILL.mdNo override phrases, safeguard switches, credential requests or hidden charactersgithub.com/dotnet/skills/blob/HEAD/plugins/dotnet-blazor/ski ↗Pass
- Pre-approved tools are scopedNo pre-approved tools; the agent asks before using onegithub.com/dotnet/skills/blob/HEAD/plugins/dotnet-blazor/ski ↗Pass
- SKILL.md follows the Agent Skills formatValid name and description; says when to use it; 66 linesgithub.com/dotnet/skills/blob/HEAD/plugins/dotnet-blazor/ski ↗Pass
SKILL.md
View on GitHubAuthor 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
Files in this skill
4author-component skill questions
How do I install the author-component skill in Claude Code?
Run npx degit dotnet/skills/plugins/dotnet-blazor/skills/author-component ~/.claude/skills/author-component. Claude Code loads skills from ~/.claude/skills (all projects) or .claude/skills (one project) and uses a skill when its description matches the task.
Which clients can use the author-component skill?
Any client that reads the Agent Skills format: Claude Code, Codex, Gemini CLI and claude.ai (upload as a ZIP). Scripts in the skill run only where the client allows code execution.
How should I handle component parameters in Blazor?
Use [Parameter] with get/set accessors, never use required or init keywords. Data should flow down via parameters, and events should flow up using EventCallback<T> instead of Action or Func.
When should I use a code-behind file pattern?
Use a single .razor file with an @code block if the logic is under 50 lines. For logic exceeding 50 lines, use a code-behind pattern with a .razor.cs file and a partial class.
What is the correct way to handle asynchronous operations and debouncing?
Always await async operations and avoid .Result or .Wait(). For debouncing, use Task.Delay combined with a CancellationTokenSource, ensuring you cancel the old CTS before creating a new one.
How should I implement component disposal?
Implement IAsyncDisposable instead of IDisposable when the component manages subscriptions, timers, or cancellation tokens. In DisposeAsync, unsubscribe from events and cancel the CTS.