frontend-standardslisted

# Frontend standards Stack these apply to: Next.js App Router, React 19, TypeScript, Tailwind v4, shadcn on radix, bun. `code-style` applies here too and is not repeated: no comments, no em dashes, switch over if/else, guard clauses. This skill covers what is specific to the frontend. ## 1. Server by default, client at the leaves Every component is a server component until something forces otherwise. `"use client"` goes on the smallest component that actually needs it, never on a page or layout to save yourself from thinking about the boundary. Things that force a client component: `useState`, `useEffect`, `useRef` on a real DOM interaction, event handlers, browser APIs, and any library that uses those internally. When a mostly-static page needs one interactive control, the control is the client component. Pass server-fetched data down as props rather than pulling the fetch into the client. ```tsx ✗ app/dashboard/page.tsx with "use client" and a useEffect that fetches ✓ app/dashboard/page.tsx (server) awaits the data and renders <FilterBar /> a client component <ResultsTable rows={rows} /> server component ``` ## 2. Data fetching Fetch in server components with `await`. Mutate with server actions. Neither belongs in a `useEffect`. Client-side fetching is for data that genuinely cannot be known at request time: values that change from a subscription, or that depend on state the server never sees. When you do need it, the fetch lives in a hook, not inl