Ctrlk

React Js UI Guide Prompts

Implement FlexBase UI with React: hooks, services, forms, dialogs, authentication, API response handling, and more.

How to Use

Tell your AI agent what React UI you want to build. It will load the right conventions and guide sections automatically.

Example prompts you can give your AI agent:

Create the API service for the Products module
Build a list component with pagination for Customers
Create a custom hook for the Orders API
Set up the authentication context
Fix the API response unwrapping in my base service
Create a form with React Hook Form for Order editing
Implement the complete React UI for Invoices

Task Catalog

Critical Rules (Applied Automatically)

  • NEVER remove id from Update/Delete DTOs — causes silent API failures

  • All IDs are string type in TypeScript interfaces

  • ApiResponse<T> wrapper — always unwrap .result from API responses

Service Tasks

Task
Goal

Create Base API Service

Axios/fetch base with response unwrapping, error handling

Create Module Service

Entity-specific service extending base

Create Custom Hook

useEntity hook wrapping API calls

Review API Services

Audit services for pattern violations

Authentication Tasks

Task
Goal

Token Storage Service

Secure token storage and retrieval

Authentication Service

Login/logout/refresh token flows

Auth Context

React Context for authentication state

Component Tasks

Task
Goal

Create List Component

Data table with pagination, sorting, filtering

Create Form (React Hook Form)

Form with validation

Autocomplete for Foreign Keys

Lookup/search for related entities

Dialog Tasks

Task
Goal

Create Dialog Service

Centralized dialog management

Create Modal Component

Modal with form/view content

Routing & State Tasks

Task
Goal

Configure Routes

React Router setup

Private Route Component

Auth-protected routes

Context API State

State with Context + useReducer

Redux State

Redux Toolkit state management

Complete Implementation Tasks

Task
Goal

Complete Entity UI

Full UI: list + form + service + routing

Complete Project Review

Full audit against React guide

Sync DTOs with API

Compare React interfaces with API DTOs

Related

Last updated