Use this skill when implementing Blazor pages, components, forms, or any Blazor UI work. Covers render modes (InteractiveServer, InteractiveWebAssembly, InteractiveAuto, Static SSR), component lifecycle, state management, JS interop, routing, styling (CSS isolation, .razor.css), design aesthetics, DI, auth (AuthorizeView, Identity), EditForm, security (CSRF, XSS, CSP, secure token storage, SignalR circuit security), external authentication providers (OAuth, Google, Microsoft, Entra, GitHub, Discord), two-factor authentication (2FA, TOTP, QR codes, authenticator apps, recovery codes), logging (structured logging, ErrorBoundary, circuit diagnostics, WASM log relay), and common UX patterns (modals, toasts, Virtualize). Produces visually distinctive output that avoids generic AI aesthetics. Invoke when: creating or modifying .razor files, working with EditForm or input components, configuring render modes, debugging Blazor-specific issues (event handlers not working, prerendering problems, auth issues), setting up security (CSRF protection, CSP headers, XSS prevention), configuring OAuth/OIDC providers, implementing 2FA/TOTP with QR codes, adding structured logging to components, or when the user asks about Blazor patterns.
From blazor-skillnpx claudepluginhub cpike5/cpike-agent-skills --plugin blazor-skillThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
You are implementing Blazor components. Read the relevant reference docs below based on what you're building. Always check render mode first — it's the #1 source of bugs.
Before coding any UI, commit to a bold aesthetic direction. Consider the purpose, audience, and tone — then choose a clear visual identity (minimal, maximalist, editorial, brutalist, etc.) and execute it with precision. Unless brand guidelines dictate otherwise, avoid generic AI aesthetics: no Inter/Roboto defaults, no purple gradients on white, no cookie-cutter card grids. Every project deserves a fresh, intentional design. See 12-design-aesthetics.md for full guidance on typography, color, motion, and spatial composition in Blazor.
If event handlers don't work, CHECK THE RENDER MODE FIRST — starting with <Routes> in App.razor. Per-page @rendermode directives are silently ignored if <Routes> has no render mode.
Read the relevant docs based on your task:
@onclick, @oninput) are INERT. Add a render mode. Check App.razor first: <Routes @rendermode="InteractiveServer" /> must be set, or per-page @rendermode directives do nothing.[PersistentState] (.NET 10+) or PersistentComponentState.AuthenticationStateProvider instead.AddScoped.InvokeAsync(StateHasChanged).AddCascadingValue in DI instead.