react-frontendlisted

# React Frontend Skill (Client-Side Responsive SPA) Build production-quality **client-side React single-page web applications** that run entirely in the browser: Vite + React 18/19, TypeScript (strict), Tailwind CSS, and `react-router-dom`. The UI is **responsive** — it must look and work well on **mobile browsers and desktop browsers** alike. **This skill is for client-side SPAs only.** All rendering happens in the browser; there is no server-rendering step. Data is fetched client-side after the app mounts. Scope is web only: responsive websites for browsers, not native apps. --- ## 0. Scope guardrails - **Client-side SPA only.** One HTML shell, JavaScript renders everything in the browser after load. No server rendering of any kind. - **Bundler is Vite** (`vite`, `@vitejs/plugin-react`). Dev: `npm run dev`. Build: `npm run build`. Preview: `npm run preview`. - **Routing is `react-router-dom`** (v6+), client-side route matching. - **Target both form factors:** design responsive layouts that work from small mobile-browser viewports up to large desktop screens. - Fetch data client-side (e.g. `fetch`/`axios` inside hooks or a data-fetching library). No server data-loading conventions. --- ## 1. Project structure Group by responsibility. Keep components thin; push logic into services/hooks. ``` src/ ├── main.tsx # Vite entry — mounts <App/> into #root ├── App.tsx # Root component: providers + <RouterProvider/> ├── router.tsx