skills.rest
ecoDriverltd
ecoDriverltdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

author-component

Create and review Blazor .razor components with correct parameters, lifecycle, and async patterns.

Updated Jul 2, 2026
Search Tags:#code review#dotnet#async patterns#blazor#component lifecycle#eventcallback#razor components
One-click install
npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill author-component-ecodriverltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: author-component
Source: https://github.com/ecoDriverltd/FoundryAgentsExperiment/tree/main/.agents/skills/author-component
Command: npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill author-component-ecodriverltd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Blazor components often fail at runtime due to subtle mistakes: mutating parameters, using Action instead of EventCallback, deadlocking the sync context with .Result, or leaking event subscriptions. This Skill encodes the correct architectural rules so generated or reviewed .razor components follow framework conventions from the start. ## Core Features & Use Cases - Component authoring rules: Enforces one-way data flow via [Parameter], EventCallback<T> for events, RenderFragment slots, generic components with @typeparam, and CSS isolation. - Async and disposal guidance: Covers IAsyncDisposable, CancellationToken cancellation, debounce with Task.Delay, external event handling with async void plus DispatchExceptionAsync, and forbidden primitives like Task.Run and .Result. - Reference deep-dives: Ships reference docs on async programming rules, component decomposition (sibling extraction, list-item extraction, cascading values), and disposal patterns. - Use Case: Ask the agent to build a paged data grid component; it produces a .razor file with proper parameters, @key diffing, loading/empty/error states, and CTS-based cancellation on disposal. ## Quick Start Ask the agent to create a Blazor component, for example: write a TaskList component that takes a list of tasks and raises an event when one is toggled.

Frequently Asked Questions about author-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Blazor component with parameters and events?▼

Declare inputs with [Parameter] public properties and raise events with EventCallback<T> rather than Action or Func. Never mutate parameters; copy them to private fields in OnParametersSet, and mark required parameters with [EditorRequired].

How do I handle async work in Blazor components without deadlocks?▼

Await every Task and never use .Result, .Wait(), Task.Run, or ContinueWith, which deadlock or escape Blazor's synchronization context. For debounce use Task.Delay with a CancellationTokenSource, and cancel it in DisposeAsync.

When should a Blazor component implement IAsyncDisposable?▼

Implement IAsyncDisposable when the component owns event subscriptions, timers, a CancellationTokenSource, or JS interop references. Unsubscribe handlers, cancel the CTS, and dispose resources in DisposeAsync, and never call StateHasChanged there.

Why does StateHasChanged throw InvalidOperationException in Blazor?▼

It throws when called from a thread-pool thread, such as inside Task.Run or a timer callback. Marshal back onto the sync context with await InvokeAsync(() => StateHasChanged()) and route errors via DispatchExceptionAsync.

When should I use code-behind versus a single .razor file?▼

Use a single .razor file with an @code block when the logic is under roughly 50 lines. For larger components, split into a .razor file plus a .razor.cs partial class to keep markup and logic separate.

What tasks are outside the scope of Blazor component authoring?▼

This guidance excludes JavaScript interop, forms and validation, prerendering issues, HTTP data fetching patterns, and coordinating state between unrelated components. Those scenarios are handled by separate dedicated skills.

Related Skills

Explore More Software Engineering Skills→
whopointerwhopointer
1

aspnet-core

Guide ASP.NET Core web development across application models and pipeline composition.

Community
Advanced
gugug168gugug168

frontend-patterns

Optimizes React and Next.js apps for maintainability and runtime performance.

Community
Intermediate
dotnetdotnet
5.3k

author-component

Create and review Blazor components with correct parameters, lifecycle, and async patterns.

Official
Intermediate
burakdmirburakdmir
13

ABP Framework — UI & Frontend

Integrate ABP Framework UI across MVC/Razor Pages, Blazor, Angular, and React with theming and permission checks.

Community
Intermediate