# Cursor Designer Data

> Use when working with data, API calls, mock data, JSON files, useAsyncData, useFetch, React data fetching, state management, or defining data contracts and endpoints for sections.

- Skill: `igrlebed/cursor-designer-data` (Agent Skill)
- Install (CLI): `npx skillmds@latest add igrlebed/cursor-designer-data`
- Raw SKILL.md: https://api.skillmd.com/api/skills/igrlebed/cursor-designer-data/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: igrlebed (https://skillmd.com/u/igrlebed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/igrlebed/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
```ts
// MOCK: replace with GET /api/v1/pricing
const { data } = await useAsyncData('pricing', () => $fetch('/mocks/pricing.json'))
```

### React example
```ts
// 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.