К основному содержанию
скилл CX Codex

author-component — скилл для Claude Code: что делает и как установить

Помогает проектировать и проверять компоненты Blazor без вызовов JavaScript. Пригодится при настройке параметров, слотов RenderFragment и асинхронного жизненного цикла.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dotnet/skills --skill author-component -a claude-code
Открыть на GitHub

Что делает author-component

Скилл задаёт строгие архитектурные правила для файлов .razor в проектах Blazor. Если разметка и логика компонента укладываются примерно в 50 строк, код остаётся внутри единого файла в блоке @code. Для более объёмных компонентов создаётся связанный класс partial class в файле .razor.cs. Данные передаются вниз по иерархии через [Parameter], а события идут вверх исключительно через EventCallback<T>.

Любые асинхронные цепочки требуют прямого вызова await. Блокирующие вызовы через .Result или Task.Run запрещены из-за риска взаимных блокировок в контексте синхронизации. Компоненты с подписками или фоновыми задачами обязаны реализовывать интерфейс IAsyncDisposable и отменять операции через CancellationTokenSource.

Этот инструмент сфокусирован только на внутренней структуре компонентов. Он не решает задачи взаимодействия с браузерным JS, валидации форм или предварительного рендеринга. Добавление ключевых слов required или init к свойствам с атрибутом [Parameter] вызывает ошибку компилятора BL0007, поэтому правила скилла их полностью исключают.

Какие задачи решает

  • спроектировать компонент Blazor с разделением логики на файл разметки и code-behind
  • настроить передачу событий наверх через EventCallback без делегатов Action
  • реализовать шаблоны RenderFragment для настраиваемых строк таблицы
  • организовать отмену асинхронных операций через CancellationTokenSource и IAsyncDisposable

Примеры запросов агенту

  • Создай компонент таблицы Blazor с универсальным шаблоном RowTemplate и обработкой состояния загрузки
  • Проверь компонент UserCard.razor на ошибки в жизненном цикле и мутации параметров
  • Вынеси логику из файла Cart.razor в отдельный класс Cart.razor.cs

Как установить author-component

1Через Skills CLI (Vercel)

npx skills add dotnet/skills --skill author-component -a claude-code

2Вручную: положить файлы

~/.claude/skills/author-component/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/author-component/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора101

collect-user-input Скилл для работы с формами в Blazor: EditForm, встроенные компоненты ввода, валидация и обработка отправки. Пригодится, когда нужно добавить форму, поиск или загрузку файлов. CX Codex +1 3 000установок coordinate-components Скилл учит агента связывать состояние компонентов Blazor без цепочек параметров от предка к потомку. Помогает настроить каскадные значения и сервисы со scope. CX Codex +1 3 000установок create-blazor-project Скилл проводит агента через выбор режима рендеринга Blazor и запускает dotnet new blazor с нужными флагами. CX Codex +1 3 000установок property-patterns Разбирает условия, дефолты и перезаписи в свойствах MSBuild по шаблонам из репозитория MSBuild. Пригодится, когда сборка берёт не то значение или падает на чужой ОС. CX Codex +1 3 000установок test-analysis-extensions Справочный каталог файлов с таблицами для анализа тестов: маркеры, ассерты, пропуски, паттерны ожиданий. Агент читает нужный файл под язык проекта. CX Codex +1 3 100установок find-untested-sources Находит файлы исходного кода без тестов через статический анализ AST без сборки проекта. Пригодится агенту перед генерацией тестов, чтобы составить точный список пробелов. CX Codex +1 3 100установок fetch-and-send-data Помогает загружать и отправлять данные через API в Blazor-компонентах. Нужен для настройки HttpClient, состояний загрузки и обработки ошибок. CX Codex +1 3 100установок setup-local-sdk Ставит .NET SDK в папку .dotnet/ внутри проекта и подключает его через global.json, не трогая системную установку. CX Codex +1 2 900установок

Похожие

aspnet-core официальный openai Помогает проектировать, писать и обновлять приложения на ASP.NET Core по официальным гайдам Microsoft. Пригодится при работе с Blazor, Minimal API и gRPC. CX Codex +1 3 900установок blazor Mindrally Скилл задаёт агенту правила разработки на Blazor: жизненный цикл компонентов, привязка данных, управление состоянием и оптимизация рендеринга. CX Codex +1 798установок playwright-blazor-testing Aaronontheweb Скилл учит агента писать end-to-end тесты для Blazor Server и WebAssembly на Playwright: навигация, формы, авторизация, селекторы. CX Codex +1 537установок csharp-developer https://github.com/Jeffallan Настраивает правила разработки на .NET 8 и C# 12 для создания API, Blazor-приложений и работы с EF Core. Пригодится при проектировании сервисов с CQRS и Result pattern. CX Codex +1 4 800установок c-sharp Mindrally Задаёт агенту стиль кода на C#: именование, async, DI, тесты, Blazor и Unity. Пригодится, когда проект на .NET и не хочется каждый раз объяснять конвенции. CX Codex +1 760установок fluentui-blazor официальный github Скилл подсказывает, как подключать Microsoft Fluent UI Blazor и собирать интерфейсы из Fluent-компонентов. Нужен при разработке и отладке Blazor-приложений. 9 000установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о author-component

Как установить author-component в Claude Code?

Выполните в терминале команду npx skills add dotnet/skills --skill author-component -a claude-code.

Что делает скилл author-component?

Он направляет генерацию и проверку компонентов Blazor по официальным стандартам .NET. Навык контролирует правильную работу с параметрами, шаблонами RenderFragment и очистку ресурсов через IAsyncDisposable.

Подходит ли author-component для вызовов JavaScript?

Нет, работа с браузерными API и JS interop вынесена в отдельный навык use-js-interop. Этот скилл также не создаёт проекты с нуля и не настраивает валидацию форм.

Исходный текст

SKILL.md · MIT
---
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

```csharp
[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`

© dotnet · MIT · dotnet/skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой