Skip to content
Development
Skill

/author-component

Create or review Blazor components (.razor files) with correct architecture. USE FOR: writing new Blazor components that do NOT involve JavaScript interop, implementing parameters and EventCallback, RenderFragment slots, component lifecycle (OnInitializedAsync, OnParametersSet),

From plugin
dotnet-skills
499200 skills17 agents

Claude Code

$ npx -y skills add managedcode/dotnet-skills --skill author-component --agent claude-code

SKILL.md

author-component.SKILL.md
license: MIT
name: author-component
description: >
  Create or review Blazor components (.razor files) with correct architecture.
  USE FOR: writing new Blazor components that do NOT involve JavaScript interop,
  implementing parameters and EventCallback, RenderFragment slots, component
  lifecycle (OnInitializedAsync, OnParametersSet), async patterns, IAsyncDisposable,
  CancellationToken, CSS isolation, code-behind.
  DO NOT USE FOR: creating new projects (use create-blazor-project), JavaScript
  interop or calling browser APIs from Blazor (use use-js-interop), forms and
  validation (use collect-user-input), prerendering issues (use support-prerendering),
  HTTP data fetching patterns (use fetch-and-send-data), coordinating state between
  unrelated components (use coordinate-components).

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(); })` + `catch` → `DispatchExceptionAsync`. 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`
Read more
@managedcode
Ships withdotnet-skills

Stop explaining .NET to your AI. Start building. We've all been there: asking Claude to use Entity Framework, only to get EF6 patterns in a .NET 8 project. Explaining to Copilot that Blazor Server and Blazor WebAssembly aren't the same thing.

499200 skills17 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
499
Star history of managedcode/dotnet-skills on GitHub, a chart by star-history.com

Other skills on dotnet-skills.

aspnet-core

aspnet-core

Build, debug, modernize, or review ASP.NET Core applications with correct hosting, middleware, security, configuration, logging,…

aspire

aspire

Build, upgrade, and operate Aspire 13.5.x C# or TypeScript application hosts with the current CLI, AppHost, ServiceDefaults,…

avalonia

avalonia

Build and debug Avalonia 11/12 .NET applications with XAML, compiled bindings, MVVM, custom controls, desktop lifetimes, and…

azure-functions

azure-functions

Build, review, or migrate Azure Functions in .NET with correct execution model, isolated worker setup, bindings, DI, and Durable…

blazor

blazor

Build and review Blazor applications across server, WebAssembly, web app, and hybrid scenarios with correct component design,…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about author-component.

Which coding agents can use author-component?
author-component installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.