🧠 Cursor Rule — Generate API + UI Together

Summary

Cursor can generate backend API endpoints and matching UI components in one integrated flow. This ensures both layers stay aligned, eliminates contract drift, and accelerates full-stack development with immediate runtime validation.

Objectives

• Create synchronized API and UI code with consistent data contracts
• Prevent mismatch errors between frontend and backend
• Reduce boilerplate for forms, tables, CRUD operations, and validations
• Ship features faster by generating entire vertical slices at once

Principles

1. APIs and UI should be generated together, not separately.

2. Schema-driven design ensures consistency across the full stack.

3. Shared validators prevent invalid data at both boundaries.

4. Full-stack generation reduces rework and improves predictability.

Implementation Pattern

Step 1 — Define the data model

Specify fields, validation rules, and constraints—this becomes the single source of truth for both API and UI.

Step 2 — Generate API routes / handlers

Cursor produces:

• Create, Read, Update, Delete handlers
• Validation logic tied to the schema
• Error handling with structured responses
• Type-safe request and response objects

Step 3 — Generate matching UI components

Cursor creates components that match the API shape:

• Forms with validation wired to Zod/Yup schemas
• Data tables and lists
• Modals for create/edit flows
• Client fetching logic using fetch, axios, or React Query

Step 4 — Link UI ↔ API automatically

Cursor ensures:

• Correct HTTP methods
• Correct payload shape
• Correct route URLs
• Consistent response handling

Step 5 — Validate full-stack behavior through execution

• Submit forms with correct & incorrect data
• Trigger API routes with example payloads
• Inspect runtime logs to confirm correctness
• Confirm UI reflects backend errors and state changes predictably

Bug Prevention Examples

• **Field mismatch bugs**

API expects “phoneNumber” but UI sends “phone” → request fails.

Generated UI + schema eliminates naming drift.

• **Validation inconsistencies**

UI allows empty value but API rejects request → user frustration.

Shared validators avoid inconsistent validation rules.

• **Incorrect HTTP methods**

UI uses GET but backend expects POST → no data updates.

Cursor wires correct methods automatically.

• **UI silently breaks after schema change**

Adding a new required field in DB breaks form submissions.

Regenerated UI components stay aligned instantly.

Anti-Pattern (Before)

Manually creating UI after API is written:

• Duplicated types
• Incorrect field names
• Drift between validators
• Debugging guesswork

Example:

'fetch("/api/user", { method: "POST", body: JSON.stringify(formData) })

// API expects: { fullName, email }

// UI sends: { name, emailAddress }'

Result: silent failures, confusing errors.

Recommended Pattern (After)

Cursor generates both layers together:

'POST /api/user

Body: { fullName: string, email: string }'

UI form auto-creates fields fullName + email, re-uses schema, and validates both client + server side.

Benefits:

• No contract drift
• Higher reliability
• Faster development
• Type-safe across entire flow

Best Practices

• Always generate validators and shared types first.
• Treat forms as part of the API contract.
• Ask Cursor to regenerate UI when schema changes.
• Keep UI components small and composable.
• Use React Query or SWR for predictable fetching behavior.

Cursor Prompts

"Generate a full-stack CRUD feature with API routes and matching UI components."

"Create a form UI that reuses the same validation schema as the backend."

"Show me API handlers and React components wired together."

"Update the entire API + UI slice after this schema change."

Notes

• Full-stack generation eliminates ~80% of mismatch-related bugs.
• Shared schemas ensure consistent validation rules on both layers.
• Cursor’s multi-file reasoning ensures correct wiring across routes, components, and state.