blazor-expert

Provide expert guidance on Blazor components, state management, routing, and JS interop.

22|2|Updated Nov 22, 2025

Search Tags:#authentication #forms #server #webassembly #blazor #js interop

Ready to run

npx skills add https://github.com/markpitt/claude-skills --skill blazor-expert

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: blazor-expert
Source: https://github.com/markpitt/claude-skills/tree/main/skills/blazor-expert
Command: npx skills add https://github.com/markpitt/claude-skills --skill blazor-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill delivers expert guidance for Blazor development across Server, WebAssembly, and Hybrid hosting models, including state management, routing, JS interop, and advanced forms.

Core Features & Use Cases

Component lifecycles, state management, and routing
JS interop, forms, authentication, and authorization patterns
Performance optimization and advanced patterns
Troubleshooting and architecture guidance

Quick Start

Start with components-lifecycle and routing/navigation resources, then explore performance and auth guidance to build robust Blazor apps.

Frequently Asked Questions about blazor-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build and structure components in Blazor?▼

Blazor components are reusable UI units with lifecycle methods (@OnInitializedAsync, OnParametersSet), parameter binding via [Parameter], and EventCallback for parent-child communication. Organize components hierarchically, pass data down as parameters, and communicate state changes back through callbacks to maintain unidirectional data flow.

How do I handle authentication and authorization in Blazor applications?▼

Blazor supports authentication workflows using AuthenticationStateProvider to access current user claims and CascadingAuthenticationState to pass auth context to components. Implement authorization checks with [Authorize] attributes, role-based access control, and policy-based authorization to protect routes and component content.

What's the best way to call JavaScript from Blazor?▼

JavaScript interop in Blazor uses IJSRuntime to invoke JS functions from C# code. For scalability and isolation, organize JS in ES modules and import them dynamically to avoid global namespace pollution. Handle async operations with Task-returning methods and proper error handling for robust interop.

How do I implement form validation in Blazor?▼

EditForm component with DataAnnotations validation attributes ([Required], [StringLength], etc.) provides client-side validation feedback. Bind form fields to a model object, handle OnValidSubmit callback for validated submissions, and display validation messages using ValidationMessage components tied to model properties.

How does routing work in Blazor Server versus WebAssembly?▼

Blazor routing uses @page directives to map URL patterns to components, supporting route parameters and constraints. Both Server and WebAssembly use the same routing syntax, but Server handles navigation server-side while WebAssembly performs client-side routing without page reloads, affecting performance and state persistence differently.

How can I optimize Blazor application performance?▼

Optimize Blazor by implementing virtualization for large lists, controlling re-renders with ShouldRender override, lazy-loading components, minimizing interop calls, and applying code splitting in WebAssembly builds. Server apps benefit from circuit optimization; WebAssembly apps gain from ahead-of-time compilation and reduced initial download size.