# Blazor

> Blazor component patterns for interactive web UIs.

- **Type:** Skill
- **Install:** `agentstack add skill-ngxtm-devkit-blazor`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ngxtm](https://agentstack.voostack.com/s/ngxtm)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ngxtm](https://github.com/ngxtm)
- **Source:** https://github.com/ngxtm/devkit/tree/main/rules/dotnet/blazor

## Install

```sh
agentstack add skill-ngxtm-devkit-blazor
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Blazor

## **Priority: P1 (OPERATIONAL)**

Blazor component patterns for interactive web UIs.

## Implementation Guidelines

- **Components**: Keep components focused. Split large components into smaller ones.
- **Parameters**: Use `[Parameter]` for one-way, `EventCallback` for two-way binding.
- **Cascading Values**: Use for app-wide state (theme, user context).
- **State Management**: Component state for local, Fluxor/custom service for global.
- **Forms**: `EditForm` with `DataAnnotationsValidator` or FluentValidation.
- **JS Interop**: Use `IJSRuntime` sparingly. Prefer Blazor bindings.
- **Render Modes**: Choose based on requirements (Server, WASM, Auto in .NET 8+).
- **Streaming**: Use `[StreamRendering]` for long-loading components.

## Anti-Patterns

- **No direct DOM manipulation**: Use Blazor bindings and refs.
- **No `StateHasChanged()` in lifecycle**: Called automatically after lifecycle methods.
- **No heavy computation in render**: Move to `OnInitialized` or background task.
- **No sync JS interop in Server mode**: Causes UI blocking.

## Code

```razor
@* UserList.razor *@
@page "/users"
@attribute [StreamRendering]
@inject IUserService UserService

Users

Users

@if (_users is null)
{
    Loading...
}
else if (_users.Count == 0)
{
    No users found.
}
else
{
    
        @foreach (var user in _users)
        {
            
        }
    
}

@code {
    private List? _users;

    protected override async Task OnInitializedAsync()
    {
        _users = await UserService.GetAllAsync();
    }

    private async Task HandleDelete(int userId)
    {
        await UserService.DeleteAsync(userId);
        _users = await UserService.GetAllAsync();
    }
}
```

```razor
@* UserCard.razor - Reusable component *@

    @User.Name
    @User.Email
     OnDelete.InvokeAsync(User.Id)">Delete

@code {
    [Parameter, EditorRequired]
    public User User { get; set; } = default!;

    [Parameter]
    public EventCallback OnDelete { get; set; }
}
```

```razor
@* EditForm with validation *@

    
    

    
        Name
        
         _model.Name)" />
    

    
        Email
        
         _model.Email)" />
    

    
        @if (_isSubmitting)
        {
            
        }
        Submit
    

@code {
    private CreateUserModel _model = new();
    private bool _isSubmitting;

    private async Task HandleSubmit()
    {
        _isSubmitting = true;
        await UserService.CreateAsync(_model);
        _isSubmitting = false;
        NavigationManager.NavigateTo("/users");
    }
}
```

## Reference & Examples

For lifecycle, state management, and JS interop:
See [references/REFERENCE.md](references/REFERENCE.md).

## Related Topics

aspnet-core | razor-pages | security

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ngxtm](https://github.com/ngxtm)
- **Source:** [ngxtm/devkit](https://github.com/ngxtm/devkit)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ngxtm-devkit-blazor
- Seller: https://agentstack.voostack.com/s/ngxtm
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.