Cursor rule

1# Development Workflow and Quality Standards
2 
3## Development Process
4 
51. **Plan**: Understand requirements and design solution
62. **Code**: Follow established patterns and conventions
73. **Test**: Ensure functionality works as expected
84. **Build**: Run `npm run build` to verify no TypeScript errors
95. **Review**: Check code quality and adherence to standards
10 
11## Code Quality Standards
12 
13- **TypeScript**: Always use strict mode, no `any` types
14- **React**: Functional components, minimal useEffect usage
15- **Performance**: Mobile-first design, optimize for performance
16- **Accessibility**: Proper ARIA labels, keyboard navigation
17- **Error Handling**: Graceful error handling with user feedback
18 
19## File Naming Conventions
20 
21- **Components**: PascalCase (e.g., `ProductCard.tsx`)
22- **Hooks**: camelCase starting with `use` (e.g., `useAuth.ts`)
23- **Services**: camelCase (e.g., `orderService.ts`)
24- **Types**: camelCase (e.g., `productTypes.ts`)
25- **Constants**: UPPER_SNAKE_CASE (e.g., `enums.ts`)
26 
27## Import Organization
28 
29```typescript
30// 1. React and external libraries
31import React from "react";
32import { useNavigate } from "react-router";
33 
34// 2. Internal components and hooks
35import { Button } from "@/components/ui/button";
36import { useAuth } from "@/contexts/AuthContext";
37 
38// 3. Types and constants
39import { ROUTE_NAMES } from "@/constants/enums";
40import type { Product } from "@/types/product";
41 
42// 4. Utilities and services
43import { cn } from "@/lib/utils";
44import { productService } from "@/lib/productService";
45```
46 
47## Testing Requirements
48 
49- Test all user interactions and flows
50- Verify mobile responsiveness
51- Check error handling scenarios
52- Ensure proper loading states
53- Test with different data sets
54 
55## Build Verification
56 
57- **Always run `npm run build` before committing**
58- Fix any TypeScript compilation errors
59- Ensure no build warnings
60- Verify all imports resolve correctly
61- Check that all types are properly defined
62 
63## Performance Guidelines
64 
65- Implement proper loading states
66- Use skeleton components for content loading
67- Optimize images and assets
68- Implement proper caching strategies
69- Minimize bundle size
70 
71## Mobile-First Design
72 
73- Design for mobile devices first (320px+)
74- Use responsive breakpoints (sm:, md:, lg:, xl:)
75- Ensure touch-friendly interactions
76- Test on various screen sizes
77- Optimize for mobile performance
78 
79## Error Prevention
80 
81- Use TypeScript strict mode
82- Implement proper validation
83- Handle edge cases gracefully
84- Provide clear error messages
85- Log errors for debugging
86 
87## Code Review Checklist
88 
89- [ ] TypeScript compiles without errors
90- [ ] Mobile responsive design implemented
91- [ ] Proper error handling in place
92- [ ] Follows established patterns
93- [ ] Uses enums from constants
94- [ ] Implements pagination for lists
95- [ ] No unnecessary useEffect usage
96- [ ] Proper component composition
97- [ ] Accessibility considerations
98- [ ] Performance optimizations
99 
100## Common Pitfalls to Avoid
101 
102- Don't use `any` type in TypeScript
103- Don't hardcode values that exist in enums
104- Don't create components without proper typing
105- Don't skip error handling
106- Don't ignore mobile responsiveness
107- Don't use useEffect when not necessary
108  description:
109  globs:
110  alwaysApply: false
111 
112---
113