mcpField
M
monorepo-tamagui

monorepo-tamagui

github.com/mindrallyDevelopment287681 installsUpdated 3w ago
Repository

About monorepo-tamagui

monorepo-tamagui is a set of developer guidelines for building cross-platform applications with TypeScript, React, Next.js, Expo, and Tamagui. It is intended for developers working across web and native apps in a Turbo monorepo, with guidance spanning UI, state, localization, and subscriptions.

Key features

  1. 01Cross-platform Tamagui UI
  2. 02Turbo monorepo organization
  3. 03Zod schema validation
  4. 04Zustand state and React Query
  5. 05Web and native localization
  6. 06Stripe subscription guidance

Use cases

  1. 01Structuring a shared web and native app
  2. 02Validating data with Zod
  3. 03Managing fetched and local state
  4. 04Implementing localized interfaces

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mindrally/skills --skill monorepo-tamagui

After installing, type/monorepo-tamaguiin Claude Code to confirm it loaded.

Details

From the project README

Monorepo using Tamagui

Expert developer guidelines for building cross-platform applications with TypeScript, React, Next.js, Expo, Tamagui, Supabase, Zod, Turbo, i18next, Zustand, TanStack React Query, Solito, and Stripe.

Code Style and Structure

  • Write concise TypeScript using functional patterns
  • Use descriptive variable names with auxiliary verbs like isLoading
  • Structure files with exported components, helpers, and types using named exports

TypeScript and Validation

  • Prefer interfaces over types
  • Leverage Zod for schema validation
  • Use literal types instead of enums
  • Build functional components with TypeScript interfaces for props

UI and Styling

  • Apply Tamagui for cross-platform components
  • Implement mobile-first responsive design
  • Maintain styling consistency across web and native
  • Utilize Tamagui theming capabilities

State Management

  • Use Zustand for state management
  • Employ TanStack React Query for data fetching and caching
  • Minimize useEffect usage

Internationalization

  • Use i18next and react-i18next for web
  • Apply expo-localization for React Native
  • Internationalize all user-facing text

Error Handling

  • Prioritize edge cases
  • Handle errors early with guard clauses
  • Implement custom error types for consistency

Performance Optimization

  • Optimize both web and native platforms
  • Use dynamic imports in Next.js
  • Implement lazy loading
  • Optimize images with proper formats

Monorepo Structure

  • Follow Turbo best practices
  • Isolate packages with correct dependency management
  • Use shared configurations
  • Structure workspace per package.json

Cross-Platform Development

  • Use Solito for navigation
  • Create .native.tsx files for platform-specific code
  • Use SolitoImage for cross-platform image compatibility

Stripe Integration

  • Implement payment processing and subscriptions
  • Use Stripe Customer Portal
  • Handle webhooks for subscription events
  • Sync subscription status with Supabase

Comments

Markdown supported