|
| 1 | +--- |
| 2 | +description: "Skill: Generate high-quality .NET 10 (C# 13) Blazor Server code for the Melodee solution." |
| 3 | +name: "Blazor Server (.NET 10) developer skill" |
| 4 | +applyTo: "**/*.razor, **/*.razor.cs, **/*.cs" |
| 5 | +--- |
| 6 | + |
| 7 | +# Blazor Server (.NET 10) developer skill |
| 8 | + |
| 9 | +Use this skill when generating or modifying UI and UI-adjacent code for Melodee. |
| 10 | + |
| 11 | +## Mission |
| 12 | + |
| 13 | +Create maintainable, secure, and performant Blazor Server features that follow Melodee’s architecture and conventions. |
| 14 | + |
| 15 | +## Non-negotiables (Melodee-specific) |
| 16 | + |
| 17 | +1. **Blazor components MUST NOT call internal backend HTTP APIs.** |
| 18 | + - Inject and use service classes directly. |
| 19 | + - `HttpClient` is only for third-party services (MusicBrainz, Spotify, etc.). |
| 20 | + |
| 21 | +2. **Prefer existing services and patterns.** |
| 22 | + - If functionality doesn’t exist, add a service in the appropriate layer following existing conventions. |
| 23 | + |
| 24 | +3. **Security-first by default.** |
| 25 | + - Validate all user input. |
| 26 | + - Don’t log secrets or sensitive user data. |
| 27 | + - Don’t introduce SSRF by blindly fetching user-provided URLs. |
| 28 | + |
| 29 | +4. **Keep components thin.** |
| 30 | + - UI state + rendering in the component. |
| 31 | + - Business logic in services. |
| 32 | + |
| 33 | +## Contract (what “good output” looks like) |
| 34 | + |
| 35 | +- **Components**: readable markup, minimal logic, clear state transitions, async-safe. |
| 36 | +- **Services**: DI-friendly, cancellation-token aware, testable, side-effect boundaries clear. |
| 37 | +- **Data access**: no N+1 patterns; use efficient EF Core queries; paginate large results. |
| 38 | +- **Error handling**: predictable, user-friendly messages; logs contain actionable context. |
| 39 | +- **Tests**: at least one happy-path + one edge-case test for non-trivial behavior changes. |
| 40 | + |
| 41 | +## Implementation guidelines |
| 42 | + |
| 43 | +### 1) Component structure |
| 44 | + |
| 45 | +- Prefer `.razor` + `.razor.cs` code-behind when logic grows. |
| 46 | +- Use lifecycle methods intentionally: |
| 47 | + - `OnInitializedAsync` for initial load. |
| 48 | + - `OnParametersSetAsync` when parameters drive loading. |
| 49 | +- Use `CancellationToken` to cancel in-flight work on dispose. |
| 50 | + |
| 51 | +### 2) Dependency injection |
| 52 | + |
| 53 | +- Prefer constructor injection for `.razor.cs` code-behind. |
| 54 | +- Prefer `@inject` only when a component is markup-only or very small. |
| 55 | + |
| 56 | +### 3) Async and rendering |
| 57 | + |
| 58 | +- Use `async/await` end-to-end. |
| 59 | +- Avoid `Task.Run` in Blazor UI code. |
| 60 | +- Avoid excessive `StateHasChanged()`; rely on event-driven renders. |
| 61 | + |
| 62 | +### 4) Forms and validation |
| 63 | + |
| 64 | +- Use `EditForm` + `DataAnnotationsValidator` or FluentValidation (if already used in the solution). |
| 65 | +- Validate at boundaries (input model validation before calling services). |
| 66 | +- Prefer explicit user feedback over silent failures. |
| 67 | + |
| 68 | +### 5) Authorization |
| 69 | + |
| 70 | +- Use `AuthorizeView` for conditional UI. |
| 71 | +- On operations, enforce authorization in the service/controller layer as well. |
| 72 | + - UI checks are not security. |
| 73 | + |
| 74 | +### 6) Logging and errors |
| 75 | + |
| 76 | +- Log with structured logging and include: |
| 77 | + - operation name |
| 78 | + - relevant IDs (artistId, albumId, etc.) |
| 79 | + - elapsed time when helpful |
| 80 | +- Don’t log credentials/tokens/PII. |
| 81 | + |
| 82 | +### 7) Performance |
| 83 | + |
| 84 | +- Avoid repeated service calls during renders. |
| 85 | +- Cache or memoize expensive calls when the data is stable. |
| 86 | +- Use virtualization for long lists when applicable. |
| 87 | + |
| 88 | +## “Do / Don’t” examples |
| 89 | + |
| 90 | +### Don’t: call internal HTTP APIs from Blazor Server components |
| 91 | + |
| 92 | +```razor |
| 93 | +@* WRONG *@ |
| 94 | +@inject IHttpClientFactory HttpClientFactory |
| 95 | +
|
| 96 | +@code { |
| 97 | + private async Task LoadAsync() |
| 98 | + { |
| 99 | + var client = HttpClientFactory.CreateClient("MelodeeApi"); |
| 100 | + var artist = await client.GetFromJsonAsync<ArtistDto>("/api/v1/artists/1"); |
| 101 | + } |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +### Do: inject and use services directly |
| 106 | + |
| 107 | +```razor |
| 108 | +@* CORRECT *@ |
| 109 | +@inject ArtistService ArtistService |
| 110 | +
|
| 111 | +@code { |
| 112 | + private Artist? artist; |
| 113 | +
|
| 114 | + protected override async Task OnInitializedAsync() |
| 115 | + { |
| 116 | + artist = await ArtistService.GetByIdAsync(1, CancellationToken.None); |
| 117 | + } |
| 118 | +} |
| 119 | +``` |
| 120 | + |
| 121 | +## When to escalate to another persona |
| 122 | + |
| 123 | +- **Security-sensitive changes** (auth, tokens, external URLs, file paths): use the security reviewer. |
| 124 | +- **Performance regressions suspected** (slow queries, rendering): use a performance mindset and profiling. |
| 125 | +- **Ambiguous requirements**: write tests first (TDD red/green/refactor). |
0 commit comments