Tamagui Monorepo Coding Rules: TypeScript Best Practices for Next.js, Expo, Supabase & Stripe

### Context
Develop scalable cross-platform applications in a monorepo setup powered by Tamagui for consistent UI on web (Next.js) and mobile (Expo/React Native). Integrate Supabase for backend services, Stripe for subscriptions, Turbo for workspace management, Zustand for state, TanStack Query for data, Zod for validation, Solito for navigation, and i18next for localization. Emphasize functional patterns, error resilience, and performance across platforms.

### Rules
#### Code Style and Structure
Craft succinct TypeScript code favoring functional, declarative styles without classes. Modularize to eliminate repetition, use verbs in names like `fetchUserData` or `isValidated`, and organize files with named exports for components, helpers, types, and constants. Adopt kebab-case for folders (e.g., `features/user-profile`).

#### TypeScript and Zod
Mandate TypeScript everywhere, preferring interfaces for shapes. Leverage Zod for runtime validation and inferred types. Replace enums with unions or objects. Define props via interfaces in functional components.

#### Syntax and Formatting
Declare pure functions with `function`. Keep JSX declarative and readable, skipping braces for simple ternaries or logical ANDs.

#### UI and Styling
Rely on Tamagui for unified, responsive components with mobile-first design. Apply themes for harmony between platforms.

#### State Management and Data Fetching
Employ Zustand for global state. Use TanStack React Query for queries, mutations, and caching. Reduce `useEffect` via selectors and `useMemo`.

#### Internationalization
Integrate i18next/react-i18next for web, expo-localization for native. Wrap all UI text in translation keys.

#### Error Handling and Validation
Front-load guards and early returns for failures. Log errors meaningfully, display user-friendly messages, and use Zod for inputs/outputs.

#### Performance Optimization
Apply dynamic imports, lazy components, and optimized media (lazy-load images with sizes). Tune for web/mobile via Tamagui and Next.js features.

#### Monorepo Management
Use Turbo for builds/tasks. Isolate packages in `packages/` and apps in `apps/`. Share configs, manage deps via root `package.json`.

#### Backend and Database
Connect via Supabase for auth/DB. Validate payloads with Zod. Secure per official docs.

#### Cross-Platform Development
Navigate with Solito. Use `.native.tsx` for native-only logic. Handle assets via `SolitoImage`.

#### Stripe Integration
Process payments/subscriptions securely. Build webhook endpoints for events. Link status to Supabase user records. Use Customer Portal.

#### Testing and Project Structure
Test key paths with React/React Native libs. Structure: `apps/web`, `apps/mobile`, `packages/ui`, `packages/api`. Manage envs with `.env`, `eas.json`, `next.config.js`. Generate via `yarn turbo gen`.

#### General Conventions
Commit descriptively. Document code. Follow tech docs (e.g., Next.js routing, Expo updates).

### Examples
**Zod Schema with Type Inference:**
```typescript
import { z } from 'zod';

const userSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
});

type User = z.infer<typeof userSchema>;
```

**Tamagui Component with Props Interface:**
```typescript
import { Stack, Text } from 'tamagui';

import { useQuery } from '@tanstack/react-query';

interface UserCardProps {
  userId: string;
}

function UserCard({ userId }: UserCardProps) {
  const { data: user, isLoading } = useQuery(['user', userId], () => fetchUser(userId));

  if (isLoading) return <Text>Loading...</Text>;

  return (
    <Stack>
      <Text>{user?.name}</Text>
    </Stack>
  );
}

export { UserCard };
```

**Zustand Store:**
```typescript
import { create } from 'zustand';

type State = {
  isAuthenticated: boolean;
  setAuth: (auth: boolean) => void;
};

const useAuthStore = create<State>((set) => ({
  isAuthenticated: false,
  setAuth: (auth) => set({ isAuthenticated: auth }),
}));

export { useAuthStore };
```

**Error Guard Example:**
```typescript
function processPayment(intentId: string) {
  if (!intentId) throw new Error('Invalid intent ID');
  // Proceed with Stripe call
}