CtrlK
BlogDocsLog inGet started
Tessl Logo

add-full-slice

Build a capability end-to-end — backend vertical slice (Contracts→handler→validator→endpoint) AND the React page wired to it. Use when delivering a user-facing feature across API + UI. Composes add-feature + add-react-page.

72

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Add Full Slice (backend → frontend)

The kit's accelerator: deliver a feature from database to UI in one pass. This skill composes add-feature (backend) and add-react-page (frontend) — follow each for the detailed code; this file is the order of operations and the contract that keeps the two halves in sync.

Order of operations

  1. Backend slice — add-feature (and add-entity first if a new entity is needed):
    • Command/Query + response DTO in Modules.{X}.Contracts/v1/{Area}/ (+ Contracts/Dtos/).
    • Handler (public sealed, injects {X}DbContext), Validator, Endpoint (internal static Map…Endpoint, .RequirePermission(...)).
    • Wire in {X}Module.MapEndpoints. Build + test backend green.
  2. Lock the contract — note the final route path, HTTP method, request shape, and response DTO field names/casing. The React side must match these exactly.
  3. Frontend page — add-react-page in the chosen app:
    • API module calls the same path; hand-write TS types mirroring the response DTO (the API serializes C# records as camelCase JSON — TS fields are camelCase even though admin query params are PascalCase).
    • Page (useQuery/useMutation), route (RouteGuard for admin / withSuspense for dashboard).
  4. Permission — if the endpoint is gated, mirror the constant into admin's lib/permissions.ts and gate the route (add-permission). Dashboard relies on the server 403.
  5. Tests both sides — backend handler/validator test (xUnit/Shouldly/NSubstitute) + frontend Playwright spec (route-mocked).

The contract (the thing that breaks if you're sloppy)

BackendFrontend must match
Endpoint route api/v{n}/{module}/{resources}apiFetch path
Request: the Command/Query record fieldsrequest body / query-param keys (admin params PascalCase; body JSON camelCase)
Response: the DTO record (camelCase JSON)the hand-written TS type
.RequirePermission({X}Permissions...)(admin) RouteGuard perms + the mirrored constant
Paginated → PagedResponse<T>PagedResponse<T> (admin: @/lib/api-types; dashboard: inline)

Verify end-to-end

dotnet build src/FSH.Starter.slnx && dotnet test src/Tests/{X}.Tests
cd clients/{app} && npm run lint && npm run test:e2e
# optional manual check: dotnet run --project src/Host/FSH.Starter.AppHost  (brings up API + both apps)

Checklist

  • Backend slice complete + green (add-feature)
  • Contract locked: route, request shape, response DTO field names
  • Frontend api module path + TS types match the contract (body JSON camelCase)
  • Page + route added (add-react-page); admin permission mirrored + gated (add-permission)
  • Backend test + Playwright test added; both suites green
Repository
fullstackhero/dotnet-starter-kit
Path

.agents/skills/add-full-slice/SKILL.md

Commit

0bd98e3

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill