skills.rest
fullstackhero
fullstackheroOFFICIAL
Explore all skills by this author →
Website𝕏@iammukeshmGitHub

add-full-slice

Build a backend vertical slice and matching React page in a .NET starter kit.

6.7k|2.0k|Updated Aug 20, 2021
Search Tags:#permissions#playwright#cqrs#contract-first#vertical slice#api endpoint#react page
One-click install
npx skills add https://github.com/fullstackhero/dotnet-starter-kit --skill add-full-slice
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-full-slice
Source: https://github.com/fullstackhero/dotnet-starter-kit/tree/main/.agents/skills/add-full-slice
Command: npx skills add https://github.com/fullstackhero/dotnet-starter-kit --skill add-full-slice

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, error-prone feature delivery by keeping the backend contract and the frontend page aligned while building a user-facing capability end-to-end.

Core Features & Use Cases

  • End-to-end vertical slice delivery: Builds the backend vertical slice (contracts → validator → handler → endpoint) and wires the matching React page.
  • Contract synchronization: Forces the route, HTTP method, request/response shapes, and JSON casing (camelCase) to match exactly between API and UI.
  • Permission-ready user flows: Mirrors gated permissions to the admin UI and ensures the correct behavior across both apps.
  • Tested across boundaries: Adds both backend (xUnit) and frontend (Playwright) verification to reduce regressions.

Quick Start

Use the add-full-slice skill to create a complete feature by first specifying the module name, the target app (admin or dashboard), and the feature name in one invocation.

Frequently Asked Questions about add-full-slice

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

FAQPage Schema
How do I build a full-stack vertical slice across .NET and React?▼

Building a full-stack vertical slice generates backend contracts, validators, handlers, and endpoints, then wires a matching React page to deliver a complete feature.

How do I keep my API contract and React page JSON casing synchronized?▼

Synchronizing API contract and UI casing enforces strict alignment of route, HTTP method, and JSON casing (camelCase) between backend endpoint and React frontend.

How do I add permission-gated routing to an admin UI and .NET endpoint?▼

Adding permission-gated routing mirrors access controls across the .NET backend and admin UI, ensuring secure behavior across both applications.

What's the best way to test API endpoints and React pages across boundaries?▼

Testing API endpoints and React pages across boundaries adds backend xUnit and frontend Playwright verification to prevent contract drift and regressions.

Can I use this approach for dashboard UI pages instead of admin panels?▼

Yes, this approach supports generating features for both admin and dashboard UI pages by specifying the target app during invocation to wire the correct React page.

What request casing conventions are required for admin vs standard API endpoints?▼

Admin endpoints require query parameters in PascalCase, while standard request bodies use camelCase, ensuring correct request shape validation for gated user flows.

Related Skills

Explore More Software Engineering Skills→
zdanovichnickzdanovichnick
4

vertical-slice

Structure .NET API features into slices with endpoints, DTOs, validators, and handlers.

Community
Intermediate
dianlightdianlight
8

test-remote-environment

Test SRAT against a live Home Assistant environment with Playwright.

Community
Advanced
vllm-projectvllm-project
5.1k

dashboard-platform-change

Orchestrate dashboard frontend and backend changes to align with router contracts.

Official
Intermediate
jhd3197jhd3197
666

new-feature

Scaffold full-stack ServerKit features with Flask and React components.

Community
Intermediate