frontend-fundamentalslisted

# Frontend Fundamentals — Stack-Agnostic UI Patterns Universal guidance for every component-based UI framework: React, React Native, Vue, Svelte, Solid. Framework-specific layering (Next.js App Router, React Native navigation, Vue composition API) lives in the stack-specific skill that `depends_on: [frontend-fundamentals]`. Loaded automatically when `enforce-skill.sh` routes a file under `frontend/` that matches a stack skill. ## 0. Every async UI is three-state Every screen or section that fetches data MUST explicitly handle three states. Missing any of them is a bug: | State | Required UI | |---|---| | **Loading** | skeleton or spinner; indication of progress | | **Error** | actionable message + retry affordance; never a blank screen | | **Empty** | explains why it's empty + suggests next action; never an ambiguous zero rows | A fourth state — **stale/refreshing while data exists** — is a common polish item. Render the previous data with a subtle loading indicator; don't blank the UI. Anti-pattern: `{data && <List data={data} />}`. This silently hides error AND empty AND loading behind a single falsy check. ## 1. Server components vs. client components (React 19+ / Next 15+) Default everything to server components. Convert to client only when one of these is present: - **Interactive state** (`useState`, `useReducer`, form state). - **Event handlers** (`onClick`, `onChange`, `onSubmit`). - **Browser-only APIs** (`window`, `localStorage`, `navigator`, `document`, `I