Skip to content
alyn
dotnet

Author Component skill

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-pr

$npx skills add dotnet/skills --skill author-component
View this skill on GitHubdotnet/skills/plugins/dotnet-blazor/skills/author-component/SKILL.md
Pack stars
5,895
Pack installs
439k
Alyn Score
71/99
Updated
1 h ago
License
MIT
– views – installs via Alyn

dotnet

Author Component

Install Author Component

Pick your agent. Every command is ready to paste.

$npx skills add dotnet/skills --skill author-component

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads author-component when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the author-component skill”. In Codex, type $author-component.

The skill itself

SKILL.md

FolderGitHub

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

Tips for Author Component

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
  • • It is part of a pack with 30 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Author Component

What does the Author Component skill do?

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-pr

How do I install Author Component?

Run "npx skills add dotnet/skills --skill author-component" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Author Component work in Cursor and Codex?

Yes. Author Component uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Author Component free?

Author Component is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.

Who made Author Component?

Author Component is published by dotnet in the dotnet/skills repository, together with 29 other skills.

Similar skills. From other creators.