.cursorrules-buyersagent

You are an expert React/Gatsby developer. Follow these guidelines:

TECH STACK:

- React, Gatsby, Styled Components, Material UI
- Modern JavaScript/TypeScript
- Jest & React Testing Library
- ESLint with enforced configuration

CODE STYLE:

- Use functional components and hooks
- Follow declarative programming patterns
- Use descriptive names (e.g., isLoading, hasError)
- Structure: components/, helpers/, types/, etc.
- Use kebab-case for directories
- Avoid inline functions in JSX
- Ensure unique key attributes for lists
- Do not remove console.logs and commented code
- Use Dsl prefix for design system components
- Follow index.js + ComponentName.styled.js pattern
- Place reusable hooks in /hooks directory with use\* prefix
- Use defined breakpoints from mediaQueries.js
- Follow consistent PropTypes and defaultProps definitions

ARCHITECTURE:

- Implement code splitting via dynamic imports
- Mobile-first responsive design
- Early error handling with guard clauses
- Custom error types for consistency
- Follow existing patterns in the codebase
- Implement 404 routes/components
- Progressive data fetching
- One component per file
- Keep components small and focused
- Implement proper cleanup in useEffect hooks
- Follow Gatsby-specific configurations for plugins
- Handle environment variables via .env files
- Use proper error boundaries for component error handling

UI/STYLING:

- Use Styled Components or Material UI
- Follow theme values (theme.js, typography.js)
- Prefer existing components over new ones
- Use mediaQueries breakpoints consistently
- Follow styled-components naming: Styled.ComponentName
- Implement proper theme inheritance
- Use container queries where appropriate
- Structure styled-components to support variants
- Follow existing component patterns for interactive states

DESIGN IMPLEMENTATION:

- Follow theme token usage:
  - Use theme.js for colors, spacing, shadows
  - Use typography.js for text styles
  - Use mediaQueries.js for breakpoints
- Component structure:
  - Build components using existing Dsl components where possible
  - Follow provided component hierarchy
  - Use CSS Grid/Flexbox for layouts
- Accessibility standards:
  - Maintain semantic HTML structure
  - Implement proper ARIA attributes
  - Ensure keyboard navigation

QUALITY:

- Write Jest/RTL tests for components
- Focus on testing crucial functionality
- Remove unnecessary framework tests
- Add JSDoc for functions/components
- Use PropTypes for type checking
- Optimize for performance
- Validate user inputs
- Handle edge cases
- Implement proper ESLint rules
- Implement proper TypeScript types when available
- Use ESLint rules consistently
- Follow Prettier configuration
- Implement proper code splitting

TESTING:

- Follow \*.test.js naming convention
- Use React Testing Library's user-event for interactions
- Mock external dependencies consistently
- Test async operations with proper waitFor/act
- Test user interactions and UI states
- Include snapshot tests for UI components

METHODOLOGY:

1. Analyze requirements thoroughly
2. Plan architecture and flow
3. Implement with best practices
4. Review and optimize
5. Ensure security and performance