How to Simplify Complex UI Logic with Cursor

1---
2description: Use react-hook-form + Zod for all form generation
3globs: "*.tsx,*.jsx"
4alwaysApply: true
5---
6
7# Form Rules
8- ALWAYS use react-hook-form for form state management
9- ALWAYS use Zod schemas with @hookform/resolvers/zod for validation
10- NEVER use individual useState calls for form fields
11- NEVER write manual onChange handlers for form inputs
12- NEVER use uncontrolled inputs without register()
13- Use useFieldArray for dynamic lists of fields
14- Use Controller for third-party components (Select, DatePicker)
15- Define Zod schema first, then infer TypeScript types from it
16- Create reusable field wrapper components for consistent styling
17
18## Pattern:
19```typescript
20const schema = z.object({ name: z.string().min(1) });
21type FormData = z.infer<typeof schema>;
22const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
23  resolver: zodResolver(schema),
24});
25```

1@react-forms.mdc @src/components/ui/
2
3Create an order form with these fields:
41. Customer section: name (required), email (required, valid email), phone (optional)
52. Shipping address: street, city, state, zip (all required)
63. Items array (dynamic, add/remove): productId (select), quantity (number, min 1), notes (optional)
74. Payment: method (radio: credit/debit/paypal), card number (conditional, shown only for credit/debit)
8
9Use react-hook-form with Zod schema. Use useFieldArray for items.
10Use Controller for select and radio inputs.
11Infer TypeScript types from the Zod schema.

1import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
2
3interface FormFieldProps {
4  label: string;
5  registration: UseFormRegisterReturn;
6  error?: FieldError;
7  type?: string;
8  placeholder?: string;
9}
10
11export const FormField = ({ label, registration, error, type = 'text', placeholder }: FormFieldProps) => (
12  <div className="space-y-1">
13    <label className="block text-sm font-medium text-gray-700">{label}</label>
14    <input
15      type={type}
16      {...registration}
17      placeholder={placeholder}
18      className={`w-full rounded-md border px-3 py-2 text-sm ${
19        error ? 'border-red-500' : 'border-gray-300'
20      }`}
21    />
22    {error && <p className="text-sm text-red-600">{error.message}</p>}
23  </div>
24);
25
26export const FormSelect = ({ label, registration, error, options }: FormFieldProps & { options: { value: string; label: string }[] }) => (
27  <div className="space-y-1">
28    <label className="block text-sm font-medium text-gray-700">{label}</label>
29    <select {...registration} className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
30      <option value="">Select...</option>
31      {options.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
32    </select>
33    {error && <p className="text-sm text-red-600">{error.message}</p>}
34  </div>
35);

1Refactor this form to use react-hook-form with Zod validation.
2Replace all useState calls with useForm register.
3Replace manual onChange handlers with react-hook-form's register().
4Create a Zod schema matching the current validation logic.
5Infer the TypeScript type from the schema.
6Use @/components/form/FormField for input rendering.

1@react-forms.mdc @src/components/OrderForm.tsx
2
3Add submission handling to this form:
41. Show a loading spinner on the submit button during submission
52. Call POST /api/orders with the form data
63. Display server validation errors next to the relevant fields
74. Show a success toast on successful submission
85. Reset the form after successful submission
96. Handle network errors with a general error banner
10
11Use react-hook-form's setError() for server-side field errors.
12Use the form's isSubmitting state for the loading indicator.