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

> Explore the dotnet blazor plugin's nine skills for Blazor development, including component authoring, JS interop, data fetching, and more. Master Blazor effectively.

- Repository: [.NET Platform/skills](https://github.com/dotnet/skills)
- Tags: tutorial
- Published: 2026-07-06

---

**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`](https://github.com/dotnet/skills/blob/main/SKILL.md) file with implementation guidance.

**author-component** ([`author-component/SKILL.md`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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:

```razor
@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:

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

```razor
@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:

```razor
@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:

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

```

## Plugin Configuration and File Structure

The dotnet-blazor plugin is declared in [`plugins/dotnet-blazor/plugin.json`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/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`](https://github.com/dotnet/skills/blob/main/SKILL.md) file. The plugin entry point is defined in [`plugins/dotnet-blazor/plugin.json`](https://github.com/dotnet/skills/blob/main/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.