frontend-dev-guidelines

Topics in the source

• Frontend Development Guidelines
• Purpose
• When to Use This Skill
• Quick Start
• New Component Checklist
• New Feature Checklist
• Import Aliases Quick Reference
• Common Imports Cheatsheet

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization. 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 -- Creating a component? Follow this checklist: [ ] Use React.FC pattern with TypeScript [ ] Lazy load if heavy component: React.lazy(() => import()) [ ] Wrap in for loading states [ ] Use useSuspenseQuery for data fetching [ ] Import aliases: @/, types, components, features [ ] Styles: Inline 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 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 featu

This is an excerpt. Refer to the complete source and its current requirements.