Skills Provided by the dotnet-blazor Plugin: Complete Guide for Blazor Development

The dotnet-blazor plugin provides nine specialized skills covering component authoring, JavaScript interop, data fetching, prerendering support, UI planning, project creation, component coordination, authentication, and user input handling, each defined in dedicated SKILL.md files under plugins/dotnet-blazor/skills/.

The dotnet-blazor plugin in the dotnet/skills repository delivers a structured collection of development guides for building robust Blazor applications. These skills provided by the dotnet-blazor plugin guide developers through every major architectural decision—from scaffolding projects to handling complex component interactions—using authoritative markdown files that include architectural rules, checklists, and executable code patterns.

Complete Catalog of dotnet-blazor Plugin Skills

Each skill resides in its own subdirectory under plugins/dotnet-blazor/skills/ and contains a SKILL.md file with implementation guidance.

author-component (author-component/SKILL.md) Focuses on writing and reviewing Blazor .razor components, covering parameters, EventCallback, lifecycle methods, disposal patterns, and async workflows. Use this skill when building standard components that do not require JavaScript interop, form handling, or prerendering considerations.

use-js-interop (use-js-interop/SKILL.md) Addresses JavaScript interop scenarios including collocated modules, lifecycle timing, and typed wrapper implementations. Apply this skill when components must invoke JavaScript APIs for charts, clipboard access, or browser-specific features.

fetch-and-send-data (fetch-and-send-data/SKILL.md) Covers API calls, async lifecycle management, error handling, and service abstraction patterns. Use this for any server-side or client-side data access scenario, including CRUD operations.

support-prerendering (support-prerendering/SKILL.md) Provides strategies for making interactive components work correctly during prerendering, including state persistence, mode detection, and disabling prerendering when necessary. Essential for components that render during the initial static pass before becoming interactive.

plan-ui-change (plan-ui-change/SKILL.md) Offers workflows for decomposing complex UI pages into focused component hierarchies and defining data flow. Use when architecting large dashboards or multi-section pages that require careful component decomposition before implementation.

create-blazor-project (create-blazor-project/SKILL.md) Guides project scaffolding with correct render-mode selection (Server, WebAssembly, or Auto), folder layout conventions, and CI/CD integration hooks. Apply when initializing new Blazor solutions.

coordinate-components (coordinate-components/SKILL.md) Explains state synchronization between unrelated components using shared services, cascading values, and event aggregation patterns. Use when multiple components must stay synchronized without direct parent-child coupling.

configure-auth (configure-auth/SKILL.md) Covers authentication implementation using ASP.NET Core Identity, JWT tokens, and external providers, plus route protection strategies. Apply when applications require sign-in functionality, role-based UI visibility, or secure API calls.

collect-user-input (collect-user-input/SKILL.md) Details form construction, validation using data annotations, custom validators, and EditForm patterns. Use for any interface that collects user data through create or edit screens.

Implementation Patterns and Code Examples

The following examples demonstrate the executable patterns found in the dotnet-blazor plugin skills.

Component Authoring Pattern

According to the author-component skill, components should copy parameters to mutable fields in OnParametersSet and use proper lifecycle logging:

@page "/counter"
@inject ILogger<Counter> Logger

<h3>Counter</h3>
<p>Current count: @Count</p>
<button @onclick="Increment">Increment</button>

@code {
    [Parameter] public int Start { get; set; } = 0;
    private int Count;

    protected override void OnParametersSet()
    {
        // Copy Parameter to a mutable field
        Count = Start;
    }

    private void Increment()
    {
        Count++;
        Logger.LogInformation("Count incremented to {Count}", Count);
    }
}

Typed JavaScript Interop

The use-js-interop skill recommends wrapping JavaScript modules in disposable classes with lazy initialization:

public sealed class ChartInterop : IAsyncDisposable
{
    private readonly IJSRuntime _js;
    private IJSObjectReference? _module;

