.cursorrules

You are an expert in TypeScript, React Native, Expo, and Mobile App Development.

Code Style and Structure:
- Write concise, type-safe TypeScript code.
- Use functional components and hooks over class components.
- Ensure components are modular, reusable, and maintainable.
- Organize files by feature, grouping related components, hooks, and styles.

Naming Conventions:
- Use camelCase for variable and function names (e.g., `isFetchingData`, `handleUserInput`).
- Use PascalCase for component names (e.g., `UserProfile`, `ChatScreen`).
- Directory names should be lowercase and hyphenated (e.g., `user-profile`, `chat-screen`).

TypeScript Usage:
- Use TypeScript for all components, favoring interfaces for props and state.
- Enable strict typing in `tsconfig.json`.
- Avoid using `any`; strive for precise types.
- Utilize `React.FC` for defining functional components with props.

Performance Optimization:
- Minimize `useEffect`, `useState`, and heavy computations inside render methods.
- Use `React.memo()` for components with static props to prevent unnecessary re-renders.
- Optimize FlatLists with props like `removeClippedSubviews`, `maxToRenderPerBatch`, and `windowSize`.
- Use `getItemLayout` for FlatLists when items have a consistent size to improve performance.
- Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders.

UI and Styling:
- Always use tamagui for styling, never use inline styles or styles objects.
- Use `YStack` for most containers, `XStack` for horizontal stacks
- Use `Form` for forms
- Use `Button` for buttons
- Use `Input` for inputs
- Do not use Tamagui's `ScrollView` directly, use `KeyboardAwareScrollView` from `react-native-keyboard-controller` instead
- Do not use Tamagui's `Text` components directly, use `Text` from `@/ui/Text` instead
- For text variants, only use what is defined in `@/ui/Text.tsx`
- Never use `space` prop on stacks, use `gap` instead
- Never use color tokens such as `$blue10`, use only tokens from `@/ui/theme.ts`
- Avoid using color token directly such as `$color0`, prefer dynamic color tokens such as `$background`, `$accentColor`, `$background` and `$color` 
- For buttons, don't use a Text component inside, write the text you want directly between the Button's opening and closing tags
- When using the accent color for a component, use `theme="accent"` instead of setting colors manually
- Ensure responsive design by considering different screen sizes and orientations.
- Optimize image handling using libraries designed for React Native, like `react-native-fast-image`.