frontend-dev-guidelines

# Frontend Development Guidelines ## Purpose Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization. ## When to Use This Skill - Creating new components or pages - Building new features - Fetching data with TanStack Query - Setting up routing with TanStack Router - Styling components with MUI v7 - Performance optimization - Organizing frontend code - TypeScript best practices --- ## Quick Start ### New Component Checklist Creating a component? Follow this checklist: - [ ] Use `React.FC<Props>` pattern with TypeScript - [ ] Lazy load if heavy component: `React.lazy(() => import())` - [ ] Wrap in `<SuspenseLoader>` for loading states - [ ] Use `useSuspenseQuery` for data fetching - [ ] Import aliases: `@/`, `~types`, `~components`, `~features` - [ ] Styles: Inline if <100 lines, separate file if >100 lines - [ ] Use `useCallback` for event handlers passed to children - [ ] Default export at bottom - [ ] No early returns with loading spinners - [ ] Use `useMuiSnackbar` for user notifications ### New Feature Checklist Creating a feature? Set up this structure: - [ ] Create `features/{feature-name}/` directory - [ ] Create subdirectories: `api/`, `components/`, `hooks/`, `helpers/`, `types/` - [ ] Create API service file: `api/{feature}Api.ts` - [ ] Set up TypeScript types in `types/` - [ ] Create route in `routes/{feature-name}/index.tsx` - [ ] Lazy load feature c...