    public ChartInterop(IJSRuntime js) => _js = js;

    private async ValueTask<IJSObjectReference> GetModuleAsync() =>
        _module ??= await _js.InvokeAsync<IJSObjectReference>("import", "./ChartPanel.razor.js");

    public async ValueTask InitializeAsync(ElementReference canvas) =>
        await (await GetModuleAsync()).InvokeVoidAsync("initialize", canvas);

    public async ValueTask DisposeAsync()
    {
        if (_module != null)
        {
            await _module.InvokeVoidAsync("dispose");
            await _module.DisposeAsync();
        }
    }
}

Data Fetching with HttpClient

The fetch-and-send-data skill demonstrates proper async initialization patterns with typed HTTP clients:

@page "/products"
@inject CatalogClient Catalog

@if (products == null)
{
    <p>Loading…</p>
}
else
{
    @foreach (var p in products)
    {
        <p>@p.Name – @p.Price.ToString("C")</p>
    }
}

@code {
    private Product[]? products;

    protected override async Task OnInitializedAsync()
    {
        products = await Catalog.GetProductsAsync();
    }
}

Prerendering State Persistence

For components that must survive the prerendering phase, the support-prerendering skill implements the [PersistentState] attribute:

@page "/weather"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components

<h1>Weather Forecast</h1>

@if (Forecasts == null)
{
    <p>Loading…</p>
}
else
{
    @foreach (var f in Forecasts)
    {
        <p>@f.Date: @f.TemperatureC°C</p>
    }
}

@code {
    [PersistentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await ForecastService.GetForecastsAsync();
    }
}

UI Decomposition Planning

The plan-ui-change skill provides ASCII tree diagrams for component hierarchy planning:

InventoryDashboard (page)
├─ StockSummaryBar
├─ InventoryFilters
├─ InventoryTable
│   └─ InventoryRow
└─ AddProductForm

Plugin Configuration and File Structure

The dotnet-blazor plugin is declared in plugins/dotnet-blazor/plugin.json, which points to the skills/ directory containing the nine skill definitions. Each skill directory follows the naming convention [skill-name]/SKILL.md, providing consistent access to architectural guidance regardless of the specific Blazor scenario.

Summary

• The dotnet-blazor plugin provides nine specialized skills covering the complete Blazor development lifecycle.
• Each skill is authored in a dedicated SKILL.md file under plugins/dotnet-blazor/skills/[skill-name]/.
• author-component and fetch-and-send-data handle core component and data patterns.
• use-js-interop and support-prerendering address advanced runtime scenarios.
• plan-ui-change and coordinate-components provide architectural planning guidance.
• create-blazor-project, configure-auth, and collect-user-input cover project setup, security, and forms.

Frequently Asked Questions

How do I select the appropriate dotnet-blazor skill for my task?

Consult the primary focus of each skill: use author-component for standard component development, use-js-interop when calling JavaScript APIs, fetch-and-send-data for API integration, and support-prerendering when dealing with static-to-interactive transitions. Each skill file contains specific "When to Use" guidance that matches common development scenarios.

Where are the skill definitions located in the repository?

All skill definitions reside under plugins/dotnet-blazor/skills/ in the dotnet/skills repository, with each skill containing its own directory and SKILL.md file. The plugin entry point is defined in plugins/dotnet-blazor/plugin.json, which declares the available capabilities and their paths.

Does the dotnet-blazor plugin support both Blazor Server and WebAssembly?

Yes. The create-blazor-project skill provides scaffolding guidance for Server, WebAssembly, and Auto render modes. Skills such as support-prerendering and fetch-and-send-data include patterns specific to each hosting model, ensuring correct behavior regardless of the chosen render mode.

How do I persist component state across prerendering?

Apply the [PersistentState] attribute to properties that must survive the initial static render, as demonstrated in the support-prerendering skill. This ensures data fetched during the prerendering phase remains available after the component becomes interactive, preventing double data fetching and maintaining UI consistency.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}