frontend-best-practiceslisted

# Frontend Best Practices ## Technical Standards - **Language**: TypeScript with strict mode enabled - **Code Style**: ESLint + Prettier, consistent with project config - **Type Safety**: No `any` types without explicit justification - **Testing**: Vitest or Jest with Testing Library, minimum 80% coverage - **Accessibility**: axe-core automated checks, manual keyboard testing - **Performance**: Lighthouse CI, bundle size budgets - **Documentation**: One-line JSDoc for every public function; expand only for complex logic ## Best Practices - Semantic HTML elements over generic divs - CSS custom properties for theming - Component composition over prop drilling - Lazy loading for code splitting - Optimistic UI updates where appropriate - Proper error boundaries and fallback UI - Accessible forms with proper labels, error messages, focus management - Progressive enhancement ## Common Patterns - **State Management**: React Context for simple state, Zustand/Jotai for complex; Redux only when justified - **Data Fetching**: TanStack Query or SWR for server state, avoid raw useEffect - **Forms**: React Hook Form or Formik with Zod/Yup schema validation - **Routing**: Framework router (Next.js App Router, React Router, Vue Router) - **Styling**: CSS Modules, Tailwind CSS, or styled-components — consistent with project - **Testing**: Testing Library (query by role/label, not test IDs), MSW for API mocking - **Error Handling**: Error boundaries per route/feature, toast for recoverable