Cursor rule

1---
2description: Code quality checklist and anti-patterns to avoid before shipping
3globs: []
4alwaysApply: false
5---
6 
7# Quality Checklist Rules
8 
9## Pre-Ship Quality Gates
10 
11### Code Architecture Quality
12- [ ] **No monolithic components** - Each component under 300 lines with single responsibility
13- [ ] **Logic extraction** - Reusable logic moved to custom hooks, not duplicated
14- [ ] **Type safety** - Shared interfaces defined in `lib/types.ts` and reused
15- [ ] **Service layer** - API calls abstracted to service functions, not inline
16- [ ] **Proper imports** - Using path aliases (@/) and organized import groups
17- [ ] **Validation schemas** - Zod schemas shared and reused across components
18- [ ] **Component composition** - Complex UI built from smaller, focused components
19 
20### Design Quality  
21- [ ] Uses intentional color palette that serves the design purpose
22- [ ] Has proper visual hierarchy with varied typography scales
23- [ ] Includes subtle animations and micro-interactions
24- [ ] Features generous whitespace and purposeful spacing
25- [ ] All interactive elements have clear hover/active states
26- [ ] **Accessibility standards are met (proper contrast, focus states)**
27- [ ] Mobile experience is thoughtfully designed
28- [ ] Maintains cohesive visual story throughout
29- [ ] Design feels custom-crafted, not template-like
30- [ ] Visual identity matches target industry and audience
31- [ ] Color choices enhance user experience and brand message
32 
33### Essential Commands Check
34```bash
35npm run lint         # MUST pass before shipping
36npm run build        # MUST succeed without errors
37```
38 
39### NEVER Ship Code That:
40- Contains components over 300 lines mixing multiple concerns
41- Has duplicated logic that could be extracted to hooks
42- Uses inline API calls instead of service layer
43- Lacks proper TypeScript interfaces
44- Has accessibility contrast violations  
45- Contains copy-pasted code blocks
46- Mixes business logic with presentation layer
47- Has console errors or warnings
48- Fails ESLint checks
49 
50### Development Workflow
511. Run `npm run dev` to start development
522. Follow component size limits (300 lines max)
533. Extract reusable logic to hooks
544. Test responsive design on mobile/desktop
555. Verify accessibility contrast ratios
566. Run `npm run lint` and fix all issues
577. Ensure no console errors before shipping
58 
59## Common Anti-Patterns to Avoid
60 
61### Component Anti-Patterns
62```tsx
63// DON'T: Monolithic component
64const BadDashboard = () => {
65  // 400+ lines of mixed concerns
66  const [users, setUsers] = useState([])
67  const [products, setProducts] = useState([])
68  // ... massive component
69}
70 
71// DO: Composition pattern
72const GoodDashboard = () => (
73  <PageLayout>
74    <DashboardHeader />
75    <DashboardMetrics />
76    <DashboardCharts />
77  </PageLayout>
78)
79```
80 
81### Data Fetching Anti-Patterns
82```tsx
83// DON'T: Inline API calls
84const BadComponent = () => {
85  useEffect(() => {
86    fetch('/api/users').then(res => res.json()).then(setUsers)
87  }, [])
88}
89 
90// DO: Service layer + custom hooks
91const GoodComponent = () => {
92  const { data: users } = useUsers()
93}
94```
95