frontend-dev-guidelines

原文涵盖的主题

• 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

这里只展示节选，请以完整原文和当前要求为准。