.cursorrules

You are an AI programming assistant that specializes in React Router 7, TypeScript, and modern web development best practices. Follow these guidelines when generating or modifying code:

PROJECT ARCHITECTURE:
- Use a modular architecture with features organized in the app/modules directory
- Follow the React Router 7 file-based routing convention in app/routes
- Keep components small and focused on a single responsibility
- Use TypeScript with strict mode enabled
- Maintain separation between route components and business logic

CODING STYLE:
- Use 2 spaces for indentation
- Use single quotes for strings
- Use semicolons at the end of statements
- Max line length of 100 characters
- Max file length of 300 lines
- Max function length of 40 lines
- Early returns over nested conditionals
- Prefer const over let, avoid var
- Use CSS modules for styling
- Use named exports for consistency

NAMING CONVENTIONS:
- PascalCase for component names (e.g., ViewFont)
- camelCase for function names (e.g., handleFontSelect)
- PascalCase for type/interface names (e.g., FontData)
- SCREAMING_SNAKE_CASE for constants
- Use 'use' prefix for custom hooks
- Route files should be named in kebab-case (e.g., view-font.tsx)
- Interface names should be PascalCase and descriptive (e.g., FontDetailsProps)

REACT PATTERNS:
- Use functional components with arrow function syntax
- Define prop interfaces with ComponentNameProps naming
- Use proper React hooks (useState, useEffect, useMemo, useCallback)
- Implement error boundaries for route error handling
- Use React.Suspense for route loading states
- Implement proper TypeScript interfaces for route loaders and actions

ROUTING AND DATA FLOW:
- Use React Router 7's file-based routing system
- Implement proper loader and action functions for routes
- Use route.tsx pattern for nested layouts
- Implement proper error boundaries per route
- Use proper TypeScript types for route params and search params
- Handle loading and error states appropriately

STATE MANAGEMENT:
- Use React Router's built-in form handling
- Implement proper data loading strategies
- Use local state for component-specific state
- Implement proper caching strategies for font data

STYLING:
- Use CSS modules for component styling
- Follow BEM naming convention for CSS classes
- Maintain consistent spacing and layout
- Implement responsive design patterns
- Use CSS variables for theming

PERFORMANCE:
- Implement route-based code splitting
- Optimize font loading and display
- Use proper React optimization hooks
- Implement proper caching strategies
- Optimize images and assets

SECURITY:
- Validate all inputs
- Sanitize outputs to prevent XSS
- Implement proper route guards
- Handle sensitive data appropriately
- Validate route parameters

ACCESSIBILITY:
- Use semantic HTML elements
- Include proper ARIA labels
- Ensure keyboard navigation
- Maintain proper color contrast
- Include alt text for font previews

TESTING:
- Write unit tests for components
- Write integration tests for routes
- Test route loaders and actions
- Maintain 80% code coverage
- Test error boundaries

ERROR HANDLING:
- Use try-catch blocks appropriately
- Implement proper route error boundaries
- Use typed errors
- Provide meaningful error messages
- Handle route loading errors gracefully

DOCUMENTATION:
- Include JSDoc comments for components and functions
- Document route configurations
- Document loader and action functions
- Keep documentation up-to-date
- Include examples where necessary

When generating code, ensure it is:
- Type-safe with proper TypeScript usage
- Following React Router 7 best practices
- Accessible and performant
- Well-documented
- Easy to maintain
- Following project conventions

CODE READABILITY:
- Use descriptive names for route components
- Implement clear and consistent route organization
- Keep route handlers focused and small
- Use meaningful intermediate variables
- Add explanatory comments for complex routing logic
- Use consistent naming patterns throughout
- Name boolean variables with prefixes like 'is', 'has', 'should'
- Use plural names for arrays/collections
- Use descriptive parameter names in loaders and actions