klod68/blazor-standards
.claude/skills/blazor-standards/SKILL.md
Use when working with Blazor Server or WebAssembly components, Razor markup, SignalR, render modes, or interactive server patterns. Provides domain-specific rules layered on top of base architectural standards.
$ install --global
skillsauthnpx skillsauth add klod68/littlerae blazor-standardsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 9:00 PM1.9s1 file scanned
SKILL.md
name: blazor-standards description: "Use when working with Blazor Server or WebAssembly components, Razor markup, SignalR, render modes, or interactive server patterns. Provides domain-specific rules layered on top of base architectural standards."
Skill: Blazor Component & Architecture Standards
Identity
| Field | Value |
|---|---|
| Name | Blazor Component & Architecture Standards |
| Domain | UI, Web Components, Blazor |
| Level | Feature |
| Tags | blazor, razor, signalr, components, wasm |
When to Apply
Activate this skill when the task involves:
- Blazor component design, parameters, or event callbacks
- Razor markup (
.razor) or code-behind (.razor.cs) files - State management in Blazor applications
- Data loading lifecycle (
OnInitializedAsync,OnAfterRenderAsync) - Blazor routing, navigation, or render modes
- SignalR integration within Blazor
Rules
These rules layer on top of base architectural standards. On conflict, these win.
<!-- SHARED:rules/blazor.md -->Blazor — Component & Architecture Standards
Apply these rules in addition to _base.md for Blazor Server and Blazor WebAssembly projects.
Project Setup (.NET 8 / .NET 9)
- Use
Microsoft.NET.Sdk.Webin the.csproj. App.razoris the HTML entry point:<!DOCTYPE html>,<head>with<HeadOutlet />,<body>with<Routes />, and<script src="_framework/blazor.server.js" />(Server) orblazor.webassembly.js(WASM).Routes.razorcontains the<Router>component withAppAssembly="typeof(App).Assembly"and aDefaultLayout.- Register interactive rendering in
Program.cs:builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); // or .AddInteractiveWebAssemblyComponents() app.MapRazorComponents<App>() .AddInteractiveServerRenderMode(); // or .AddInteractiveWebAssemblyRenderMode() _Imports.razormust include@using static Microsoft.AspNetCore.Components.Web.RenderModeto allow@rendermode InteractiveServerwithout qualification.- Pages that need interactivity declare
@rendermode InteractiveServer(orInteractiveAuto) at the top — static SSR is the default if omitted. - Always add the new project to the
.sln/.slnxfile — this is the most commonly forgotten step when scaffolding.
Component Design
- Components follow the same SRP rule as classes — one responsibility per component.
- Components are split into
.razor(markup) and.razor.cs(code-behind partial class) files. - Component names are PascalCase nouns or noun phrases:
UserCard,OrderSummary, notShowUser. - No business logic inside
.razorfiles — markup and binding only. - All logic lives in the
.razor.cspartial class, which delegates to injected services.
State Management
- Component state is local
privatefields — neverpublicunless bound via[Parameter]. - Shared state lives in a scoped state service (
MyFeatureState) registered in DI — never in a static class. - State mutations are always done through methods — never direct field mutation from event handlers.
StateHasChanged()is called only when the runtime cannot detect the change automatically (e.g., async callbacks, timer events).
Parameters & EventCallbacks
[Parameter]properties areinit-only or have private setters — never publicly mutable from outside.- Use
EventCallback<T>for child-to-parent communication — never expose parent references to child components. - Cascading parameters are used only for truly cross-cutting values (theme, auth state) — never as a shortcut for prop drilling.
Data Loading
- Data loading is done in
OnInitializedAsync— never inOnParametersSetAsyncunless the data depends on a changed parameter. - Always check
firstRenderinOnAfterRenderAsyncto avoid redundant calls. - Display a loading state while async operations are in progress — never render partial data.
- Use
CancellationTokenfromComponent.CancellationToken(Blazor 8+) or manage it manually viaIDisposable.
Services & DI
- Services injected into components are always interface types — never concrete implementations.
- HTTP calls are never made directly from components — use a typed
IMyFeatureApiClientservice. IDisposable/IAsyncDisposablemust be implemented when the component subscribes to events or holds resources.
Routing
- Page components declare
@pageroutes; layout components never declare routes. - Route parameters are always validated — never assume they are non-null or in-range.
- Navigation is done via
NavigationManager.NavigateTo— never by manipulating the URL string directly.
Styling & CSS
- Default CSS framework: Bootstrap 5 unless the project declares an alternative (MudBlazor, Fluent UI Blazor, Tailwind CSS) with documented technical justification.
- Default icon set: Bootstrap Icons — consistent with Bootstrap aesthetic, 2,000+ icons.
- Deliver Bootstrap via CDN (default) or LibMan (offline environments) — never mix both delivery methods.
- Load order in
App.razor: Bootstrap CSS → Bootstrap Icons →app.css(project overrides) → Bootstrap JS Bundle → Blazor script. - Global styles live in
wwwroot/css/app.css— never inlinestyle=""attributes. - Component-scoped styles use Blazor CSS isolation (
.razor.css) for component-specific layout and spacing. - Override Bootstrap theme via CSS custom properties (
--bs-*) in:root— never edit Bootstrap source files. - App-specific custom properties use the
--app-*prefix to avoid collisions with Bootstrap variables. - Dark/light theming uses Bootstrap's
[data-bs-theme]attribute — never a separate dark-mode CSS file. - Never use
!importantto override Bootstrap — fix specificity via correct selector order or custom properties. - Never mix two CSS frameworks in the same project — specificity conflicts and doubled payload.
Common Anti-Patterns
| Anti-Pattern | Fix |
|---|---|
| Business logic in .razor markup | Move to .razor.cs partial class |
| public mutable [Parameter] property | Use private set or init |
| Direct HTTP calls inside component | Inject typed API client service |
| StateHasChanged() called on every action | Let Blazor detect changes automatically |
| Static shared state class | Use scoped DI state service |
| Missing IDisposable on event subscriptions | Always unsubscribe in Dispose() |
| OnParametersSetAsync loading data unconditionally | Guard with a changed-parameter check |
| All logic in @code {} block instead of code-behind | Split into .razor (markup) + .razor.cs (logic) |
| Missing @using static RenderMode in _Imports.razor | Add @using static Microsoft.AspNetCore.Components.Web.RenderMode |
| New project not added to solution file | Always add to .sln/.slnx when scaffolding |
| Service call inside @foreach loop in markup | Pre-fetch data in code-behind; pass as parameter to child components |
| No CSS framework declared — ad-hoc styles | Default to Bootstrap 5; declare alternative in design artifact |
| Inline style="" attributes on components | Use CSS isolation (.razor.css) or global app.css |
| Mixing two CSS frameworks | Pick one framework and commit — never Bootstrap + Tailwind etc. |
| Hardcoded colors in component styles | Use CSS custom properties (--bs-* or --app-*) |
| !important to override Bootstrap | Fix specificity order; use custom properties |
| Editing Bootstrap source CSS | Override in app.css loaded after Bootstrap |
See Also
web-ui-stylingskill — CSS framework decision matrix, Bootstrap setup, theming, CSS isolationsignalr.md— SignalR hub design, groups, streaming, authorizationauth.md— Authentication, authorization, OAuth/OIDC, secrets managementnaming.md— Naming conventions for types, methods, properties, namespacesmaui.md— .NET MAUI MVVM, navigation, lifecycle, platform services
Related Skills
klod68/interceptor-pipeline
tools
VerifiedTrustedCommunity
Use when cross-cutting concerns (logging, metrics, validation, authorization) are tangled into command handlers or service methods, when building database command pipelines with reorderable concerns, or when HTTP client pipelines or message handlers need composable, independently-replaceable processing stages. Covers ICommandInterceptor interface, InterceptorPipeline with reverse-chain construction, zero-cost Empty sentinel to skip overhead when no interceptors are registered, and ConfigureAwait(false) discipline for library code. Domain: Architecture, Cross-Cutting Concerns. Level: Intermediate. Tags: interceptor, pipeline, middleware, decorator, cross-cutting-concerns.
1SKILL.mdUpdated Apr 17, 2026
klod68/integration-testing-webapplicationfactory
development
VerifiedTrustedCommunity
Use when writing integration tests for Razor Pages, MVC, or Minimal API applications to validate routing, middleware, page rendering, and HTTP behavior without a browser or live server, or when adding fast smoke tests to a CI pipeline. Covers WebApplicationFactory<Program> setup with public partial class Program, in-memory test server, AngleSharp HTML parsing, CSS selector assertions, redirect and status code testing, and a shared static fixture pattern for minimal per-test startup overhead. Domain: Testing, ASP.NET Core. Level: Intermediate. Tags: integration-testing, webapplicationfactory, razor-pages, anglesharp, http-testing.
1SKILL.mdUpdated Apr 17, 2026
klod68/index-design-strategy
development
VerifiedTrustedCommunity
Use when designing indexes for new tables, diagnosing slow queries that are not using indexes efficiently, reviewing index fragmentation and maintenance, or when the current indexing strategy results in key lookups, table scans, or missing index warnings. Covers clustered index key selection (narrow, unique, ever-increasing), non-clustered index design for query patterns, covering indexes with INCLUDE columns, filtered indexes for subset queries, composite index column ordering, DMV-based monitoring for missing and unused indexes, and rebuild vs reorganize maintenance thresholds. Domain: Database, Performance. Level: Intermediate. Tags: index, sql-server, covering-index, filtered-index, performance, dmv, maintenance.
1SKILL.mdUpdated Apr 17, 2026
klod68/in-memory-search-registry
development
VerifiedTrustedCommunity
Use when building a searchable in-memory catalog or registry for documentation sites, admin panels, or type/API browsers where you need keyword matching, fuzzy search, and ranked results without an external search engine or database. Covers RegistryService with weighted scoring across name, description, keywords, and method names; Levenshtein fuzzy matching; synonym expansion; category and subcategory filtering; and singleton DI registration for datasets of hundreds to low thousands of items. Domain: Search, Data Access Patterns. Level: Intermediate. Tags: search, registry, fuzzy-matching, in-memory, catalog, filtering.
1SKILL.mdUpdated Apr 17, 2026