frontendlisted

# Frontend > First, apply all rules from the **vercel-react-best-practices** skill. The rules below extend and override that baseline for Singleton SD personal projects. --- ## Stack Decision Before writing any code, pick the right project type: | Scenario | Stack | |---|---| | SEO matters, auth required, or DB access needed | **Next.js App Router** | | Pure client-side tool, dashboard, or internal app | **React + Vite SPA** + NestJS API | | Need a real backend for either type above | **NestJS** | Default to **Next.js App Router** when in doubt — you can always skip the server features. --- ## Canonical Stack | Concern | Choice | Why | |---|---|---| | Framework | Next.js App Router | Server components, routing, built-in SSR/SSG | | Styling | Tailwind CSS | Utility-first, no context switching | | Server state | TanStack Query | Caching, loading, error states out of the box | | Client state | Zustand | Zero boilerplate, Redux DevTools support, simple API | | Language | TypeScript | Always | --- ## State Separation Rule - **Server state** (anything fetched from an API) → TanStack Query - **Client state** (UI-only: modals open, selected tab, form draft) → Zustand - Never put server data into Zustand manually — that's what TanStack Query's cache is for --- ## Project Setup Checklist When bootstrapping a new frontend project: ### Next.js App Router ```bash npx create-next-app@latest --typescript --tailwind --eslint --app --src-dir npm install @tanstack/react-query @