skills.rest
mkerchenski
mkerchenskiCOMMUNITY
Explore all skills by this author →
GitHub

dotnet-blazor

Guide Blazor component design, state management, render modes, and JS interop for .NET web apps.

1|Updated Mar 25, 2026
Search Tags:#state management#performance optimization#blazor#js interop#prerendering#render modes
One-click install
npx skills add https://github.com/mkerchenski/hurrah-tv --skill dotnet-blazor-mkerchenski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dotnet-blazor
Source: https://github.com/mkerchenski/hurrah-tv/tree/main/.claude/skills/dotnet-blazor
Command: npx skills add https://github.com/mkerchenski/hurrah-tv --skill dotnet-blazor-mkerchenski

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Blazor developers need reliable guidance to build interactive C# UI that behaves correctly across Server, WebAssembly, and Auto render modes without state, hydration, or hosting surprises.

Core Features & Use Cases

  • Render-mode selection and architecture: Pick the right render mode (Static, InteractiveServer, InteractiveWebAssembly, InteractiveAuto) and structure components to match where code runs.
  • State flow that survives prerender and hydration: Use component state, DI services, and .NET 8+ persistence patterns (PersistentState) to avoid double-fetch and inconsistent UI.
  • Performance and reliability patterns: Apply Virtualize, @key, JS interop best practices, and ErrorBoundary to keep large UIs responsive and resilient.
  • Use case: Build a production-grade media or dashboard front end where initial prerender must be SEO-friendly, then seamlessly hydrates into an interactive experience with correct data loading and efficient list rendering.

Quick Start

Ask the AI to help you design your Blazor component hierarchy and data-loading approach for your required render mode, including state persistence and JS interop considerations, and validate the plan against common anti-patterns.

Frequently Asked Questions about dotnet-blazor

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

FAQPage Schema
How do I choose the right Blazor render mode for my .NET web app?▼

Blazor render mode selection depends on where your components must run. Choose Static for SEO, InteractiveServer for real-time, InteractiveWebAssembly for client-side, or InteractiveAuto to transition from server to client execution.

Why does my Blazor component double-fetch data during prerendering and hydration?▼

Double-fetching during Blazor prerendering and hydration happens when state is not persisted between server render and client activation. Use .NET 8+ PersistentState and DI services to flow component state and avoid duplicate data loading.

What is the best way to render large lists in Blazor without hurting performance?▼

The best way to render large Blazor lists without hurting performance is using the Virtualize component for lazy loading and @key to guarantee element identity during diffs, keeping interactive UIs responsive.

How does JS interop work across different Blazor execution modes?▼

JS interop in Blazor allows calling JavaScript from C# and vice versa, but requires safe practices across Server, WebAssembly, and Auto modes. Guard interop calls during prerendering and hydration to prevent execution errors before the environment is fully interactive.

Can I build an SEO-friendly dashboard in Blazor that hydrates into an interactive experience?▼

You can build an SEO-friendly Blazor dashboard by prerendering components on the server for search engines, then hydrating them into an interactive experience using correct state persistence and render modes for seamless data loading.

When should I use ErrorBoundary in my Blazor component hierarchy?▼

Use ErrorBoundary in your Blazor component hierarchy to isolate rendering failures and keep large UIs resilient. Wrap interactive sections to catch exceptions gracefully without crashing the entire application during component execution.

Related Skills

Explore More Software Engineering Skills→
fanguyunfanguyun

csharp-developer

Guide .NET 8+ application development with C# 12 features and CQRS.

Community
Advanced
managedcodemanagedcode
466

dotnet-blazor

Develops and reviews Blazor apps across server, WebAssembly, web app, hybrid scenarios.

Official
Intermediate
wshaddixwshaddix
71

dotnet-blazor-testing

Test Blazor components with bUnit, xUnit, and JavaScript interop mocking.

Community
Intermediate
Postpartum-genushyacinthus29Postpartum-genushyacinthus29
8

dotnet-blazor

Provide Blazor architecture patterns, render-mode guidance, and anti-patterns for .NET 6+ projects.

Community
Advanced