mcpField
A
author-component

author-component

github.com/dotnet開発5.8k3.2k 回インストール1 日前に更新
リポジトリ

author-component について

BlazorのC#コンポーネントを作成するための開発スキルです。パラメーター、レンダリング、非同期処理、破棄に関する規則とパターンを示します。

主な機能

  1. 01パラメーターとイベント処理の規約
  2. 02読み込み、空、表示、エラーの各状態
  3. 03RenderFragmentとジェネリックコンポーネント
  4. 04単一ファイルとコードビハインドの指針
  5. 05非同期処理とデバウンスのパターン
  6. 06非同期破棄の実践

活用シーン

  1. 01一方向データフローのコンポーネント作成
  2. 02非同期更新とキャンセルの処理
  3. 03ロジック量に応じたコンポーネント構成の選択

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dotnet/skills --skill author-component

インストール後、Claude Code で/author-componentを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
async-programming-rules.md
breaking-down-components.md
component-disposal.md

詳細

Blazor コンポーネントの作成

基本ルール

  • データは [Parameter] を通じて下方向に流します。イベントは EventCallback<T> を通じて上方向に流します(Action/Func は使用しません)。
  • [Parameter] プロパティを変更しないでください。OnParametersSet でプライベートフィールドにコピーします。
  • [Parameter] public T Prop { get; set; } を使用します。required や init は使用しないでください(BL0007 が発生します)。
  • 必須パラメーターには [EditorRequired] を使用します。
  • 読み込み中、空、読み込み完了、エラーのすべての状態を、各状態に対する @if/@else で処理します。
  • ループ内の繰り返し要素には @key を指定し、効率的に差分を検出できるようにします。
  • コレクションパラメーターには IEnumerable<T> ではなく IReadOnlyList<T> を使用します。

RenderFragment とジェネリック

[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public RenderFragment<TItem>? RowTemplate { get; set; }  // generic template

ジェネリックコンポーネントには @typeparam TItem を使用します。

ファイルのパターン

  • 単一ファイル: ロジックが約 50 行未満の場合は、@code ブロックを含む .razor を使用します。
  • コードビハインド: ロジックが約 50 行を超える場合は、partial class を含む .razor と .razor.cs を使用します。

破棄

コンポーネントがサブスクリプション、タイマー、または CTS を所有する場合は、IDisposable ではなく IAsyncDisposable を実装します。 DisposeAsync では、サブスクリプションを解除(-=)し、CTS をキャンセルして、リソースを破棄します。StateHasChanged は呼び出さないでください。

非同期処理のパターン

  • すべての非同期操作を await します。.Result、.Wait()、Task.Run、ContinueWith、Thread.Start は使用しないでください。
  • デバウンス: Task.Delay と CancellationTokenSource を使用します。古い CTS をキャンセルし、新しい CTS を作成して、遅延を await してから処理を実行します。System.Threading.Timer や System.Timers.Timer は使用しないでください。
  • ポーリング: OnInitializedAsync 内で await Task.Delay(interval, token) を使ったループを実行します。これにより、同期コンテキスト上にとどまります。
  • 外部イベント(Action<T>):async void ハンドラーを使用し、await InvokeAsync(() => { state++; StateHasChanged(); }) を呼び出してから、catch で DispatchExceptionAsync を呼び出します。_ = InvokeAsync(...) は使用しないでください。
  • DisposeAsync で CTS をキャンセルします。ObjectDisposedException をキャッチしないでください。CTS のキャンセルを使用します。

禁止事項

  • [Parameter] に required/init を指定すること — 実行時に失敗します
  • [Parameter] を変更すること — OnParametersSet でプライベートフィールドにコピーします
  • イベントに Action/Func を使うこと — EventCallback<T> を使用します
  • デバウンスに Task.Run/.Result/.Wait()/タイマーを使うこと — デッドロックまたはスレッドプールへの処理の移行が発生します
  • インラインの style 属性 — CSS クラスまたは data-* 属性を使用します
  • catch { throw; } — when ガードを使うか、例外をそのまま伝播させます
  • 過剰な作り込み:要求されていない ARIA、ラッパーの div、アクセシビリティ機能
  • _ = InvokeAsync(...) — 例外を握りつぶします。async void と DispatchExceptionAsync を使用します

コメント