Cline rules

1# Development Guidelines
2 
3This document outlines the development practices and guidelines for the Lorentzian Geometry Visualization project.
4 
5## Code Style
6 
7- Use TypeScript for all new code
8- Follow ESLint rules configured in the project
9- Use functional components, written as normal functions with hooks for React components
10- Use named exports for components and utilities
11 
12## Component Structure
13 
14- Each component should have a single responsibility
15- Use the Context API for shared state (see `VelocityContext.tsx`)
16- Keep components small and focused
17- Extract reusable logic into custom hooks
18 
19## Styling
20 
21- Use Tailwind CSS utility classes for styling
22- Follow the project's color scheme and design system
23- Use responsive design principles
24- Avoid inline styles unless absolutely necessary
25 
26## Performance Considerations
27 
28- Memoize expensive calculations
29- Use React.memo for components that render often but rarely change
30- Be mindful of re-renders in components that display visualizations
31- Consider using useCallback for functions passed as props
32 
33## Physics Accuracy
34 
35- Ensure all physics calculations are accurate according to special relativity
36- Document the mathematical basis for calculations in comments
37- Use appropriate units and conversions
38- Validate visualizations against known examples
39 
40## Accessibility
41 
42- Ensure all interactive elements are keyboard accessible
43- Use semantic HTML elements
44- Provide appropriate ARIA attributes
45- Ensure sufficient color contrast for text
46 
47## Testing
48 
49- Write tests for physics calculations
50- Test edge cases (e.g., velocities approaching c)
51- Ensure visualizations render correctly at different screen sizes
52 
53## Documentation
54 
55- Document complex physics concepts
56- Add JSDoc comments to functions and components
57- Keep the README updated with setup and usage instructions
58