|
| 1 | +# Common Project Guidelines |
| 2 | + |
| 3 | +## Device Size |
| 4 | + |
| 5 | +- pc: 1280px or above |
| 6 | +- tablet: 745px or above |
| 7 | +- mobile: 744px or below |
| 8 | + |
| 9 | +## Next.js App Router Best Practices |
| 10 | + |
| 11 | +- Default to server components |
| 12 | +- Implement client components only when needed |
| 13 | +- Use file-based routing system |
| 14 | +- Use layout.js for shared layouts |
| 15 | +- Implement loading.js for loading states |
| 16 | +- Use error.js for error handling |
| 17 | +- Use route handlers for API routes |
| 18 | + |
| 19 | +## TypeScript and Code Quality |
| 20 | + |
| 21 | +- Use TypeScript for type safety |
| 22 | +- Provide proper type definitions and interfaces |
| 23 | +- Let TypeScript infer types when possible |
| 24 | +- Use functional programming over classes |
| 25 | +- Prefer iteration and modularization over duplication |
| 26 | +- Use descriptive variable names (e.g., isLoading) |
| 27 | + |
| 28 | +## Component Development |
| 29 | + |
| 30 | +- Use functional components and hooks for state |
| 31 | +- Default to React Server Components (RSC) |
| 32 | +- Minimize 'use client', 'useEffect', 'setState' |
| 33 | +- Wrap client components in Suspense |
| 34 | +- Use dynamic loading for non-critical components |
| 35 | + |
| 36 | +## Styling and UI |
| 37 | + |
| 38 | +- Use Tailwind CSS classes only |
| 39 | +- Use Shadcn UI, Radix UI, Tailwind Aria |
| 40 | +- Mobile-first responsive design |
| 41 | + |
0 commit comments