skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

frontend-feature

Generates complete ERP frontend features with TanStack Query hooks, Zod schemas, and React components.

Updated Aug 18, 2026
Search Tags:#typescript#react#code generation#zod#erp#tanstack query#react hook form
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill frontend-feature-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-feature
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/frontend-feature
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill frontend-feature-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a new ERP frontend feature requires wiring together API hooks, form validation, list pages, and permission guards consistently. This Skill generates the full feature structure following strict architectural conventions, eliminating inconsistent patterns and manual boilerplate. ## Core Features & Use Cases - API Layer Generation: Creates api.ts with centralized TanStack Query keys, list/detail/create/update/delete hooks, and automatic cache invalidation after mutations. - Form & Validation Scaffolding: Produces Zod schemas with derived types via z.infer and React Hook Form components using zodResolver, including dynamic field arrays. - List Pages with Permissions: Builds Syncfusion DataTable listing components with permission-guarded actions, status badges, currency display, and delete confirmation dialogs. - Use Case: Ask for an invoices feature under the finance module and receive api.ts, schemas.ts, InvoiceList.tsx, and InvoiceForm.tsx that follow the project's conventions: no barrel files, no direct fetch, no any types, and API types from generated OpenAPI code. ## Quick Start Ask the AI to create a complete frontend feature for a specific ERP module and entity, such as a list page and create/edit form for invoices in the finance module.

Frequently Asked Questions about frontend-feature

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

FAQPage Schema
How do I structure TanStack Query hooks for a React feature?▼

Create an api.ts file with a centralized query keys object and one hook per operation: useQuery for list and detail, useMutation for create, update, and delete. Invalidate the relevant query keys in onSuccess so the cache stays consistent after mutations.

How to combine React Hook Form with Zod validation?▼

Define a Zod schema, derive the form type with z.infer, and pass zodResolver(schema) to useForm. Use FormField components from shadcn/ui for each input and useFieldArray for dynamic line items such as invoice rows.

Should I use useState and useEffect for server data fetching?▼

No. Server state belongs in TanStack Query, which handles caching, stale time, and placeholder data while refetching. Reserve useState for local UI state like the current grid page or the id pending deletion.

How do I hide destructive buttons based on user permissions?▼

Use a usePermission hook that checks the permissions array in the Zustand auth store, supporting a wildcard '*' permission. Conditionally render create and delete buttons only when the corresponding permission string is present.

Why avoid barrel files and manual API types in a feature folder?▼

Barrel index.ts files with re-exports create coupling and circular import risk, so each file is imported directly. API types come from OpenAPI-generated code in src/api/generated to guarantee they match the backend contract instead of drifting when written manually.

Related Skills

Explore More Software Engineering Skills→
gil00pitagil00pita

openapi

Generate OpenAPI 3.1 specifications and TypeScript types from API definitions.

Community
Advanced
devturcodevturco

scaffold

Generate Drizzle schemas, tRPC CRUD APIs, and TanStack Form UI routes.

Community
Intermediate
hivemqhivemq
164

trace-error-messages

Trace error origins across OpenAPI contracts, React Query hooks, MSW mocks, and UI components.

Official
Advanced
SirPedrSirPedr

saga-feature

Generate Saga TTRPG feature code with database schemas, server functions, and UI components.

Community
Advanced