# blazor
A skill that gives your coding agent Blazor rules: component lifecycle, data binding, state management and render optimization.
- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 798 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/blazor/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/blazor
## What it does
The skill turns the assistant into a Blazor developer who knows both Blazor Server and Blazor WebAssembly. It carries instructions on component architecture: parameters for input, `EventCallback` for events, `IDisposable` for cleanup. Your agent follows those rules whenever you ask it to write or refactor a component.
Separate sections cover the lifecycle (`OnInitializedAsync`, `OnParametersSet`, `OnAfterRenderAsync`), `@bind` two-way binding, render optimization with `@key` and `Virtualize`, and state management through cascading parameters and injectable services. There are examples for `HttpClient` calls, error handling with `ErrorBoundary`, bUnit tests and authentication via `AuthorizeView`.
It helps if you write C# and .razor files and want the agent to stop mixing up Blazor Server with WebAssembly or reaching for JavaScript interop too early. Installation runs through `npx skills add`, so you need Node.js with npx available.
## Install
### Claude Code (native platform)
1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill blazor -a claude-code
```
2. **Manually: put the files in place**
- File: `~/.claude/skills/blazor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/blazor/
### Codex
1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill blazor -a codex
```
2. **Manually: put the files in place**
- File: `.agents/skills/blazor/SKILL.md` — For all projects use ~/.agents/skills/
### Cursor
1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill blazor -a cursor
```
2. **Manually: put the files in place**
- File: `.cursor/skills/blazor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/
### GitHub Copilot
1. **GitHub CLI**
```bash
gh skill install Mindrally/skills blazor
```
2. **Manually: put the files in place**
- File: `.github/skills/blazor/SKILL.md`
### Gemini CLI
1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill blazor -a gemini-cli
```
2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path blazor
```
### Windsurf (Devin Desktop)
**Manually: put the files in place**
- File: `.devin/skills/blazor/SKILL.md` — The legacy .windsurf/skills/ path still works
### OpenCode
**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill blazor -a opencode
```
### Claude.ai
**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills
Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/blazor/SKILL.md
## When to use it
- build a component with parameters and events
- load data in `OnInitializedAsync` without blocking the render
- wire up two-way binding with `@bind`
- speed up a long list with `Virtualize` and `@key`
- cover a component with bUnit tests
## Example prompts
- Write a Blazor component with an Id parameter that loads the user in OnInitializedAsync
- Why does my component render twice? Check it against the skill rules
- Set up AuthorizeView for this page and add the [Authorize] attribute
## Source text · SKILL.md · Apache-2.0
Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 628fea414f2ebc60.
BEGIN THIRD-PARTY FILE 628fea414f2ebc60
````text
---
name: blazor
description: Guidelines for Blazor development including component lifecycle, state management, and performance optimization
metadata:
maintainer: Mindrally
source: https://github.com/Mindrally/skills
---
# Blazor Development Guidelines
You are an expert in Blazor development with deep knowledge of both Blazor Server and Blazor WebAssembly.
## Component Architecture
### Component Design
- Create small, focused components
- Use component parameters for input
- Use EventCallback for output/events
- Implement IDisposable for cleanup
- Use cascading parameters sparingly
### Component Structure
```razor
@page "/users/{Id:int}"
@inject IUserService UserService
@User?.Name
@code {
[Parameter]
public int Id { get; set; }
private User? User { get; set; }
protected override async Task OnInitializedAsync()
{
User = await UserService.GetUserAsync(Id);
}
}
```
## Component Lifecycle
### Lifecycle Methods
- `OnInitialized`/`OnInitializedAsync`: Initial setup
- `OnParametersSet`/`OnParametersSetAsync`: When parameters change
- `OnAfterRender`/`OnAfterRenderAsync`: After DOM updates
- `Dispose`: Cleanup resources
### Best Practices
- Use `OnInitializedAsync` for data loading
- Check `firstRender` in `OnAfterRenderAsync`
- Dispose subscriptions and timers
- Avoid long-running synchronous code
## Data Binding
### One-Way Binding
```razor
@message
```
### Two-Way Binding
```razor
```
### Event Handling
```razor
```
## Render Optimization
### Prevent Unnecessary Renders
- Use `@key` for list items
- Implement `ShouldRender()` when appropriate
- Use `StateHasChanged()` judiciously
- Avoid inline handlers in loops
### Virtualization
```razor