1---
2description: React component conventions and patterns
3globs: "*.tsx"
4alwaysApply: false
5---
6
7# React Component Rules
8
9## Component Structure
10- Use functional components with explicit return types
11- Define props interface directly above the component
12- Export components as named exports, never default
13
14## Patterns
15- Use `useCallback` for event handlers passed to children
16- Prefer composition over prop drilling — use React context for
17  data needed by deeply nested components
18- Keep components under 150 lines; extract sub-components when larger
19
20## Styling
21- Use Tailwind CSS utility classes exclusively
22- No inline styles except for dynamic values (e.g., calculated widths)
23- Follow mobile-first responsive design: `base → sm → md → lg`
24
25---
26
27## Example: Agent Requested rule (.cursor/rules/security.mdc)
28
29```
30---
31description: Security review checklist for auth and data handling
32alwaysApply: false
33---
34
35# Security Conventions
36
37- Sanitize all user input before database queries
38- Use parameterized queries; never string concatenation for SQL
39- Validate JWT tokens on every protected route
40- Never log sensitive data (passwords, tokens, PII)
41```
42
43---
44
45## Example: Auto Attached rule (.cursor/rules/testing.mdc)
46
47```
48---
49description: Testing conventions for unit and integration tests
50globs: ["*.test.ts", "*.test.tsx", "*.spec.ts"]
51alwaysApply: false
52---
53
54# Testing Rules
55
56- Use Vitest as the test runner
57- Colocate test files next to source files
58- Use `describe` blocks organized by function/component name
59- Prefer `userEvent` over `fireEvent` in component tests
60- Mock external services; never hit real APIs in unit tests
61```