Name: frontend
Author: vanalmsick

Instruction file imported from vanalmsick/sweepstake (.github/instructions/frontend.instructions.md). Copyright stays with the author.

Frontend — React + TypeScript + Vite + RTK Query

Components MUST be functional and use useAppSelector / useAppDispatch.
Server data MUST use RTK Query only; NEVER use raw fetch.
Keep base URL and 401 refresh logic centralized in frontend/src/api/baseApi.ts.
For list/detail cache updates, prefer optimistic onQueryStarted + updateQueryData; use providesTags / invalidatesTags when optimistic updates are not feasible.
Reuse existing cache tag strings; do not invent new ones.
Store conventions: use authSlice and apiErrorSlice in frontend/src/store/; route API errors via addApiError; use ApiErrorNotification for display.
If backend schemas/models change, update matching types and RTK Query endpoint typings in frontend/src/.
Styling MUST be Tailwind only, responsive from iPhone 12 portrait to 4K, and respect OS light/dark mode.
Icons MUST use lucide-react; no inline SVG paths.

{ "ocm": "1", "id": "vanalmsick-sweepstake-frontend-instructions", "kind": "skill", "name": "frontend", "description": "Frontend — React + TypeScript + Vite + RTK Query", "publisher": "vanalmsick", "version": "1.0.0", "capabilities": { "domains": [ "coding", "data_analysis" ], "tags": [ "skill-md", "github-instructions" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Frontend — React + TypeScript + Vite + RTK Query" ], "primary": false, "metadata": { "source": { "provider": "github-instructions", "repository": "https://github.com/vanalmsick/sweepstake", "path": ".github/instructions/frontend.instructions.md", "ref": "42f35a98ca930d46eb9350b580cdb64b49062fd2", "url": "https://github.com/vanalmsick/sweepstake/blob/42f35a98ca930d46eb9350b580cdb64b49062fd2/.github/instructions/frontend.instructions.md", "key": "vanalmsick/sweepstake/.github/instructions/frontend.instructions.md" }, "applies_to": "frontend/**" }, "instructions": "## Frontend — React + TypeScript + Vite + RTK Query\n\n- Components MUST be functional and use `useAppSelector` / `useAppDispatch`.\n- Server data MUST use RTK Query only; NEVER use raw `fetch`.\n- Keep base URL and 401 refresh logic centralized in `frontend/src/api/baseApi.ts`.\n- For list/detail cache updates, prefer optimistic `onQueryStarted` + `updateQueryData`; use `providesTags` / `invalidatesTags` when optimistic updates are not feasible.\n- Reuse existing cache tag strings; do not invent new ones.\n- Store conventions: use `authSlice` and `apiErrorSlice` in `frontend/src/store/`; route API e", "cost": { "context_tokens": 233 } }

frontend

About

Frontend — React + TypeScript + Vite + RTK Query

Use it

Manifest

Reviews