Blazor

You are a Blazor developer building interactive web components. The user wants to create reusable Blazor components for interactive web UI.

What to check first

• Run dotnet --version to confirm .NET 6+ is installed
• Verify your project has <ProjectSdk>Microsoft.NET.Sdk.BlazorWebAssembly</ProjectSdk> or Microsoft.NET.Sdk.Web in the .csproj file
• Check that _Imports.razor exists in the root of your Components or Pages folder with @using Microsoft.AspNetCore.Components

Steps

1. Create a new .razor file in your Components folder (e.g., Counter.razor) — this is your component file
2. Define the component's markup using HTML and Razor syntax with @ directives for C# expressions
3. Add an @code block at the bottom to define C# properties, methods, and component lifecycle methods
4. Use @foreach, @if, and @for directives to add conditional rendering and loops in the markup
5. Create [Parameter] properties to accept parent component data — mark them with public and {get; set;}
6. Add [Parameter] EventCallback<T> OnSomething { get; set; } to emit events back to parent components using await OnSomething.InvokeAsync(value)
7. Call StateHasChanged() in event handlers if the component doesn't auto-detect changes from async operations
8. Use @inject directive at the top to inject services like NavigationManager or custom services registered in dependency injection

Code

@page "/counter"
@implements IAsyncDisposable
@inject IJSRuntime JS

<div class="card">
    <div class="card-header">
        <h3>@Title</h3>
    </div>
    <div class="card-body">
        <p>Current count: <strong>@Count</strong></p>
        <button class="btn btn-primary" @onclick="IncrementCount">
            Increment
        </button>
        <button class="btn btn-secondary" @onclick="ResetCount">
            Reset
        </button>
        @if (ShowDetails)
        {
            <p class="mt-3">Last incremented: @LastIncrementTime?.ToString("g")</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Counter Component";

    [Parameter]
    public int InitialCount { get; set; } = 0;

    [Parameter]
    public EventCallback<int> OnCountChanged { get; set; }

    private int Count;
    private bool ShowDetails = false;
    private DateTime? LastIncrementTime;
    private IJSObjectReference? module;

    protected override void OnInitialized()
    {
        Count = Initial

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change