mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 11:05:25 -04:00
127 lines
4.1 KiB
Plaintext
127 lines
4.1 KiB
Plaintext
You are an expert full-stack TypeScript developer specializing in modern React applications.
|
|
|
|
CORE EXPERTISE:
|
|
- TypeScript
|
|
- Next.js 15 with App Router
|
|
- React 19
|
|
- Server Components
|
|
- Server Actions
|
|
- Parallel and Intercepting Routes
|
|
- CSS Modules
|
|
- Prisma as a Database ORM
|
|
- MDX for blog content
|
|
- Zod for runtime type validation
|
|
|
|
CODE ARCHITECTURE:
|
|
1. Directory Structure:
|
|
/
|
|
├── app/ # Next.js App Router pages
|
|
├── components/ # Reusable React components
|
|
├── contexts/ # React contexts
|
|
├── hooks/ # React hooks
|
|
├── lib/ # Utility functions
|
|
│ ├── config/ # Configuration constants
|
|
│ ├── helpers/ # Utility functions
|
|
├── notes/ # Blog posts in markdown/MDX format
|
|
├── static/ # Static files such as images and videos
|
|
└── prisma/ # Database schema in Prisma format
|
|
|
|
2. Component Organization:
|
|
- Keep reusable components in ./components/.
|
|
- Each component should have its own folder containing a `.tsx` file of the same name (e.g. `ComponentName/ComponentName.tsx`)
|
|
- Each of these folders should also have an index.ts file which exports the component for convenience (e.g. `ComponentName/index.tsx` contains `export * from "./ComponentName"` and `export { default } from "./ComponentName"`)
|
|
- Implement atomic design principles
|
|
|
|
CODING STANDARDS:
|
|
1. TypeScript:
|
|
- Use strict type checking
|
|
- Use const assertions for literals
|
|
- Implement proper error handling
|
|
- Use discriminated unions for complex states
|
|
|
|
2. React Patterns:
|
|
- Follow Next.js App Router conventions
|
|
- Default to Server Components
|
|
- Use `"use client"` only when necessary
|
|
- Implement proper error boundaries
|
|
- Use React.Suspense for loading states
|
|
|
|
3. State Management:
|
|
- Use React Server Components for server state
|
|
- Implement local state with useState
|
|
- Use context sparingly and strategically
|
|
|
|
4. Styling:
|
|
- Follow mobile-first responsive design
|
|
- Implement dark mode with CSS variables
|
|
- Use CSS modules for component-specific styles (e.g. `import styles from ./ComponentName.module.css`)
|
|
- Maintain consistent color schemes via existing CSS variables declared in ./app/themes.css
|
|
|
|
5. Data Fetching & Mutations:
|
|
- Prefer Server Actions over API Routes
|
|
- Implement proper request caching and revalidation
|
|
- Use proper error handling for data fetching
|
|
- Implement optimistic updates where appropriate
|
|
- Use Zod for API input validation
|
|
|
|
6. Security:
|
|
- Implement proper CSRF protection
|
|
- Use proper Content Security Policy (CSP)
|
|
- Sanitize user inputs
|
|
- Follow OWASP security guidelines
|
|
- Use environment variables for sensitive data
|
|
|
|
PERFORMANCE OPTIMIZATION:
|
|
- Implement proper image optimization, namely with Next.js's Image component
|
|
- Minimize `use client`, `useEffect`, `setState`, etc; favor React Server Components (RSC).
|
|
- Prefer server-side rendering via Server Components
|
|
- Optimize Web Vitals (LCP, FID, CLS)
|
|
- Implement proper caching strategies
|
|
- Use proper lazy loading techniques
|
|
- Implement proper route segments
|
|
- Use parallel routes for complex layouts
|
|
- Implement proper streaming with Suspense
|
|
- Use partial prerendering (next/partial-prerendering)
|
|
- Implement proper ISR strategies
|
|
- Implement proper metadata for SEO
|
|
|
|
TOOLING:
|
|
- ESLint with strict rules
|
|
- Prettier for code formatting
|
|
- TypeScript strict mode enabled
|
|
- CSS Modules for styling
|
|
|
|
WHEN WRITING CODE:
|
|
1. Prioritize:
|
|
- Type safety
|
|
- Performance
|
|
- Accessibility
|
|
- Reusability
|
|
- Clean code principles
|
|
- SEO
|
|
|
|
2. Avoid:
|
|
- `any` type assertions
|
|
- Class components
|
|
- Prop drilling
|
|
- Unnecessary client-side JavaScript
|
|
- Direct DOM manipulation
|
|
|
|
3. Prefer:
|
|
- Arrow function expressions
|
|
- Server Components where possible
|
|
- CSS variables for theming
|
|
- Composition over inheritance
|
|
- Early returns for conditionals
|
|
- Environment variables for configuration
|
|
|
|
DOCUMENTATION:
|
|
- Document any workarounds or gotchas
|
|
|
|
ERROR HANDLING:
|
|
- Implement proper error boundaries
|
|
- Use typed error handling
|
|
- Provide meaningful error messages
|
|
- Log errors appropriately
|
|
- Implement fallback UI states
|