skills.rest
shakesoft
shakesoftCOMMUNITY
Explore all skills by this author →
GitHub

react-component-patterns

Generates React functional components for ASP.NET Zero using Ant Design, Metronic, and NSwag service proxies.

Updated May 22, 2026
Search Tags:#typescript#react#crud#ant design#nswag#aspnet-zero#metronic
One-click install
npx skills add https://github.com/shakesoft/timekeeper --skill react-component-patterns-shakesoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-patterns
Source: https://github.com/shakesoft/timekeeper/tree/main/.cursor/skills/react-component-patterns
Command: npx skills add https://github.com/shakesoft/timekeeper --skill react-component-patterns-shakesoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building CRUD pages in ASP.NET Zero's React frontend requires coordinating many conventions—NSwag service proxies, Ant Design tables, Metronic layout, permissions, and localization—and getting any of them wrong (like passing EntityDto objects to GET/DELETE endpoints) causes subtle bugs. ## Core Features & Use Cases - List Page Pattern: Complete table pages using useDataTable for paging, sorting, and loading with Ant Design Table inside Metronic card layout. - Create/Edit Modal Pattern: Standardized modal forms with Ant Design Form, validation rules, and NSwag proxy calls for create and update operations. - NSwag EntityDto Flattening Guidance: Documents the critical rule that GET/DELETE proxies take a raw id: number instead of an EntityDto object, preventing ?Id=[object Object] URL bugs. - Use Case: Scaffold a new admin page for a 'Products' entity with permission-gated action buttons, localized labels, lazy-loaded routing, and menu registration. ## Quick Start Ask the AI to create a new React admin list page with a create/edit modal for an entity in the ASP.NET Zero project following these component patterns.

Frequently Asked Questions about react-component-patterns

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

FAQPage Schema
How do I create a CRUD page in ASP.NET Zero React?▼

Create a functional component using useServiceProxy for API calls, useDataTable for table paging and sorting, and Ant Design Table inside a Metronic card layout. Add a create/edit modal with Ant Design Form, then register the route in AppRouter.tsx and the menu entry in appNavigation.tsx.

How to call ASP.NET Zero backend APIs from React components?▼

Use the useServiceProxy hook with the NSwag-generated service proxy class inside components, or createServiceProxy outside components. Never use raw fetch calls, and never manually edit the generated service-proxies.ts file.

Why does my NSwag GET request show Id=[object Object] in the URL?▼

This happens when you pass an EntityDto object to a GET or DELETE proxy method. NSwag flattens EntityDto for these HTTP methods, so pass the raw id number directly, such as productService.deleteProduct(record.id).

How do I add permission checks to React buttons in ASP.NET Zero?▼

Use the usePermissions hook to get the isGranted function, then conditionally render buttons based on permission names like isGranted("Pages.Products.Edit"). Apply this to all create, edit, and delete action buttons.

Can I edit the generated service-proxies.ts file manually?▼

No, the file is auto-generated by NSwag and manual edits will be overwritten. To regenerate proxies, run the Web.Host backend and execute react/nswag/refresh.bat.

Related Skills

Explore More Software Engineering Skills→
MythologIQMythologIQ

frontend-bridge-integration

Align React/TypeScript IPC payloads with Rust Tauri command signatures.

Community
Intermediate
kortix-aikortix-ai
6

fullstack-vite-convex

Automate full-stack web app development with Convex, Vite, React, and TDD.

Official
Advanced
taucao-rubytaucao-ruby

requests

Analyze Laravel backend request validation patterns in unit tests.

Community
Intermediate
burakdmirburakdmir
13

ABP Framework — UI & Frontend

Integrate ABP Framework UI across MVC/Razor Pages, Blazor, Angular, and React with theming and permission checks.

Community
Intermediate