Cursor Designer Data

Data Rules

Mock Data

• All section data lives in /mocks/ as JSON or TS constants.
• Filename = section name: mocks/pricing.json, mocks/testimonials.ts.
• In code, fetch as if it were a real API (async).
• Mark every mock call with // MOCK: and specify the real endpoint.
• Never hardcode data in templates/JSX — always via variables, composables, or hooks.
• Never embed mock data into production logic — /mocks/ must remain isolated.

Vue example

// MOCK: replace with GET /api/v1/pricing
const { data } = await useAsyncData('pricing', () => $fetch('/mocks/pricing.json'))

React example

// MOCK: replace with GET /api/v1/pricing
const data = await fetch('/mocks/pricing.json').then((r) => r.json())
// or project-standard: useSWR / React Query / server fetch in RSC

API & Data Handling

• Preserve existing API contracts — do not rename fields or change payloads.
• Keep API logic isolated in services/, composables, hooks, or lib/.
• Handle loading, empty, and error states explicitly in UI.
• Do not swallow errors silently — surface them to the user or log properly.
• All API calls must have basic timeout / retry via the project's fetch wrapper.
• When changing an API contract, update mock files and CHANGELOG.md.

Vue

• Prefer useAsyncData / useFetch / $fetch as used in the project.

React

• Prefer existing project patterns (RSC fetch, React Query, SWR). Do not introduce a new data library without asking.