author-component

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

1|Updated Jun 1, 2026
One-click install
npx skills add https://github.com/D1ssolve/craft-agents --skill author-component-d1ssolve
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: author-component
Source: https://github.com/D1ssolve/craft-agents/tree/main/skills/author-component
Command: npx skills add https://github.com/D1ssolve/craft-agents --skill author-component-d1ssolve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Blazor components correctly requires navigating many subtle rules around parameters, event callbacks, lifecycle methods, async patterns, and disposal. Mistakes like mutating parameters, using Action instead of EventCallback, or calling Task.Run cause runtime failures, deadlocks, and memory leaks that are hard to diagnose. ## Core Features & Use Cases - Component Authoring Rules: Enforces correct patterns for [Parameter], EventCallback<T>, RenderFragment slots, generic components with @typeparam, and CSS isolation. - Async & Disposal Guidance: Provides rules for debouncing, polling, external event handling, CancellationToken cancellation, and IAsyncDisposable cleanup without deadlocking the Blazor sync context. - Component Decomposition: Shows how to break large components into siblings, extract list items with @key, and use CascadingValue to avoid parameter drilling. - Use Case: When asked to build a data grid component with row templates and async data loading, this Skill ensures the implementation uses EditorRequired parameters, EventCallback for row selection, proper @key diffing, and CTS-based cancellation on disposal. ## Quick Start Create a Blazor component named ProductList that accepts a list of products as a parameter, raises an EventCallback when a product is selected, and cancels its data loading when disposed.

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?

Define parameters with [Parameter] public properties and use [EditorRequired] for required ones. Raise events upward with EventCallback<T> rather than Action or Func delegates, and never mutate parameter values directly inside the component.

How to handle async operations in Blazor components without deadlocks?

Await every Task and stay on the Blazor synchronization context. Never use .Result, .Wait(), Task.Run, or ContinueWith, as these deadlock or escape the sync context. Use Task.Delay with CancellationTokenSource for debounce and polling.

When should a Blazor component implement IAsyncDisposable?

Implement IAsyncDisposable when the component owns event subscriptions, timers, CancellationTokenSource instances, or JS interop references. Unsubscribe handlers, cancel the CTS, and dispose resources in DisposeAsync without calling StateHasChanged.

Why does StateHasChanged throw InvalidOperationException in Blazor?

StateHasChanged throws when called from a thread outside the Blazor synchronization context, such as from Task.Run or a timer callback. Marshal back with await InvokeAsync(() => StateHasChanged()) inside an async void event handler.

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. Split into a .razor file plus a .razor.cs partial class when the component logic grows beyond that threshold.

What are the limitations of this Blazor component skill?

It does not cover JavaScript interop, forms and validation, prerendering issues, HTTP data fetching, or cross-component state coordination. Those scenarios are handled by separate dedicated skills in the same pack.